Desempenho · GUIA PRÁTICO

Largest Contentful Paint: como medir e investigar o LCP

Identifique o maior conteúdo visível, meça o LCP em campo e laboratório e investigue servidor, descoberta do recurso e renderização. Compare condições equivalentes antes e depois.

Largest Contentful Paint (LCP) registra quando o maior elemento de conteúdo visível na janela inicial aparece. Pode ser texto ou imagem. O valor, sozinho, não identifica a causa.

Identifique elemento e fonte

Use PageSpeed Insights ou ferramentas de desenvolvimento para localizar o elemento considerado LCP. Diferencie laboratório de dados de campo. A avaliação em campo usa o percentil 75 das experiências elegíveis, segmentado por dispositivo; uma execução não representa toda essa distribuição. O guia de LCP do web.dev explica a métrica.

Separe as etapas do atraso

Investigue resposta inicial do servidor, atraso para descobrir o recurso, transferência e processamento/renderização. Para texto, examine CSS e fontes; para imagem, URL, prioridade e momento de descoberta. Não aplique carregamento tardio ao elemento inicial sem medir o efeito.

SintomaInvestigue
Documento demoraTTFB, cache e infraestrutura
Recurso começa tardeHTML, CSS, JavaScript e prioridade
Transferência longaTamanho e condições de rede
Chega cedo, mas pinta tardeBloqueios e trabalho da thread principal

Mude uma causa por vez e confira conteúdo e layout. Observe também INP e CLS para não otimizar uma métrica isoladamente.

Continue por aqui