HTML - Lazy Loading
Dica publicada em Javascript / Design
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.
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:
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
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
Muito bom..
___________________________________________________________