HTML - Lazy Loading

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

[ Hits: 1.092 ]

Blog: https://www.instagram.com/alexabolada/

 


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

online_man - Páginas de manual online no terminal

Descobrindo o PageRank de um site via linha de comando

Como substituir caracteres acentuados pelos equivalentes não-acentuados

Contador de linhas em consultas SQL

ERROR 144 - Table XXX is marked as crashed and last (automatic?) repair failed [Resolvido]

Leitura recomendada

Substituto do dreamweaver

Melhores práticas para um site mais rápido

Como evitar que o CSS do teu site fique armazenado em cache

Configurar efeito modal ao fundo de um elemento com jQuery

Botões com imagem cambiável

  

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