HTML - Lazy Loading

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

[ Hits: 1.117 ]

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

MongoDB - Habilitar autenticação por usuário (Access Control)

Minecraft no Debian 10

Informações sobre semáforos e memória compartilhada

giFT: Usando a rede do Kazaa no Ubuntu

ffmpeg - Como aumentar ou reduzir o volume de um áudio ou video via linha de comando

Leitura recomendada

Ajax loading

Instalação do Aptana (Desevolvimento WEB)

Para sempre VOL

Configurar efeito modal ao fundo de um elemento com jQuery

Como personalizar o thumbnail de seu site no Facebook

  

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