Largest Contentful Paint (LCP) - Docs do MetricSpot

O que esta verificação faz

Lê o LCP do Google PageSpeed Insights (que corre o Lighthouse contra o teu URL). O valor é o tempo, em segundos, até o maior elemento visível acima da dobra terminar de renderizar — tipicamente uma imagem hero, um poster de vídeo ou um cabeçalho grande.

Valor de LCP	Veredicto
≤ 2,5 s	Bom
2,5–4,0 s	Precisa de melhorar
> 4,0 s	Mau

Porque é importante

O LCP é um dos três Core Web Vitals do Google. Um LCP fraco não empurra apenas o ranking para baixo — cascateia por todos os funis de conversão do teu site. Os próprios dados do Google mostram que páginas com LCP abaixo de 2,5 s têm taxas de ressalto ~25% inferiores às de páginas acima de 4 s.

O LCP é dominado pela rapidez com que o elemento de LCP carrega — não pela rapidez com que o teu JavaScript corre. O elemento LCP é quase sempre uma imagem. Por isso 80% das correções de LCP são sobre entrega de imagens.

Como corrigir

Por ordem aproximada de impacto:

1. Pré-carrega a imagem de LCP. No teu <head>:

<link rel="preload" as="image" href="/hero.webp" fetchpriority="high" />

Começa o download da imagem antes de o browser terminar de analisar o resto do HTML.

2. Serve formatos modernos. AVIF ou WebP, com fallback JPEG para browsers mais antigos:

<picture>
  <source srcset="/hero.avif" type="image/avif" />
  <source srcset="/hero.webp" type="image/webp" />
  <img src="/hero.jpg" alt="..." width="1200" height="600" fetchpriority="high" />
</picture>

3. Define dimensões explícitas no <img> (atributos width + height). O browser reserva espaço sem esperar pelo carregamento da imagem.

4. Redimensiona para a viewport. Não sirvas uma imagem hero de 4000×3000 a uma viewport mobile. Usa srcset com várias resoluções.

5. Aloja fontes localmente ou usa font-display: swap. Uma webfont que bloqueia a renderização atrasa o elemento “cabeçalho-como-LCP”.

6. Tira a imagem de LCP do lazy-loading. Se a tua biblioteca de imagens faz lazy-loading em tudo, a imagem hero tem de explicitamente sair (loading="eager", fetchpriority="high").

Perguntas frequentes

O meu elemento de LCP é texto, não uma imagem. E agora?

Já estás em boa forma — o texto renderiza depressa. A correção costuma ser sobre recursos que bloqueiam a renderização: adia JS não crítico, inline o CSS crítico, elimina webfonts que bloqueiam.

Porque é que o meu LCP é diferente no PageSpeed e no meu browser?

O PageSpeed simula uma ligação 4G lenta num dispositivo Android intermédio. A tua máquina de desenvolvimento está em fibra. Confia sempre nos dados de campo (CrUX), não nas tuas DevTools locais.

Uma CDN ajuda no LCP?

Sim — uma CDN reduz o tempo de ida e volta ao teu servidor de origem, o que corta diretamente o tempo até começar o download da imagem. Cloudflare, Bunny e Fastly são escolhas comuns.