Core Web Vitals: Como Medir e Melhorar

Por que os Core Web Vitals importam para o seu site

Você provavelmente já viu relatórios de que seu site está lento, mas não sabe por onde começar. Os Core Web Vitals são as métricas do Google para a experiência real do usuário: Largest Contentful Paint (LCP), Interaction to Next Paint (INP) e Cumulative Layout Shift (CLS). Eles afetam o ranking de busca e, mais importante, como os usuários percebem seu site. Um LCP lento frustra os visitantes, um INP alto faz a página parecer não responsiva e um CLS ruim causa cliques acidentais. Este guia mostra como medir essas métricas e melhorá-las com passos práticos.

Entendendo os três Core Web Vitals

Antes de otimizar, saiba o que cada métrica mede e seus limites.

Esses limites são baseados em dados de campo (usuários reais), não em testes de laboratório. Mire na faixa "Bom" para pelo menos 75% dos carregamentos de página.

Como medir os Core Web Vitals

Você precisa de dados de laboratório e de campo. Dados de laboratório ajudam a depurar; dados de campo refletem a experiência real do usuário.

Ferramentas de laboratório

• Lighthouse no Chrome DevTools: execute uma auditoria para pontuações de desempenho e oportunidades específicas.
• WebPageTest: testes avançados com filmstrips e gráficos de cascata.
• Chrome UX Report (CrUX): dados de campo de usuários reais, acessíveis via PageSpeed Insights ou API CrUX.

Ferramentas de campo

• PageSpeed Insights: mostra dados de laboratório e de campo para uma URL.
• Google Search Console: o relatório Core Web Vitals agrupa URLs por status.
• Biblioteca JavaScript web-vitals: colete métricas de usuários reais em sua própria análise.

Para instrumentar seu site, inclua a biblioteca web-vitals e envie métricas para seu endpoint de análise:

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

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  navigator.sendBeacon('/analytics', body);
}

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

Isso fornece um fluxo contínuo de dados de campo para acompanhar melhorias.

Melhorando o Largest Contentful Paint (LCP)

O LCP geralmente é o maior desafio. O maior elemento costuma ser uma imagem hero ou um bloco de texto grande. Otimize seu caminho de carregamento.

1. Identifique o elemento LCP usando Lighthouse ou o painel de desempenho do DevTools.
2. Priorize seu carregamento: use fetchpriority="high" na imagem ou pré-carregue-a com <link rel="preload">.
3. Otimize imagens: comprima, use formatos modernos (WebP/AVIF) e sirva tamanhos responsivos com srcset.
4. Reduza o tempo de resposta do servidor: use cache, uma CDN e otimize consultas de backend.
5. Elimine recursos que bloqueiam a renderização: embuta CSS crítico, adie JS não crítico.

Exemplo: pré-carregue a imagem hero e defina a prioridade de busca:

<link rel="preload" as="image" href="/hero.avif" fetchpriority="high">
<img src="/hero.avif" alt="Hero" width="1200" height="600" fetchpriority="high">

Sempre defina largura e altura para evitar deslocamentos de layout.

Melhorando o Interaction to Next Paint (INP)

O INP mede a responsividade. Tarefas longas bloqueiam a thread principal, atrasando o feedback visual. Para melhorar o INP:

• Divida tarefas longas: use setTimeout ou scheduler.yield para ceder ao navegador.
• Otimize manipuladores de eventos: debounce em entradas, evite trabalho síncrono pesado.
• Reduza JavaScript: code-splitting, tree-shaking e adie scripts não críticos.
• Use web workers para tarefas intensivas de CPU.
• Evite grandes atualizações do DOM: agrupe alterações no DOM e use requestAnimationFrame.

Exemplo: ceda à thread principal durante um loop longo:

async function processItems(items) {
  for (let i = 0; i < items.length; i++) {
    // do work
    if (i % 50 === 0) {
      await new Promise(resolve => setTimeout(resolve, 0));
    }
  }
}

Isso mantém a página responsiva durante processamento pesado.

Melhorando o Cumulative Layout Shift (CLS)

O CLS ocorre quando elementos se movem inesperadamente. Causas comuns: imagens sem dimensões, anúncios, embeds e fontes web.

• Sempre inclua largura e altura em imagens e vídeos.
• Reserve espaço para conteúdo dinâmico (anúncios, embeds) com min-height CSS ou caixas de proporção.
• Use font-display: swap e pré-carregue fontes para evitar texto invisível e deslocamentos de layout.
• Evite inserir conteúdo acima do conteúdo existente, a menos que seja em resposta à interação do usuário.

Exemplo: use aspect-ratio para reservar espaço:

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

Isso evita deslocamentos quando o vídeo carrega.

Monitore e itere

Desempenho não é uma correção única. Configure monitoramento contínuo com métricas de usuários reais. Use painéis para acompanhar LCP, INP e CLS ao longo do tempo. Após cada alteração, verifique com ferramentas de laboratório e confira os dados de campo após alguns dias. Priorize correções que afetam mais usuários.

FAQ

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

LCP: bom ≤2,5s, precisa melhorar 2,5–4,0s, ruim >4,0s. INP: bom ≤200ms, precisa melhorar 200–500ms, ruim >500ms. CLS: bom ≤0,1, precisa melhorar 0,1–0,25, ruim >0,25.

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

Monitore dados de campo continuamente e execute testes de laboratório após cada alteração significativa. Verifique o Search Console semanalmente para tendências.

Posso melhorar os Core Web Vitals sem reconstruir meu site?

Sim. Muitas melhorias como otimização de imagens, pré-carregamento e ajustes de CSS podem ser aplicadas incrementalmente sem uma reconstrução completa.

Precisa comprimir imagens rapidamente para melhorar o LCP? Experimente nosso Compressor de Imagens gratuito para reduzir o tamanho dos arquivos sem perder qualidade.