Core Web Vitals: guia prático para passar em LCP, INP e CLS
O que cada métrica mede, quais são as causas mais comuns de nota ruim e o que corrigir primeiro.
Core Web Vitals são três métricas que descrevem a experiência real de quem abre sua página: quão rápido o conteúdo principal aparece, quão rápido a página responde a um toque e quanto o layout pula durante o carregamento.
LCP: o conteúdo principal aparece quando?
O Largest Contentful Paint mede o tempo até o maior elemento visível da primeira tela ser desenhado, normalmente a imagem do hero ou o título. A meta é ficar abaixo de 2,5 segundos.
As causas mais comuns de LCP alto:
- imagem do topo em formato pesado e sem dimensões declaradas;
- fonte web carregada tarde, atrasando o texto;
- JavaScript bloqueando a renderização antes do primeiro pixel;
- servidor lento para entregar o HTML.
O caminho mais curto costuma ser: converter a imagem principal para WebP ou AVIF, carregá-la com prioridade alta, pré-carregar a fonte principal e servir o HTML por CDN.
INP: a página responde ao toque?
O Interaction to Next Paint substituiu o FID e mede a latência de todas as interações da visita, não só da primeira. A meta é ficar abaixo de 200 milissegundos.
O vilão quase sempre é JavaScript demais ocupando a thread principal: scripts de chat, de mapas, de rastreamento e bibliotecas inteiras importadas para usar uma função. Reduzir o que é carregado, adiar o que não é crítico e quebrar tarefas longas em pedaços menores resolve a maior parte dos casos.
CLS: o layout pula?
O Cumulative Layout Shift soma os deslocamentos inesperados de elementos. A meta é ficar abaixo de 0,1.
Quase todo CLS vem de três lugares: imagens sem largura e altura, anúncios ou embeds que entram sem espaço reservado e fontes que trocam de tamanho quando carregam. Declare as dimensões, reserve o espaço e use font-display: swap com uma fonte de reserva parecida.
Ordem de ataque
- Meça com dados de campo, não só com o laboratório.
- Corrija o LCP da página mais importante para a receita.
- Reduza o JavaScript de terceiros.
- Declare dimensões de mídia para zerar o CLS.
- Meça de novo após duas semanas, porque dados de campo levam tempo para atualizar.
O papel do código limpo
Sites com HTML semântico e pouco JavaScript passam nessas métricas quase sem esforço. Já temas com dezenas de plugins exigem uma otimização constante só para não regredir. Por isso a performance é uma decisão de arquitetura, e não um ajuste de última hora.