Largest Contentful Paint (LCP)
Largest Contentful Paint (LCP) é uma métrica de Core Web Vitals que mede o tempo desde o início da navegação até o maior elemento visível na viewport terminar de ser renderizado. É o principal indicador do Google para "quando a página parece carregada para o usuário".
Largest Contentful Paint (LCP) é uma métrica de Core Web Vitals que mede o tempo desde o início da navegação até o maior elemento visível na viewport terminar de ser renderizado. É o principal indicador do Google para "quando a página parece carregada para o usuário".
Por Que Importa
O LCP é um dos três Core Web Vitals e um sinal de ranking confirmado do Google. Os limites do Google: bom ≤ 2,5s, precisa de melhoria 2,5-4,0s, ruim > 4,0s. As páginas na faixa "boa" apresentam taxas de rejeição mensuravelmente mais baixas e maior conversão, e falhar no LCP no percentil 75 pode suprimir rankings em consultas competitivas.
O Que Conta como o "Maior Elemento"
O LCP rastreia o maior elemento pintado na viewport visível. Os candidatos elegíveis incluem <img>, frames de pôster de <video>, imagens de fundo carregadas via url() do CSS e nós de texto de nível de bloco. O "maior" elemento pode mudar durante o carregamento - o LCP usa o que acabar sendo o maior elemento final.
Causas Comuns de LCP Lento
Resposta lenta do servidor (TTFB): se o HTML levar 1,5s para chegar, o LCP não pode ficar abaixo de 2,5s.
Recursos que bloqueiam a renderização: CSS e JS síncronos no head atrasam a primeira pintura.
Imagens não otimizadas: a imagem principal costuma ser o elemento de LCP. Imagens superdimensionadas, não comprimidas ou carregadas tardiamente dominam a maioria das falhas de LCP.
Renderização no lado do cliente: frameworks de SPA que renderizam em JS após a hidratação empurram o LCP muito além do limite "bom".
Lazy-loading no elemento de LCP: adicionar loading="lazy" à imagem principal é um erro comum - isso atrasa justamente o elemento que o LCP mede.
Como Melhorar o LCP
Faça preload da imagem principal: <link rel="preload" as="image" href="..."> dá ao navegador uma vantagem inicial.
Use formatos de imagem modernos: WebP e AVIF reduzem o payload em 30-50% em relação ao JPEG.
Adicione fetchpriority="high" à imagem principal para que ela passe à frente de outros recursos.
Sirva a partir de uma CDN para reduzir o TTFB de usuários distantes.
Faça inline do CSS crítico e adie o restante.
Use SSR ou geração estática em vez de renderização no lado do cliente para páginas com muito conteúdo.
Faça cache de forma agressiva na edge para visitantes recorrentes.
Medindo o LCP
Dados de campo: Chrome UX Report (CrUX), relatório de Core Web Vitals do Google Search Console, PageSpeed Insights - eles refletem usuários reais.
Dados de laboratório: Lighthouse, WebPageTest, painel Performance do Chrome DevTools - reproduzíveis, mas sintéticos.
O Google avalia o ranking pelo percentil 75 dos dados de campo, então testes sintéticos isolados não bastam.
Fontes: