O Google não se importa apenas com o que você diz, mas com como você entrega. Os Core Web Vitals são o termômetro da saúde da sua UX. Se seu site é lento, instável ou trava, você é invisível.
Neste guia, vamos abordar as três métricas principais e como otimizá-las tecnicamente.
1. Largest Contentful Paint (LCP)
Mede o tempo de carregamento do maior elemento visível na tela (geralmente a imagem hero ou o título H1). Meta: Menos de 2.5s.
Como Otimizar:
- Pré-carregamento: Use
<link rel="preload">para imagens críticas. No Next.js, use a proppriorityno componenteImage. - CDN: Sirva assets de uma borda próxima ao usuário (Vercel/Cloudflare).
- Servidor Rápido: Otimize suas queries de banco de dados ou use SSG/ISR para reduzir o TTFB (Time to First Byte).
2. Cumulative Layout Shift (CLS)
Mede a estabilidade visual. Coisas pulando na tela enquanto carregam? Isso destrói seu CLS. Meta: Menos de 0.1.
O Vilão: Imagens sem Dimensão
Sempre defina width e height (ou aspect-ratio no CSS) para imagens e vídeos. Reserve o espaço antes do conteúdo chegar.
.ad-slot {
min-height: 250px; /* Reserva espaço para o anúncio */
background: #f0f0f0;
}
3. Interaction to Next Paint (INP)
Substituto do FID, o INP mede a responsividade. Quando o usuário clica, quanto tempo demora para ver o feedback visual? Meta: Menos de 200ms.
A Solução: Yield to Main Thread
JavaScript pesado bloqueia a thread principal.
- Divida tarefas longas usando
setTimeoutourequestIdleCallback. - Use Web Workers para processamento pesado.
- Evite re-renders desnecessários no React (
useMemo,useCallback).
Conclusão
Performance é dinheiro. Cada 100ms de atraso custa 1% em conversão (Amazon). Trate performance como uma feature, não como uma tarefa de limpeza.