O atributo loading="lazy" diz ao navegador para adiar o carregamento de uma imagem ou iframe até que ela esteja prestes a entrar no viewport — economizando largura de banda e acelerando o carregamento inicial, sem JavaScript.
html
O atributo loading="lazy" diz ao navegador para adiar o carregamento de uma imagem ou iframe até que ela esteja prestes a entrar no viewport — economizando largura de banda e acelerando o carregamento inicial, sem JavaScript.
lazy — carregue apenas quando a rolagem a aproximar do viewport.eager (padrão) — carregue imediatamente, independentemente da posição.O navegador usa uma margem (carrega um pouco antes do elemento rolar para a view) para que a imagem geralmente esteja pronta quando o usuário a vir.
<img src="x.jpg" loading="lazy" width="800" height="600" />
Sem dimensões (ou aspect-ratio), a imagem carregada preguiçosamente não tem espaço reservado, então quando carrega a página pula — prejudicando Cumulative Layout Shift (CLS). Sempre reserve espaço.
<!-- ❌ the hero/LCP image should load eagerly — lazy delays it -->
<img src="hero.jpg" loading="lazy" />
<!-- ✅ -->
<img src="hero.jpg" loading="eager" fetchpriority="high" />
Carregar preguiçosamente a imagem Largest Contentful Paint na verdade prejudica o desempenho — retarda o pixel mais importante. Carregue preguiçosamente apenas mídia fora da tela.
// the old manual approach native lazy-loading replaced
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => { if (e.isIntersecting) e.target.src = e.target.dataset.src; });
});
O loading="lazy" nativo removeu a necessidade disso na maioria dos casos (embora IntersectionObserver ainda seja útil para lógica personalizada).
O carregamento preguiçoso nativo reduz bytes iniciais e solicitações para páginas longas com muitas imagens — uma grande vitória móvel — gratuitamente.
Os detalhes importam: reserve dimensões para proteger CLS e mantenha o conteúdo acima da dobra/imagens LCP como eager (até fetchpriority="high"") para que o conteúdo importante ainda carregue rapidamente.