Corrija 'Adiar imagens fora da tela': Guia de Lazy Loading para Core Web Vitals

O que é 'adiar imagens fora da tela'?

O aviso de adiar imagens fora da tela era uma auditoria do Lighthouse que sinalizava páginas com imagens que poderiam usar lazy loading. O Lighthouse sinalizava imagens que atendiam a todos estes critérios:

• A imagem termina abaixo de 3 vezes a altura da viewport.
  Quando uma imagem não usa lazy loading e termina abaixo de 3 vezes a altura da parte visível da página, e começa abaixo da parte visível da página.
• A imagem é maior que 0.02 MB ou leva mais de 50ms para carregar.
  Imagens que são pequenas ou inline são ignoradas. Scripts de lazy loading frequentemente usam pequenas imagens de espaço reservado que ficam abaixo desse limite.
• A imagem não tem atributo loading definido.
  O Lighthouse ignora imagens que tenham o atributo loading="lazy" ou loading="eager".

Esta auditoria foi removida no Lighthouse 13

A partir do Lighthouse 13 (outubro de 2025), esta auditoria foi totalmente removida. A equipe do Chrome determinou que os navegadores modernos já despriorizam imagens fora da tela, então a auditoria gerava mais ruído do que feedback útil.

Mas aqui está o detalhe: a otimização em si ainda importa. Fazer o lazy loading de imagens fora da tela reduz a largura de banda, libera conexões de rede para recursos críticos e melhora o seu Largest Contentful Paint (LCP). O fato de que o Lighthouse não o sinaliza mais significa que você precisa verificar por conta própria. Use Real User Monitoring ou faça uma auditoria manual de suas páginas para encontrar imagens que carregam sem loading="lazy".

Um rápido lembrete: o que é lazy loading?

Lazy loading significa que imagens que não estão na parte visível da página são carregadas posteriormente, geralmente logo antes de rolarem para a área visível. O navegador busca a imagem apenas quando o usuário chega perto dela. Isso economiza largura de banda e permite que o navegador foque nos recursos que realmente importam para a renderização inicial.

O que causa o carregamento eager de imagens fora da tela?

Imagens não são adiadas por padrão. Imagens fora da tela que não são adiadas acabam na página porque o atributo loading está ausente ou a imagem não é tratada por uma biblioteca de lazy loading. Causas comuns:

• Plugins mal codificados no seu CMS.
• Plugins que desativam o lazy loading nativo.
• Imagens de fundo (estas precisam de uma abordagem diferente de loading="lazy").
• Page builders que geram HTML ruim (por exemplo: Elementor ou WP Bakery).
• Texto que é copiado e colado em um editor WYSIWYG (como o TinyMCE).
• Codificação ruim do template.

Como imagens fora da tela afetam seus Core Web Vitals?

Imagens fora da tela não impactam diretamente as métricas do Lighthouse. Mas elas tornam a renderização de uma página da web desnecessariamente complicada. Seu navegador precisará baixar mais recursos antes que a página possa ser exibida na tela. Existem 3 problemas com imagens fora da tela carregadas com eager:

• Mais downloads antes de renderizar. Seu navegador precisará baixar imagens que o usuário ainda não pode sequer ver.
• Recursos críticos são despriorizados. As imagens competem por largura de banda com recursos que são realmente necessários para a renderização, como seu CSS e sua imagem LCP.
• Maior uso de memória. Decodificar imagens para as quais o usuário ainda não rolou desperdiça memória, especialmente em dispositivos móveis de baixo desempenho.

De acordo com o capítulo Peso da Página do Web Almanac 2025, a página móvel mediana carrega 15 imagens. No 90º percentil, esse número salta para 52. Em páginas pesadas em imagens, fazer o lazy loading das que estão fora da tela pode fazer uma diferença real. Nos sites monitorados pelo CoreDash, 76% das páginas que fazem o lazy loading adequadamente de imagens fora da tela passam no LCP, em comparação com 59% das páginas que não o fazem.

Como corrigir 'adiar imagens fora da tela'

Para corrigir imagens fora da tela com carregamento eager, adicione loading="lazy" a cada imagem que estiver abaixo da dobra. O lazy loading nativo é agora suportado por 95% dos navegadores globalmente, incluindo Chrome, Firefox, Safari e Edge. Você não precisa de uma biblioteca para isso.

<img loading="lazy"
     src="image.webp"
     alt="a native lazy loaded image"
     width="300" height="300">

Rastreie as origens de suas imagens com carregamento eager. Verifique quais imagens carregam sem um atributo loading e descubra o que as está colocando na página. Existem 5 suspeitos usuais:

1. Plugins mal codificados no seu CMS.
   Alguns plugins adicionam HTML diretamente à página e não usam os hooks corretos que ativam o lazy loading.
2. Plugins que desativam o lazy loading nativo.
   Alguns plugins desativam o lazy loading nativo por padrão. Verifique as configurações do seu plugin.
3. Page builders que geram HTML ruim.
   Page builders como Elementor ou WP Bakery frequentemente criam código inchado que está longe de ser perfeito. Não há solução fácil para isso. A solução inclui limpar seu código e mudar seu fluxo de trabalho.
