HTML - Lazy Loading

Publicado por Fábio Berbert de Paula em 03/12/2020

[ Hits: 1.872 ]

Blog: https://fabio.automatizando.dev

 


HTML - Lazy Loading



Essa dica vai para desenvolvedores front-end. Você conhece o atributo "loading"? Ele está presente nas tags <img> e <iframe> e é muito útil para acelerar o carregamento de suas páginas HTML.

Como funciona

Suponha que temos uma página HTML enorme com imagens e scripts de cabo a rabo. O navegador irá tentar baixar, em paralelo, todas as imagens e scripts, independente da ordem em que aparecem. Pode ser que uma imagem renderizada no início da página demore mais que uma no fim.

O Lazy Loaging foi criado para endereçar esse problema. Você pode adicionar o atributo loading="lazy" nas imagens e iframes contidos numa área não visível por padrão da sua página. Quando esse atributo está presente, o browser só irá carregar o conteúdo "lazy" ao término do carregamento dos demais elementos da página ou então quando o usuário fizer o scroll down até o elemento em específico.

Sua sintaxe é bem simples:

<img src="image.jpg" alt="..." loading="lazy">
<iframe src="video-player.html" title="..." loading="lazy"></iframe>

Com isso você proverá uma renderização de melhor fluidez para o usuário, melhorando sua experiência na página.

Fonte: Lazy loading - Web Performance | MDN

Outras dicas deste autor

Busca Reversa no Mongo Shell

Como reiniciar o USB sem tirar o cabo

Chromium e Firefox - Forma prática de abrir links em nova aba

Teclas de atalho para navegação entre abas do navegador

Primeira Conferencia Hacker no Brasil

Leitura recomendada

Botões com imagem cambiável

Instalação do Aptana (Desevolvimento WEB)

Substituto do dreamweaver

Tamanho das Fontes

CSS3 - Forçando quebra de linha em URL longa

  

Comentários
[1] Comentário enviado por maurixnovatrento em 03/12/2020 - 10:28h


Muito bom..

___________________________________________________________
[code]Conhecimento não se Leva para o Túmulo.
https://github.com/MauricioFerrari-NovaTrento [/code]



Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts