Corrigir a imagem Largest Contentful Paint carregada com lazy loading no Lighthouse

Largest Contentful Paint image was lazily loaded: em resumo

"Fazer lazy loading da imagem de Largest Contentful Paint irá disparar um aviso do Lighthouse." Imagens com lazy loading entram na fila para download muito mais tarde do que imagens eager, atrasando a métrica de LCP. 

Última revisão por Arjen Karel em fevereiro de 2026

"Os navegadores são espertos o suficiente para descobrir isso, certo? Sim, navegadores são bem espertos, mas não neste caso!"

"Quando você aplica lazy loading em um elemento de imagem, você diz explicitamente ao navegador para despriorizar esta imagem."

Isso significa que imagens não-lazy são agendadas mais cedo. Quando a imagem lazy é o seu elemento LCP, você provavelmente irá atrasar o seu LCP, potencialmente por uma quantidade significativa! Bibliotecas de lazy loading baseadas em JavaScript, como lazysizes.js, agravam isso exigindo o download e a execução do JS antes do início do lazy loading.

De acordo com o Web Almanac 2025, 10,4% das páginas móveis ainda aplicam lazy loading nativo na sua imagem de LCP e outros 5,9% usam lazy loading baseado em JavaScript. Isso é cerca de 1 em 6 páginas atrasando ativamente o seu conteúdo mais importante.

Corrija o aviso do Lighthouse removendo o atributo loading="lazy" da sua imagem de LCP ou atualizando filtros de plugins para contornar o lazy loading da imagem de LCP.

O que é o aviso 'Largest Contentful Paint image was lazily loaded'?

Este aviso aparece quando a imagem de Largest Contentful Paint recebe lazy loading. Para propósitos de velocidade de página, "você deve carregar este elemento o mais cedo possível. Fazer lazy loading deste elemento pode atrasar o Largest Contentful Paint."

Um lembrete rápido: lazy loading

"Lazy loading é quando um elemento, frequentemente uma imagem, não é agendado para download pelo navegador imediatamente durante o carregamento da página, mas sim quando o elemento está perto da parte visível da tela." Existem dois métodos.

Lazy loading nativo

"Lazy loading nativo usa a API de lazy loading nativa do navegador. Para imagens, é tão simples quanto adicionar loading="lazy" à tag da imagem." Isso é suportado por todos os navegadores modernos.

<img loading="lazy"
     src="image.png"
     width="123"
     height="123"
     alt="uma imagem com lazy loading"
>

Lazy loading baseado em JavaScript

"Lazy loading baseado em JavaScript usa uma API JavaScript chamada Intersection Observer para determinar quando uma imagem está na ou próxima da viewport visível." Quando detectada, o src é trocado. Reconheça-o pelo atributo data-src. Embora amplamente suportado, "ele usa JavaScript", exigindo o download antes do início do lazy loading, tornando-o mais lento do que as abordagens nativas.

<img data-src="image.png"
     src="small-placeholder.png"
     width="123"
     height="123"
     alt="uma imagem com lazy loading"
>

Como um 'lazy loading Largest Contentful Paint image' afeta a velocidade da página?

"O elemento de Largest Contentful Paint é o maior elemento que foi pintado na tela, na viewport visível, durante o carregamento da página." Ele marca quando a página parece visualmente pronta. Fazer lazy loading deste elemento atrasa essa percepção, fazendo os visitantes perceberem um carregamento mais lento.

A imagem mais importante deve carregar imediatamente para a pintura mais rápida. No entanto, o lazy loading explícito a desprioriza, enfileirando outros recursos mais cedo. Com o lazy loading do JavaScript, você adiciona atrasos adicionais aguardando a execução do script.

Quando você adiciona loading="lazy" a uma imagem, o scanner de preload do navegador a ignora completamente. Normalmente o scanner de preload descobre imagens enquanto ainda está analisando (parsing) o HTML e começa a buscá-las cedo. O lazy loading desativa essa descoberta antecipada, que é exatamente por isso que ele aumenta o LCP resource load delay.

Em um exemplo da aba de network do Chrome com uma imagem de LCP lazy e seis imagens eager, a imagem lazy começa e termina de fazer download por último, demonstrando o impacto no mundo real.

Um pouco mais de detalhe

Os navegadores não podem substituir automaticamente as diretivas de lazy-loading. Os motivos técnicos para os atrasos de LCP incluem:

• "Imagens lazy entrarão na fila para download em um momento muito mais tarde do que imagens não-lazy (eager)."
• Imagens lazy tipicamente fazem download com prioridade baixa.
• "Outros elementos como imagens normais, scripts deferred, fontes etc. podem ser agendados para download mais cedo do que imagens lazy."
• O lazy loading de JavaScript depende do overhead de download e execução de scripts.

Como corrigir 'Largest Contentful Paint image was lazily loaded'

"Corrigir o aviso é simples: não aplique lazy loading nesta imagem."

Na teoria

• Para lazy loading nativo, remova o loading="lazy" ou altere para loading="eager"
• Para lazy loading do JavaScript, mude para abordagens nativas ou exclua a imagem de LCP.
• Para next/image do Next.js, defina priority para carregar a imagem de forma eager com um hint de preload.

Se o seu elemento LCP for uma hero image, veja o guia completo sobre como corrigir hero images lentas para técnicas de otimização adicionais incluindo preloading, fetchpriority e imagens responsivas.

Na vida real

Plugins de otimização frequentemente aplicam lazy loading a todas as imagens automaticamente sem distinguir a importância. A maioria permite contornar o lazy loading através de nome de arquivo, classe ou atributos. Verifique a documentação do seu plugin e atualize os seus templates de acordo.

O WordPress 6.3 e posteriores não aplicam mais lazy loading nas primeiras imagens e adicionam automaticamente fetchpriority="high" na provável imagem de LCP. Se você ainda está vendo este aviso em um site WordPress, um plugin de otimização de terceiros provavelmente está substituindo este comportamento. De acordo com o capítulo Performance do Web Almanac 2022, 72% das páginas com uma imagem de LCP com lazy loading são sites WordPress.

Solução alternativa para 'Largest Contentful Paint image was lazily loaded'

Quando as restrições do CMS impedem a alteração das configurações de lazy loading, soluções alternativas (workarounds) minimizam o impacto:

• Aplique lazy loading em todas as imagens para que imagens eager abaixo da dobra não façam download primeiro
• Evite imagens de fundo (background images) para evitar downloads concorrentes
• Faça o preload do elemento LCP para agendar o download antecipado
• Desative o lazy loading de JavaScript e use o nativo em vez disso
• Adicione fetchpriority="high" ao elemento LCP para agendamento antecipado. Para detalhes sobre como os navegadores priorizam recursos, veja o guia de priorização de recursos.
• Otimize todas as imagens usando técnicas responsivas e formatos de última geração (next-gen) para reduzir o tempo de download.

Após remover o lazy loading da sua imagem de LCP, verifique a melhoria com Real User Monitoring. O aviso do Lighthouse é baseado em laboratório, mas o Google usa dados de campo (field data) de usuários reais para sinais de ranqueamento. Em sites monitorados pela CoreDash, páginas sem imagens de LCP com lazy loading pontuam 79% de 'bom' (good) no LCP em comparação com 52% para páginas que ainda aplicam lazy loading no seu elemento LCP.