LCP explicado: o que é e como melhorar essa métrica

LCP, ou Largest Contentful Paint, mede quanto tempo leva até o maior elemento visível na área de tela inicial (o "above the fold") terminar de ser renderizado. Na prática, costuma ser uma imagem de destaque, um banner, um vídeo com thumbnail ou um bloco grande de texto. O Google considera um LCP bom quando ocorre em até 2,5 segundos; entre 2,5 e 4 segundos é "precisa melhorar"; acima de 4 segundos é considerado ruim.

Essa métrica importa porque é a aproximação mais próxima que existe de "quando o visitante sente que a página carregou". Um site pode disparar vários eventos técnicos de carregamento antes disso, mas, para quem está esperando na tela, o que conta é o momento em que o conteúdo principal aparece.

O que costuma atrasar o LCP

Na maioria dos sites, o elemento de LCP é uma imagem, e os atrasos mais comuns são: arquivos de imagem grandes demais para o tamanho exibido, formatos antigos (JPEG ou PNG sem compressão moderna), ausência de fetchpriority="high" na imagem principal, e servidor demorando para responder à primeira requisição (o chamado TTFB, time to first byte). Também é comum o elemento de LCP ficar "escondido" atrás de uma cadeia de carregamento: a página carrega um CSS, que carrega uma fonte, que só depois libera o carregamento da imagem — cada etapa adiciona tempo em série.

Outro vilão frequente é JavaScript bloqueando a renderização: se o navegador precisa baixar e executar um script grande antes de poder desenhar o conteúdo, o LCP sofe mesmo que a imagem em si seja leve.

Como melhorar o LCP na prática

• Comprimir e redimensionar imagens para o tamanho real de exibição, usando formatos modernos como WebP ou AVIF.
• Pré-carregar o elemento principal com <link rel="preload"> quando ele depende de CSS de fundo, e usar fetchpriority="high" na tag de imagem.
• Reduzir o tempo de resposta do servidor (TTFB), seja com cache de página, um servidor mais próximo do público ou hospedagem com melhor capacidade.
• Eliminar recursos que bloqueiam a renderização, adiando scripts não essenciais com defer ou async.
• Usar CDN para servir imagens e arquivos estáticos a partir de um ponto geograficamente mais próximo do visitante.

Como identificar qual elemento está causando o problema

O próprio relatório do Lighthouse aponta explicitamente qual elemento da página foi identificado como o LCP e quanto tempo cada fase do carregamento consumiu: atraso para começar a carregar, tempo de download do recurso e atraso para renderizar depois de baixado. Essa quebra em fases é o que permite agir com precisão — se o problema está no atraso de início, o foco é preload e priorização; se está no tempo de download, o foco é compressão e CDN; se está no atraso de renderização, geralmente há JavaScript competindo pela mesma linha de execução do navegador.

Vale lembrar que o LCP pode variar entre o teste de laboratório do Lighthouse e o que acontece de fato com os visitantes reais, especialmente em conexões móveis mais lentas — por isso acompanhar a métrica ao longo do tempo, com dados de uso real, complementa bem o diagnóstico inicial de uma auditoria pontual.

Este conteúdo tem caráter informativo e não substitui uma análise técnica personalizada do seu site.