Chrome - atributo de Lazy Load nativo

A partir da versão 76 será possível usar o novo atributo loading para fazer o lazy-load de recursos sem precisar usar bibliotecas externas ou código javascript. Em versões anteriores do navegador, o atributo já estava disponível para testes, mas precisava ser ativado com uma flag nas configurações.

Como funciona

Recursos que estiverem usando o atributo loading="lazy" terão o seu carregamento atrasado até que chegue a uma determinada distancia do viewport, como o vídeo acima mostra.

Atualmente apenas imagens e iframes podem utilizar o novo atributo, desta maneira:

<img src="image.png" loading="lazy">
<iframe src="https://example.com" loading="lazy"></iframe>

Os valores que o atributo recebe são:

  • auto - Funcionamento default do navegador, como se não estivesse com o atributo loading
  • lazy - Atrasa o carregamento do recurso até que este chegue a uma determinada distancia do viewport
  • eager - Carrega o recurso imediatamente, indiferente de onde ele esteja na página

Dicas

É sempre recomendado que imagens tenham seus tamanhos setados sempre, para que o conteúdo na página não fique "pulando" conforme as imagens vão carregando.

<img src="..." loading="lazy" width="200" height="200">
<img src="..." loading="lazy" style="height:200px; width:200px;">

Iframes não serão afetados por lazy-loading se forem enquadrados nas seguintes regras abaixo, pois diversas vezes são utilizados para carregar conteúdos de recursos externos (como ferramentas de analytics)

  • A altura e largura do iframe for menor que 4px
  • Estiverem com displat:none; ou visibility:hidden aplicados
  • Estiverem fora da tela com posicionamento X ou Y negativos

Para mais informações e perguntas frequentes, acessem a página oficial: https://web.dev/native-lazy-loading