Core Web Vitals: Meça e Melhore o Desempenho Web

Você construiu um site rápido, mas os usuários ainda reclamam de lentidão. Ou talvez seu ranking de SEO tenha caído após uma atualização do Google. O culpado pode ser as Core Web Vitals — as métricas do Google para experiência do usuário. Neste guia, você aprenderá o que são, como medi-las e passos concretos para melhorar cada uma.

O que são Core Web Vitals?

Core Web Vitals são três métricas que quantificam aspectos-chave da experiência do usuário:

• Largest Contentful Paint (LCP): Quanto tempo leva para o maior elemento de conteúdo (imagem, vídeo ou bloco de texto) se tornar visível. Bom: ≤2,5s.
• Interaction to Next Paint (INP): Mede a responsividade — o tempo desde uma interação do usuário (clique, toque, pressionamento de tecla) até o próximo quadro pintado. Bom: ≤200ms.
• Cumulative Layout Shift (CLS): Quantifica mudanças inesperadas de layout durante o carregamento. Bom: ≤0,1.

Essas métricas fazem parte dos sinais de experiência de página do Google e impactam diretamente o SEO e a satisfação do usuário.

Como medir as Core Web Vitals

Você precisa de dados de laboratório e de campo. Dados de laboratório (testes sintéticos) ajudam a depurar; dados de campo (monitoramento de usuários reais) refletem a experiência real.

Ferramentas de laboratório

• Lighthouse no Chrome DevTools: Execute auditorias e obtenha pontuações com oportunidades de melhoria.
• WebPageTest: Testes avançados com filmstrips e gráficos de cascata.
• PageSpeed Insights: Combina dados de laboratório e de campo do CrUX.

Ferramentas de campo

• Chrome User Experience Report (CrUX): Conjunto de dados público de métricas de usuários reais.
• Biblioteca JavaScript web-vitals: Colete métricas de usuários reais via analytics.
• Search Console: O relatório Core Web Vitals mostra grupos de URLs que precisam de atenção.

Veja como usar a biblioteca web-vitals para enviar métricas ao seu analytics:

import {onLCP, onINP, onCLS} from 'web-vitals';

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  // Use navigator.sendBeacon se disponível
  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
    fetch('/analytics', {body, method: 'POST', keepalive: true});
}

onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);

Melhorando o LCP

O LCP costuma ser a métrica de maior impacto. Para melhorá-la:

1. Otimize o elemento LCP: Identifique-o (geralmente uma imagem hero ou título) e garanta que carregue rapidamente.
2. Pré-carregue recursos críticos: Use <link rel="preload"> para imagens, fontes e folhas de estilo.
3. Use formatos de imagem modernos: Sirva WebP ou AVIF com fallbacks.
4. Implemente lazy loading com cuidado: Não faça lazy loading da imagem LCP; priorize-a.
5. Reduza o tempo de resposta do servidor: Use CDNs, cache e otimize o backend.
6. Elimine recursos que bloqueiam a renderização: Adie CSS e JavaScript não críticos.

Exemplo: pré-carregue sua imagem hero:

<link rel="preload" as="image" href="/hero.webp" imagesrcset="/hero-480.webp 480w, /hero-800.webp 800w" imagesizes="(max-width: 600px) 480px, 800px">

Melhorando o INP

O INP mede a responsividade. Um INP alto geralmente vem de tarefas longas bloqueando a thread principal.

1. Divida tarefas longas: Use setTimeout, requestIdleCallback ou scheduler.yield() para ceder à thread principal.
2. Otimize manipuladores de eventos: Aplique debounce ou throttle em operações custosas.
3. Reduza a execução de JavaScript: Faça code-splitting, tree-shaking e adie scripts não críticos.
4. Evite grandes atualizações no DOM: Agrupe mudanças no DOM e use virtual DOM com sabedoria.
5. Use web workers para trabalho intensivo de CPU.

Exemplo: cedendo com scheduler.yield() (onde suportado):

async function handleClick() {
  // Faça algum trabalho
  await scheduler.yield();
  // Continue após ceder
}

Melhorando o CLS

O CLS trata da estabilidade visual. Evite mudanças inesperadas:

1. Sempre inclua atributos width e height em imagens e vídeos.
2. Reserve espaço para anúncios e embeds com CSS aspect-ratio ou dimensões fixas.
3. Evite inserir conteúdo acima do conteúdo existente, a menos que seja acionado por interação do usuário.
4. Use transformações CSS para animações em vez de propriedades que acionam layout.
5. Pré-carregue fontes e use font-display: swap para evitar mudanças de texto invisível.

Exemplo: reserve espaço com aspect-ratio:

.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}

Comparação das Core Web Vitals

Ferramentas e fluxo de trabalho

Integre o monitoramento das Core Web Vitals ao seu fluxo de desenvolvimento:

• Execute o Lighthouse na CI para detectar regressões.
• Use RUM (Real User Monitoring) para rastrear dados de campo.
• Defina orçamentos de desempenho e alertas.
• Audite regularmente scripts de terceiros — eles costumam impactar INP e LCP.

Para otimização rápida de imagens antes de enviá-las ao seu site, experimente nosso Compressor de Imagens para reduzir o tamanho dos arquivos sem perda de qualidade.

Perguntas frequentes

Quais são os limites atuais das Core Web Vitals?

LCP bom ≤2,5s, precisa melhorar ≤4s; INP bom ≤200ms, precisa melhorar ≤500ms; CLS bom ≤0,1, precisa melhorar ≤0,25.

Com que frequência devo medir as Core Web Vitals?

Continuamente via dados de campo e a cada mudança significativa no código via ferramentas de laboratório. Configure alertas para regressões.

Posso melhorar as Core Web Vitals sem reconstruir meu site?

Sim — muitas correções como otimização de imagens, pré-carregamento e adiamento de scripts podem ser aplicadas incrementalmente.