HTML - Lazy Loading

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

[ Hits: 1.109 ]

Blog: https://mestrefabio.com

 


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

Como validar arquivos RSS via linha de comando

Como checar se sua placa possui sinal físico de rede

Indentação automática no Vim

Verificar se site está online via linha de comando

Escolhendo o modo de inicialização do Netscape

Leitura recomendada

Página inicial personalizada

Configurar efeito modal ao fundo de um elemento com jQuery

Botões com imagem cambiável

Instalação do Aptana (Desevolvimento WEB)

Javascript - Criando galeria de imagens com "LIGTHBOX"

  

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