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.
| Sintoma | Investigue |
|---|---|
| Documento demora | TTFB, cache e infraestrutura |
| Recurso começa tarde | HTML, CSS, JavaScript e prioridade |
| Transferência longa | Tamanho e condições de rede |
| Chega cedo, mas pinta tarde | Bloqueios 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.
Serviços de desempenho
Veja o escopo e os próximos passos do serviço relacionado a este tema.
Conteúdo da biblioteca de Diego Henrich. Confira as fontes citadas e valide orientações que dependem da versão de uma plataforma ou serviço.