O LCP pode ser imagem, texto ou outro bloco grande; cada tipo tem dependências diferentes.
Antes de começar
Escolha uma URL representativa, perfil móvel e estado sem cache quando comparar mudanças.
Passo a passo
-
Gere o relatório Lighthouse da URL. Na seção Diagnostics/Diagnósticos, abra Largest Contentful Paint element / Elemento LCP para ver o elemento selecionado e a prévia; em Metrics/Métricas, abra os detalhes de LCP e suas subpartes (TTFB, atraso de descoberta, duração de download e atraso de renderização, quando disponíveis).
-
Abra os detalhes de auditoria/trace ou DevTools Performance para localizar a requisição da imagem ou a fonte/texto e comparar o início do HTML, descoberta do recurso, transferência e pintura. No painel Network, confira prioridade, cache e waterfall. Se o elemento for texto, investigue bloqueio de renderização e fontes; se imagem, confira URL e descoberta no HTML.
Limites e cuidados
Lighthouse local é teste de laboratório e não substitui dados reais de CrUX. A posição do diagnóstico e o nível de detalhes variam entre versões; registre versão e condições de execução. Uma auditoria identifica o candidato daquela execução, não prova que o mesmo elemento será LCP em todos os dispositivos. Consulte otimizar Web Vitals com Lighthouse.
Continue na biblioteca
Fonte oficial: Otimizar Web Vitals com Lighthouse — web.dev.