Core Web Vitals: Como medir e melhorar

Seus usuários esperam páginas rápidas e responsivas. As Core Web Vitals (CWV) do Google quantificam essa experiência: Largest Contentful Paint (LCP) mede o carregamento, Interaction to Next Paint (INP) mede a interatividade e Cumulative Layout Shift (CLS) mede a estabilidade visual. Pontuações ruins prejudicam a satisfação do usuário e podem afetar o ranking de busca. Este guia mostra como medir as CWV com precisão e corrigir problemas comuns com passos práticos.

O que são Core Web Vitals?

Core Web Vitals são três métricas que refletem a experiência real do usuário:

• LCP: Tempo até o maior elemento de conteúdo (imagem, bloco de texto) ser renderizado. Bom: ≤2,5s.
• INP: Tempo desde a interação do usuário até a próxima pintura. Bom: ≤200ms.
• CLS: Soma das pontuações de deslocamento de layout. Bom: ≤0,1.

Esses limites são avaliados no 75º percentil de carregamentos de página, ou seja, 75% das visitas devem atingir a meta.

Como medir as Core Web Vitals

Você precisa de dados de laboratório e de campo. Ferramentas de laboratório simulam condições; dados de campo vêm de usuários reais.

Ferramentas de Laboratório

• Lighthouse no Chrome DevTools: Execute auditorias de desempenho, acessibilidade e SEO. Ele fornece pontuações CWV de laboratório e oportunidades de melhoria.
• WebPageTest: Testes avançados com condições de rede personalizadas e emulação de dispositivos.

Ferramentas de Campo

• Chrome UX Report (CrUX): Conjunto de dados público de métricas de usuários reais. Acesse via PageSpeed Insights ou BigQuery.
• Biblioteca JavaScript web-vitals: Colete CWV de usuários reais e envie para sua análise.

Use dados de campo para identificar problemas reais, depois ferramentas de laboratório para depurar e verificar correções.

Melhorando o Largest Contentful Paint (LCP)

O LCP geralmente é a imagem principal ou o título principal. Otimize estes elementos:

1. Otimize imagens: Comprima imagens, use formatos modernos como WebP ou AVIF e sirva tamanhos responsivos com srcset.
2. Pré-carregue recursos críticos: Adicione <link rel="preload"> para a imagem ou fonte do LCP.
3. Reduza o tempo de resposta do servidor: Use cache, CDNs e código de backend eficiente.
4. Elimine recursos que bloqueiam a renderização: Adie CSS/JS não críticos, embuta CSS crítico.

Exemplo: pré-carregue sua imagem LCP:

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

Também defina fetchpriority="high" na tag <img> para indicar importância.

Melhorando o Interaction to Next Paint (INP)

O INP mede a responsividade a cliques, toques e entrada de teclado. Tarefas longas bloqueiam a thread principal. Para melhorar o INP:

• Divida tarefas longas: Use setTimeout ou requestIdleCallback para ceder ao navegador.
• Otimize manipuladores de eventos: Aplique debounce ou throttle em operações caras.
• Reduza JavaScript: Faça code-splitting, tree-shaking e adie scripts não críticos.
• Use web workers para trabalho intensivo de CPU.

Exemplo: ceda à thread principal:

async function yieldToMain() {
  return new Promise(resolve => setTimeout(resolve, 0));
}

async function handleClick() {
  // Faça algum trabalho
  await yieldToMain();
  // Continue
}

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.

• Defina largura e altura em imagens e vídeos, ou use aspect-ratio no CSS.
• Reserve espaço para conteúdo dinâmico (anúncios, embeds) com min-height.
• Use font-display: swap e pré-carregue fontes para evitar texto invisível causando deslocamentos.
• Evite inserir conteúdo acima do conteúdo existente a menos que seja acionado por interação do usuário.

Exemplo: reserve espaço para um anúncio:

.ad-slot {
  min-height: 250px;
  background: #f0f0f0;
}

Comparação de Métricas e Ferramentas

Fluxo de Trabalho Prático para Melhorar as CWV

1. Meça dados de campo com PageSpeed Insights ou CrUX para identificar páginas com pontuações ruins.
2. Execute o Lighthouse nessas páginas para obter oportunidades específicas.
3. Priorize correções por impacto: muitas vezes LCP e CLS são mais fáceis de melhorar.
4. Implemente mudanças e teste em laboratório.
5. Implante e monitore dados de campo para confirmar a melhoria.
6. Itere nos problemas restantes.

Lembre-se de que as CWV são centradas no usuário; sempre valide com dados de usuários reais.

Perguntas Frequentes

O que são Core Web Vitals e por que são importantes?

Core Web Vitals são três métricas (LCP, INP, CLS) que quantificam carregamento, interatividade e estabilidade visual. Elas importam porque refletem a experiência real do usuário e são usadas pelo Google como sinal de ranking.

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

Monitore dados de campo continuamente e execute testes de laboratório após mudanças significativas. Uma revisão mensal dos dados do CrUX é uma boa prática.

Posso melhorar as Core Web Vitals sem reconstruir meu site?

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

Precisa comprimir imagens para um LCP mais rápido? Experimente nosso Compressor de Imagens gratuito para reduzir o tamanho dos arquivos sem perder qualidade.