A "Maior exibição de conteúdo" (LCP, na sigla em inglês) é uma das métricas rastreadas na seção Desempenho do relatório do Lighthouse. Cada métrica captura algum aspecto da velocidade de carregamento da página.
O Lighthouse exibe a LCP em segundos:
![Captura de tela da auditoria de Maior exibição de conteúdo do Lighthouse](https://developer.chrome.com/static/docs/lighthouse/performance/lighthouse-largest-contentful-paint/image/a-screenshot-the-lightho-d3c8bf09dcb23.png?authuser=7&hl=pt-br)
O que a LCP mede
A LCP mede quando o maior elemento de conteúdo na janela de visualização é renderizado na tela. Isso é aproximado quando o conteúdo principal da página está visível para os usuários. Consulte Maior exibição de conteúdo definida para mais detalhes sobre como a LCP é determinada.
Como o Lighthouse determina sua pontuação de LCP
O Lighthouse extrai dados de LCP da ferramenta de rastreamento do Chrome.
A tabela abaixo mostra como interpretar sua pontuação de LCP:
Tempo de LCP (em segundos) |
Codificação por cores |
---|---|
0-2.5 | Verde (rápido) |
2.5-4 | Laranja (moderado) |
Mais de 4 | Vermelho (lento) |
Como melhorar sua pontuação de LCP
Se a LCP for uma imagem, o tempo pode ser dividido em quatro fases. Saber quais fases são mais demoradas pode ajudar você a otimizar a LCP. O Lighthouse exibirá o elemento da LCP junto com o detalhamento da fase no diagnóstico "Maior elemento de exibição de conteúdo".
Fase de LCP | Descrição |
---|---|
Tempo para o primeiro byte (TTFB) | O tempo entre o início do carregamento da página pelo usuário e o momento em que o navegador recebe o primeiro byte da resposta do documento HTML. Saiba mais sobre o TTFB. |
Atraso no carregamento | O delta entre o TTFB e quando o navegador começa a carregar o recurso LCP. |
Tempo para carregar | O tempo necessário para carregar o próprio recurso LCP. |
Atraso na renderização | O delta entre o momento em que o recurso LCP termina de carregar até que o elemento LCP seja totalmente renderizado. |