Como Melhorar LCP: Técnicas para Acelerar o Carregamento Principal

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.

Como medir LCP com dados reais

O Lighthouse mostra o LCP de laboratório, em uma simulação. Ele ajuda a diagnosticar, mas não representa o que seus visitantes vivem. Para ver o desempenho real, use dados de campo:

• PageSpeed Insights: mostra o LCP de usuários reais do domínio quando há dados suficientes no CrUX.
• Search Console: em Core Web Vitals, agrupa URLs por status (bom, precisa melhorar, ruim).
• CrUX Dashboard ou BigQuery: para acompanhar tendência ao longo de semanas.

Dados de campo variam com conexão, aparelho e localização. Um LCP de 2,6 s no relatório de campo pode conviver com 1,8 s no laboratório. A meta de 2,5 s vale para o percentil 75 dos usuários, não para uma medição isolada.

Checklist por tipo de elemento LCP

Dois erros pioram o LCP depois da otimização: aplicar loading="lazy" na imagem hero, que atrasa o download, e remover o preload ao trocar o tema. Confira também se o CDN entrega a versão comprimida, não o arquivo original. Veja o ajuste em CDN e cache.

Para se aprofundar

• Otimização de imagens para web
• Como melhorar o INP
• Guia completo de performance e Core Web Vitals
• Core Web Vitals e SEO

Fontes e referências

• web.dev: Largest Contentful Paint: definição, causas e técnicas de otimização.
• web.dev: Core Web Vitals: métricas, metas e medição.

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.

Carousel de imagens sempre prejudica o LCP?

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.