Pular para o conteúdo

HTML - Lazy Loading

Dica publicada em Javascript / Design
Fábio Berbert de Paula fabio
Hits: 2.051 Categoria: Javascript Subcategoria: Design
  • Indicar
  • Impressora
  • Denunciar

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

G-Desktop-Suite - Google Drive para Desktop Linux

Como Instalar as Fontes TrueType da Microsoft no Debian 12

A melhor forma de apagar milhões de arquivos em servidores GNU/Linux

React Native: Package Ignored Invalid Configuration [Resolvido]

Automatizando o processo de backup do MySQL

CSS3 - Forçando quebra de linha em URL longa

Melhores práticas para um site mais rápido

Para sempre VOL

Javascript - Criando galeria de imagens com "LIGTHBOX"

Como personalizar o thumbnail de seu site no Facebook

Contribuir com comentário

Entre na sua conta para comentar.