Corrija Largest Contentful Paint image was lazily loaded no Lighthouse

Largest Contentful Paint image was lazily loaded: em resumo

"Fazer o lazy-loading da imagem do Largest Contentful Paint acionará um aviso no Lighthouse." Imagens com lazy loading são enfileiradas para download muito depois das imagens eager, atrasando a métrica LCP. 

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

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

"Quando você faz o lazy load de um elemento de imagem, você diz explicitamente ao navegador para despriorizar essa imagem."

Isso significa que as imagens sem lazy loading são agendadas mais cedo. Quando a imagem com lazy loading é o seu elemento LCP, você provavelmente atrasará o seu LCP, potencialmente de forma 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 de 2025, 10,4% das páginas mobile ainda fazem native-lazy-load da sua imagem LCP e outros 5,9% usam lazy loading baseado em JavaScript. Isso é cerca de 1 em cada 6 páginas atrasando ativamente seu conteúdo mais importante.

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

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

Este aviso aparece quando a imagem do Largest Contentful Paint é carregada com lazy-loading. Para fins de page speed, "você deve carregar este elemento o mais cedo possível. Fazer o lazy loading deste elemento pode atrasar o Largest Contentful Paint."

Um rápido lembrete: lazy loading

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

Lazy loading nativo

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

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

Lazy loading baseado em JavaScript

"O lazy loading baseado em JavaScript usa uma API JavaScript chamada Intersection Observer para determinar quando uma imagem está em ou próxima à viewport visível." Quando detectada, o src é trocado. Você pode reconhecê-lo pelo atributo data-src. Embora amplamente suportado, "ele usa JavaScript", exigindo o download antes que o lazy loading comece, o que o torna mais lento do que as abordagens nativas.

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

Como um 'lazy loading Largest Contentful Paint image' afeta o page speed?

"O elemento do 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 o lazy loading desse elemento atrasa essa percepção, fazendo com que os visitantes percebam 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 ainda mais atrasos aguardando a execução do script.

Quando você adiciona loading="lazy" a uma imagem, o preload scanner do navegador a ignora completamente. Normalmente, o preload scanner descobre imagens enquanto ainda analisa o HTML e começa a buscá-las cedo. O lazy loading opta por não participar dessa descoberta inicial, que é exatamente o motivo pelo qual ele aumenta o resource load delay do LCP.

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

Um pouco mais de detalhes

Os navegadores não podem substituir automaticamente as diretivas de lazy-loading. As razões técnicas para os atrasos no LCP incluem:

• "Imagens lazy serão enfileiradas para download muito mais tarde do que imagens não-lazy (eager)."
• Imagens lazy geralmente baixam com baixa prioridade.
• "Outros elementos como imagens normais, scripts deferidos, fontes, etc., podem ser agendados para download antes das imagens lazy."
• O lazy loading do JavaScript depende do overhead de download e execução do script.

Como corrigir 'Largest Contentful Paint image was lazily loaded'

"Corrigir o aviso é simples: não faça o lazy load desta imagem."

Na teoria

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

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

Na vida real

Plugins de otimização costumam fazer o lazy-load de todas as imagens automaticamente, sem distinguir a importância. A maioria permite contornar o lazy loading por meio do nome do arquivo, classe ou atributos. Verifique a documentação do seu plugin e atualize seus templates de acordo.

O WordPress 6.3 e versões posteriores não fazem mais o lazy-load das primeiras imagens e adicionam automaticamente fetchpriority="high" à provável imagem LCP. Se você ainda estiver vendo este aviso em um site WordPress, é provável que um plugin de otimização de terceiros esteja substituindo esse comportamento. De acordo com o capítulo de Performance do Web Almanac de 2022, 72% das páginas com uma imagem LCP lazily loaded 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, as soluções alternativas minimizam o impacto:

• Faça o lazy load de todas as imagens para que as imagens eager abaixo da dobra (below-the-fold) não sejam baixadas primeiro
• Evite imagens de fundo para evitar downloads concorrentes
• Faça o preload do elemento LCP para agendar o download com antecedência
• Desative o lazy loading do JavaScript e use o nativo em vez disso
• Adicione fetchpriority="high" ao elemento LCP para agendamento antecipado. Para obter detalhes sobre como os navegadores priorizam os recursos, consulte o guia de priorização de recursos.
• Otimize todas as imagens usando técnicas responsivas e formatos de próxima geração para reduzir o tempo de download.

Após remover o lazy loading da sua imagem LCP, verifique a melhoria com Real User Monitoring. O aviso do Lighthouse é baseado em laboratório (lab), mas o Google usa dados reais de campo do usuário para sinais de ranqueamento. Em todos os sites rastreados pelo CoreDash, as páginas sem imagens LCP lazy-loaded pontuam 79% como 'bom' no LCP em comparação com 52% para páginas que ainda fazem o lazy-load do seu elemento LCP.