4. Texto copiado e colado em um editor WYSIWYG.
   A maioria dos editores WYSIWYG como o TinyMCE faz um trabalho ruim ao limpar o código colado, especialmente quando colado de outra fonte de rich text como o Microsoft Word. Esses editores podem não adicionar lazy loading às suas imagens.
5. Codificação ruim do template.
   Mesmo quando o lazy loading está ativado, imagens codificadas manualmente em seus templates ainda podem não usar o lazy loading. Verifique seus templates para imagens fora da tela e aplique o lazy loading a elas.

Não use lazy loading na sua imagem LCP

Esta é a regra mais importante do lazy loading: nunca aplique loading="lazy" à sua imagem Largest Contentful Paint. A imagem LCP é quase sempre a hero image ou o maior elemento visível na viewport. De acordo com o Web Almanac 2025, 16% das páginas móveis ainda aplicam lazy loading à sua imagem LCP. Esse único atributo pode adicionar de 200 a 500 milissegundos ao seu LCP.

Em vez disso, faça o oposto para sua imagem LCP. Certifique-se de que ela carregue o mais rápido possível com fetchpriority="high":

<img fetchpriority="high"
     loading="eager"
     src="hero.webp"
     alt="Hero image"
     width="1200" height="600">

Se você acidentalmente aplicou lazy loading à sua imagem LCP, leia como corrigir uma imagem LCP carregada com lazy loading. Para um guia completo sobre otimização de imagens, veja otimizar imagens para Core Web Vitals.

Guia rápido de carregamento de imagens

Nem toda imagem deve ser tratada da mesma forma. Veja como lidar com os 4 cenários mais comuns:

Lazy loading nativo vs scripts de lazy loading

Use o loading="lazy" nativo. Em 2026, não há razão para adicionar uma biblioteca JavaScript de lazy loading para elementos <img> padrão. O lazy loading nativo é suportado por todos os principais navegadores, incluindo o Safari (desde a versão 15.4), cobrindo 95% dos usuários globalmente. Requer zero JavaScript, adiciona zero overhead e funciona perfeitamente.

Bibliotecas como o lazysizes eram essenciais antes de os navegadores suportarem lazy loading nativo. Elas não são mais mantidas e não são mais necessárias para a maioria dos sites. Os únicos cenários em que você ainda pode precisar de uma solução JavaScript:

• Imagens de fundo CSS. O lazy loading nativo só funciona em elementos <img> e <iframe>. Para imagens de fundo você precisa do IntersectionObserver ou content-visibility: auto.
• Limites de carregamento personalizados. O Chrome começa a carregar imagens "lazy" cerca de 1250px abaixo da viewport em conexões rápidas e 2500px em conexões lentas. Você não pode personalizar essa distância. Se precisar de um controle mais rigoroso, um IntersectionObserver com um rootMargin personalizado oferece isso.

Se você realmente precisar de uma biblioteca, use vanilla-lazyload em vez do lazysizes. Ela é mantida ativamente, usa IntersectionObserver e suporta imagens de fundo.

Previna layout shift em imagens com lazy loading

Sempre inclua atributos width e height em imagens com lazy loading. Sem dimensões explícitas, o navegador não sabe quanto espaço reservar. Quando a imagem finalmente carrega, ela empurra o conteúdo ao redor para baixo, causando Cumulative Layout Shift (CLS). De acordo com o Web Almanac 2025, 62% das páginas móveis ainda têm pelo menos uma imagem sem dimensões.

<!-- Ruim: causa layout shift -->
<img loading="lazy" src="photo.webp" alt="Photo">

<!-- Bom: dimensões reservam espaço -->
<img loading="lazy" src="photo.webp" alt="Photo" width="800" height="600">

Alternativas quando você não pode usar lazy loading

Às vezes não é possível adiar imagens fora da tela. Você pode não ter acesso ao template ou seu CMS pode não suportar lazy loading. Existem algumas alternativas para diminuir o impacto. Estas estão longe de ser perfeitas e podem introduzir novos desafios.

• Comprima suas imagens. Imagens menores têm menos impacto no desempenho de carregamento do que imagens grandes. Use técnicas modernas de compressão para reduzir o tamanho do arquivo.
• Use formatos de imagem mais rápidos. Mude de PNG e JPEG para WebP ou AVIF. O WebP comprime para aproximadamente 1.3 bits por pixel em comparação com 2.0 para JPEG, de acordo com o capítulo Mídia do Web Almanac 2024.
• Divida páginas grandes em várias páginas. Dividir páginas grandes reduz o número de imagens que precisam carregar de uma vez.
• Implemente o scroll infinito. O scroll infinito é basicamente lazy loading, apenas não para imagens, mas para partes inteiras da página web. Para páginas com muitos elementos repetidos (pense no Pinterest), o scroll infinito pode acelerar consideravelmente o carregamento inicial.

Para considerações específicas para dispositivos móveis, imagens fora da tela são um problema ainda maior porque as conexões móveis são mais lentas e as viewports móveis são menores, o que significa que mais imagens acabam fora da tela.

Seja qual for a abordagem que você escolher, verifique se ela funciona com usuários reais. Configure um Real User Monitoring para acompanhar se suas alterações realmente melhoram o LCP e os Core Web Vitals em campo.