HTML - Lazy Loading

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

[ Hits: 1.927 ]

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

Como instalar o repositório do DBeaver no Ubuntu

"Ctrl + a" para selecionar tudo no Vim

Vim - juntar múltiplas linhas em uma só (JOIN)

Como colorir os logs do terminal com ccze

Restaurando abas no Google Chrome

Leitura recomendada

HTML sem tabelas (tableless)

Ajax loading

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

Javascript - Criando galeria de imagens com "LIGTHBOX"

Site com diversos emojis para seus códigos

  

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