Core Web Vitals: Como Otimizar o LCP

Largest Contentful Paint (LCP) mede a velocidade de carregamento do seu conteúdo principal—a imagem hero, título ou vídeo que os visitantes veem primeiro. Quando isso leva mais de 2,5 segundos, os usuários percebem seu site como lento, as taxas de rejeição aumentam e suas pontuações de Core Web Vitals sofrem. Este guia detalha exatamente como diagnosticar e corrigir problemas de LCP em todas as quatro fases do processo de carregamento.

O que é Largest Contentful Paint (LCP)?

LCP rastreia o tempo de renderização do maior elemento de conteúdo visível no viewport antes da interação do usuário. Isso pode ser um <img>, <video> ou bloco de texto. Diferente de métricas abstratas, LCP reflete o que os usuários realmente experimentam—quando a página “parece” carregada.

O Google estabelece limites claros:

• Bom: Abaixo de 2,5 segundos
• Precisa Melhorar: 2,5-4,0 segundos
• Ruim: Acima de 4,0 segundos

Para passar nos Core Web Vitals, 75% das suas visitas à página devem atingir pontuações LCP “boas”. Isso impacta diretamente os rankings de SEO, já que o Google usa Core Web Vitals como sinal de classificação.

As Quatro Fases da Otimização LCP

LCP não é uma métrica única—é a soma de quatro fases distintas. Entender essa divisão é crucial para otimização direcionada:

1. Time to First Byte (TTFB): Tempo de resposta do servidor (~40% do LCP total)
2. Atraso de Carregamento de Recursos: Tempo entre TTFB e início do download do recurso LCP (<10%)
3. Duração do Carregamento de Recursos: Tempo real de download (~40%)
4. Atraso de Renderização do Elemento: Tempo da conclusão do download até a renderização visual (<10%)

As fases de “atraso” devem se aproximar de zero. Qualquer tempo gasto esperando é puro desperdício.

Fase 1: Otimizar Tempo de Resposta do Servidor (TTFB)

Um TTFB lento compromete todo o resto. Se seu servidor leva 3 segundos para responder, atingir um LCP de 2,5 segundos torna-se impossível.

Problemas comuns de TTFB:

• Múltiplos redirecionamentos (cada um adiciona 100-500 milissegundos)
• Servidores distantes dos usuários
• Código backend ineficiente
• Gargalos no banco de dados

Soluções:

• Implementar cache server-side
• Usar uma CDN para servir conteúdo de localizações edge
• Minimizar redirecionamentos—use o formato de URL final diretamente
• Otimizar consultas de banco de dados e processamento backend

Dica profissional: CDNs podem mascarar problemas do servidor. Teste com parâmetros de URL (ex: ?test=123) para contornar caches de CDN e revelar a verdadeira performance do servidor.

Fase 2: Eliminar Atrasos de Descoberta de Recursos

O navegador deve encontrar seu recurso LCP imediatamente. Qualquer atraso de descoberta é tempo perdido.

Erro crítico: Aplicar lazy-loading na imagem LCP. Nunca use loading="lazy" em conteúdo above-the-fold—isso intencionalmente atrasa seu elemento mais importante.

Torne recursos descobríveis:

<!-- Bom: Imagem no HTML -->
<img fetchpriority="high" src="/hero.webp" alt="...">

<!-- Ruim: Escondida no CSS -->
.hero { background-image: url('/hero.webp'); }

Para imagens de fundo CSS (evite-as para LCP quando possível), faça preload:

<link rel="preload" fetchpriority="high" as="image" href="/hero.webp" type="image/webp">

O atributo fetchpriority="high" instrui os navegadores a priorizarem este recurso acima de outros. Sem ele, imagens frequentemente fazem download com prioridade “Low” por padrão.

Fase 3: Reduzir Duração do Carregamento de Recursos

Arquivos menores fazem download mais rápido. Esta fase é pura física—reduza bytes, reduza tempo.

Otimização de imagens:

• Use formatos modernos (WebP, AVIF)
• Implemente imagens responsivas com srcset
• Comprima sem perda visível de qualidade
• Dimensione imagens corretamente—não carregue imagens 4K para mobile

Otimização de fontes para LCP de texto:

• Use font-display: swap para mostrar texto imediatamente
• Faça subset de fontes apenas com caracteres necessários
• Faça preload de fontes críticas

Considerações sobre CDN:

• CDNs de imagem otimizam automaticamente formatos e compressão
• Servir same-origin evita overhead de conexão
• Use recursos de proxy CDN quando disponível

Fase 4: Minimizar Bloqueio de Renderização

Mesmo com recursos baixados, a renderização pode travar devido ao congestionamento da thread principal.

Bloqueadores comuns:

• CSS que bloqueia renderização no <head>
• Execução síncrona de JavaScript
• Tarefas longas de scripts de terceiros

Soluções:

CSS crítico inline:

<style>
  /* Apenas estilos above-the-fold */
  .hero { /* estilos */ }
</style>

Defer JavaScript não-crítico:

<script defer src="/app.js"></script>

Para elementos LCP baseados em texto bloqueados por web fonts, garanta renderização fallback:

@font-face {
  font-family: 'Custom';
  font-display: swap; /* Mostra fallback imediatamente */
  src: url('/font.woff2') format('woff2');
}

Casos Especiais: Vídeo e Imagens de Fundo

Elementos de vídeo: A imagem poster ou primeiro frame torna-se candidato LCP. Otimize a imagem poster como qualquer outra imagem, e garanta que a codificação do vídeo seja eficiente.

Imagens de fundo CSS: Estas criam atrasos inerentes de descoberta. O navegador não pode fazer preload do que não analisou. Converta imagens de fundo críticas para elementos <img>, ou faça preload explicitamente.

Medindo e Monitorando LCP

Dados de laboratório (PageSpeed Insights, Lighthouse) ajudam a diagnosticar problemas, mas dados de campo (CrUX, RUM) mostram a experiência real do usuário. Sempre priorize dados de campo—é o que o Google usa para rankings.

Use o painel Performance do Chrome DevTools para ver detalhamentos de LCP localmente. A biblioteca JavaScript web-vitals permite monitoramento personalizado:

import {onLCP} from 'web-vitals';

onLCP(({value, entries}) => {
  console.log('LCP:', value, entries[0].element);
});

Conclusão

Otimizar LCP requer atenção sistemática a todas as quatro fases. Comece com TTFB—nenhuma otimização importa se seu servidor está lento. Garanta descoberta imediata de recursos, minimize tamanhos de arquivo e elimine recursos que bloqueiam renderização. Mais importante, nunca aplique lazy-loading ao seu elemento LCP. Com essas otimizações implementadas, atingir um LCP sub-2,5 segundos torna-se não apenas possível, mas previsível.

Perguntas Frequentes

Gain control over your UX

See how users are using your site as if you were sitting next to them, learn and iterate faster with OpenReplay. — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.