LCP (Largest Contentful Paint) é o tempo até o maior elemento visível da página ser renderizado. Meta: abaixo de 2,5 segundos no mobile. É a métrica de Core Web Vitals mais correlacionada com a percepção de velocidade pelo usuário.

Identifique qual é o elemento LCP

Antes de otimizar, saiba o que o Google está medindo. No Chrome DevTools:

  1. Abra F12 > Lighthouse > rodar auditoria de Performance
  2. Na seção “Diagnostics”, veja “LCP Element”

Ou no PageSpeed Insights, role até “Diagnostics” > “Largest Contentful Paint element”.

O elemento LCP costuma ser a imagem hero, o logo principal, ou um bloco de texto grande.

Causas mais comuns de LCP ruim

1. Imagem hero pesada e não otimizada

É a causa mais frequente. Uma imagem hero de 2-4MB sem compressão pode sozinha causar LCP de 6-8 segundos.

Solução:

  • Comprima a imagem: use Squoosh (squoosh.app) ou ShortPixel
  • Converta para WebP: 30-50% menor que JPEG sem perda visível
  • Defina tamanho explícito na tag img
  • Use srcset para servir tamanhos diferentes por breakpoint
<img 
  src="hero.webp" 
  srcset="hero-mobile.webp 640w, hero-tablet.webp 1024w, hero.webp 1920w"
  sizes="100vw"
  width="1920" 
  height="800"
  alt="Descrição da imagem"
  fetchpriority="high"
>

2. Imagem LCP não precarregada

O navegador descobre a imagem LCP tarde porque ela está em CSS (background-image) ou em um carousel JavaScript. Isso atrasa o LCP.

Solução: precarregue a imagem LCP no <head>:

<link 
  rel="preload" 
  as="image" 
  href="hero.webp" 
  imagesrcset="hero-mobile.webp 640w, hero.webp 1920w"
  imagesizes="100vw"
>

3. TTFB alto (servidor lento)

Se o servidor demora para responder (TTFB > 800ms), todas as métricas de carregamento ficam comprometidas.

Como verificar: no PageSpeed Insights, veja “Reduce initial server response time”.

Soluções:

  • Use hospedagem de melhor qualidade
  • Implemente cache de servidor (Redis, Varnish)
  • Use CDN para assets estáticos
  • Habilite compressão Brotli/GZIP no servidor

4. CSS ou JavaScript bloqueando renderização

Scripts e estilos que bloqueiam o render atrasam quando o navegador começa a pintar o conteúdo.

Para CSS:

  • Inline o CSS crítico (above-the-fold) no <head>
  • Carregue CSS não crítico de forma assíncrona:
<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">

Para JavaScript:

<!-- Use defer para scripts que não são críticos -->
<script src="non-critical.js" defer></script>

<!-- Use async para scripts independentes -->
<script src="analytics.js" async></script>

5. Fontes web bloqueando texto

Fontes carregadas externamente podem atrasar a exibição do texto se for o elemento LCP.

Solução:

@font-face {
  font-display: optional; /* carrega apenas se já estiver em cache */
}

Ou para fontes do Google Fonts, adicione display=swap na URL:

<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">

Verificação e monitoramento

Após cada mudança:

  1. Meça o LCP antes (antes da mudança)
  2. Implemente a mudança
  3. Meça novamente com PageSpeed Insights
  4. Compare os resultados

LCP é afetado por muitas variáveis - conexão de rede, dispositivo, cache. Teste múltiplas vezes para ter resultado consistente.

Performance Web

Precisa de ajuda para melhorar o LCP do seu site?

Identificamos a causa do LCP ruim e implementamos as otimizações técnicas com maior impacto no seu site.

Otimizar performance do meu site

FAQ

Qual é o maior impacto no LCP em uma única mudança?

Para a maioria dos sites, otimizar a imagem hero (compressão + WebP + preload) tem o maior impacto. Pode melhorar o LCP de 5-6s para 1,5-2s em um único ajuste.

LCP pode ser um texto?

Sim. Se um bloco de texto grande é o maior elemento visível (especialmente em landing pages com texto hero), ele é o elemento LCP. Nesse caso, as otimizações são diferentes: foco em eliminar CSS e JS bloqueante e reduzir TTFB.

Na maioria dos casos, sim. Carousels carregam via JavaScript, o que atrasa a descoberta da imagem principal pelo navegador. Se o carousel está above-the-fold, considere usar uma imagem estática como primeiro frame e carregar o carousel depois.

Meu site usa CMS (WordPress, etc.). Como otimizo o LCP sem programar?

No WordPress: instale ShortPixel ou Imagify para otimizar imagens automaticamente, WP Rocket ou LiteSpeed Cache para preload e lazy load, e use um CDN (Cloudflare gratuito funciona bem). Essas três mudanças resolvem a maioria dos problemas de LCP sem código customizado.