Maior Contentful Paint (LCP): Guia Técnico Completo e Padrão de Otimização

Largest Contentful Paint (LCP) é uma das três métricas Core Web Vitals do Google, estabelecida para medir a velocidade percebida de carregamento da página.O LCP rastreia o tempo decorrido desde o momento em que um usuário inicia o carregamento de uma página da Web até que a maior imagem, quadro de pôster de vídeo ou bloco de texto na janela de visualização visível inicial seja totalmente pintado na tela.

Como os usuários julgam a velocidade da página da web com base na rapidez com que o conteúdo principal se torna visível e legível, o LCP é amplamente considerado a métrica de desempenho de carregamento mais importante.Conseqüentemente, o Google incorpora o LCP em seus sinais de classificação de experiência de página oficial para pesquisa orgânica.

Resumo da resposta primeiro

Largest Contentful Paint (LCP) é uma métrica Core Web Vital que mede a velocidade percebida de carregamento da página cronometrando quando o maior bloco de texto visível ou elemento de imagem na janela de visualização termina a renderização.Uma pontuação LCP para aprovação é de 2,5 segundos ou menos para pelo menos 75% das visitas à página em dados de campo de usuário real (CrUX).A latência do LCP é composta por quatro subpartes distintas: Tempo até o primeiro byte (TTFB), Atraso no carregamento do recurso, Duração do carregamento do recurso e Atraso na renderização do elemento.A otimização do LCP requer o pré-carregamento de ativos principais, a implantação de cache de borda, a compactação de imagens em formatos WebP/AVIF e a eliminação de CSS e JavaScript que bloqueiam a renderização.

Escala de classificação de pontuação LCP e limites principais do Web Vitals

Para fornecer uma experiência rápida e envolvente aos usuários, as páginas da web devem atender aos limites do Core Web Vitals estabelecidos pelo Google para Largest Contentful Paint:

Tempo de renderização LCP	Classificação de Desempenho	Impacto do usuário e sinal de classificação de pesquisa do Google
$\le 2.5\text{ segundos}$	Bom (Verde)	Carregamento percebido rápido;satisfaz totalmente a avaliação Core Web Vitals do Google.
$> 2.5\text {s} $ e $\le 4.0\text {s} $	Precisa de melhorias (Âmbar)	Atraso de carregamento perceptível;queda potencial nas taxas de conversão em dispositivos móveis e na classificação de pesquisa.
$> 4,0\text{ segundos}$	Ruim (Vermelho)	Grave atraso no carregamento visual;altas taxas de rejeição do usuário e penalidade na classificação de pesquisa.

Para obter uma nota de aprovação na avaliação Core Web Vitals, um site deve obter uma pontuação LCP na categoria Bom ($\le 2,5\text{ segundos}$) para pelo menos 75% das visitas à página, avaliadas em coortes de desktops e dispositivos móveis em dados de campo do mundo real.

Quais elementos DOM são elegíveis para avaliação LCP?

De acordo com a especificação oficial do W3C Largest Contentful Paint, o navegador monitora elementos DOM visíveis específicos localizados na janela de visualização inicial:

Elementos <img> padrão (incluindo imagens renderizadas dentro de tags <picture> responsivas).
Elementos <image> incorporados dentro de um contêiner de vetor <svg>.
Imagens de pôster de vídeo (o atributo poster em um elemento <video>).
Elementos com imagem de fundo CSS carregados por meio da função url().
Contêineres HTML em nível de bloco contendo nós de texto ou filhos de elementos de texto embutidos (como <h1> a títulos <h6>, parágrafos <p> ou blocos <div>).

Desconstruindo LCP: As Quatro Subpartes

Para diagnosticar e otimizar com eficácia as pontuações lentas do Largest Contentful Paint, os engenheiros de desempenho dividem a latência do LCP em quatro subpartes distintas:

Tempo até o primeiro byte (TTFB): o tempo decorrido desde o momento em que o usuário solicita a página até o navegador receber o primeiro byte da resposta do documento HTML do servidor.Meta: $< 800\text {ms} $ ($40%$ do orçamento do LCP).
Atraso no carregamento do recurso: o atraso entre o momento em que o documento HTML termina de receber os bytes de resposta e o momento em que o navegador descobre e começa a buscar o recurso LCP (como uma imagem principal).Meta: $< 200\text {ms} $ ($10%$ do orçamento do LCP).
Duração do carregamento de recursos: a duração necessária para o navegador fazer download da imagem LCP ou do recurso de fonte na rede.Meta: $< 800\text {ms} $ ($40%$ do orçamento do LCP).
Atraso na renderização do elemento: o tempo entre o término do download do recurso LCP e o momento em que o navegador conclui os cálculos de layout e pinta o elemento na tela.Meta: $< 200\text {ms} $ ($10%$ do orçamento do LCP).

Matematicamente, a latência total do LCP é a soma destas quatro subpartes:

$$\text {LCP} = \text {TTFB} + \text{Atraso no carregamento do recurso} + \text{Duração do carregamento do recurso} + \text{Atraso na renderização do elemento}$$

Técnicas comprovadas para otimizar o LCP

Elimine o atraso no carregamento de recursos: adicione <link rel="preload" as="image" href="..."> ou fetchpriority="high" à sua tag de imagem principal para que o navegador inicie o download da imagem imediatamente durante a análise de HTML.
Otimize a resposta do servidor (TTFB): implante o cache de borda via CDN, otimize o desempenho de consulta de banco de dados e utilize multiplexação push de servidor HTTP/2 ou HTTP/3.
Compactar e modernizar imagens: forneça imagens principais usando formatos WebP ou AVIF modernos com tamanhos srcset responsivos adaptados às dimensões da tela de dispositivos móveis e computadores.
Reduza os recursos de bloqueio de renderização: incorpore CSS crítico na tag <head> e adie JavaScript não crítico usando atributos de script defer ou async.
Otimize o carregamento de fontes da Web: use font-display: swap ou font-display: optional nas regras CSS @font-face para garantir que os blocos de texto permaneçam visíveis imediatamente enquanto as fontes da Web terminam o download pela rede.

LCP vs First Contentful Paint (FCP) vs Índice de Velocidade

Embora LCP, FCP e Índice de velocidade meçam o desempenho do carregamento, eles capturam diferentes aspectos da progressão do carregamento da página:

Primeira pintura com conteúdo (FCP): mede quando o primeiro elemento DOM (como uma cor de fundo, um controle giratório ou um texto de cabeçalho) termina a renderização na tela.
Maior Contentful Paint (LCP): Mede quando o elemento de conteúdo visual principal (banner principal ou bloco de parágrafo principal) conclui a renderização.
Índice de velocidade: mede a rapidez com que o conteúdo visual preenche a janela de visualização ao longo do tempo durante a gravação do progresso visual.

O LCP recebe o maior peso entre as métricas de carregamento no algoritmo de pontuação Lighthouse do Google (atualmente 25% da pontuação total de desempenho) porque se alinha mais estreitamente com a percepção do usuário real sobre a conclusão do carregamento da página.

Monitoramento contínuo de LCP com SimpleOps

SimpleOps automatiza o rastreamento do Largest Contentful Paint capturando auditorias sintéticas do laboratório Lighthouse e métricas de conjunto de dados de campo do Chrome UX Report (CrUX) em um único painel de monitoramento unificado.SimpleOps envia alertas proativos instantâneos sempre que o LCP do percentil 75 do seu site viola seu orçamento de desempenho de 2,5 segundos, capacitando sua equipe a proteger conversões e classificações de pesquisa.