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, e suas classificações de busca não estão onde você quer. O problema? Você não está medindo as coisas certas. Core Web Vitals (CWV) 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). Se você as ignora, está deixando desempenho—e SEO—na mesa.

Este guia mostra como medir CWV com precisão e corrigir os problemas mais comuns. Sem enrolação, apenas passos acionáveis.

O que são Core Web Vitals?

Core Web Vitals são três métricas específicas que quantificam como os usuários percebem o carregamento, a interatividade e a estabilidade visual:

• LCP mede o desempenho de carregamento. Ele marca quando o maior elemento de conteúdo (imagem, vídeo, bloco de texto) se torna visível. Meta: ≤ 2,5 segundos.
• INP mede a capacidade de resposta. Ele registra a latência de todas as interações (cliques, toques, pressionamentos de tecla) e reporta um valor de alto percentil. Meta: ≤ 200 milissegundos.
• CLS mede a estabilidade visual. Ele calcula mudanças inesperadas de layout. Meta: ≤ 0,1.

Esses limites são baseados em dados reais de usuários do Chrome User Experience Report (CrUX). Atendê-los melhora a satisfação do usuário e pode impulsionar as classificações de busca.

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 refletem usuários reais.

Ferramentas de Laboratório

• Lighthouse (no Chrome DevTools ou CI) fornece um instantâneo com diagnósticos.
• PageSpeed Insights combina dados de laboratório e de campo para uma URL.
• Web Vitals Extension registra CWV no console do Chrome enquanto você navega.

Ferramentas de Campo

• Chrome UX Report (CrUX) mostra dados agregados de usuários reais para milhões de sites.
• Biblioteca JavaScript web-vitals permite coletar CWV de seus próprios usuários e enviar para análise.
• Search Console reporta o status de CWV do seu site com base no CrUX.

Comece com dados de campo para identificar páginas problemáticas, depois use ferramentas de laboratório para depurar.

Melhorando o LCP

O LCP geralmente é o mais fácil de melhorar com algumas correções direcionadas.

1. Otimize imagens. Use formatos modernos (WebP, AVIF), comprima sem perda visível de qualidade e defina largura/altura explícitas. Ferramentas como Image Compressor podem ajudar a reduzir o tamanho do arquivo.
2. Pré-carregue a imagem LCP. Adicione <link rel="preload" as="image" href="#"> no head.
3. Elimine recursos que bloqueiam a renderização. Embuta CSS crítico, adie CSS/JS não crítico e evite scripts síncronos no head.
4. Use uma CDN. Sirva ativos de um local próximo ao usuário para reduzir a latência.
5. Ative a compressão de texto. Brotli ou gzip para HTML, CSS, JS.

Exemplo de pré-carregamento de uma imagem LCP:

<link rel="preload" as="image" href="/images/hero.avif" type="image/avif">

Melhorando o INP

O INP mede a rapidez com que sua página responde à entrada do usuário. Tarefas longas bloqueiam a thread principal e atrasam as interações.

1. Divida tarefas longas. Use setTimeout ou requestIdleCallback para ceder à thread principal.
2. Otimize manipuladores de eventos. Aplique debounce ou throttle em eventos de alta frequência como scroll e resize.
3. Reduza o JavaScript. Faça code-splitting, tree-shaking e lazy-load de scripts não críticos.
4. Use web workers para cálculos pesados.
5. Evite tamanhos grandes de DOM. Mantenha o DOM abaixo de 1500 nós, se possível.

Exemplo de ceder à thread principal:

async function yieldToMain() {
  if ('scheduler' in window && 'yield' in scheduler) {
    await scheduler.yield();
  } else {
    await new Promise(resolve => setTimeout(resolve, 0));
  }
}

Melhorando o CLS

Mudanças de layout acontecem quando elementos mudam de posição inesperadamente. Causas comuns: imagens sem dimensões, anúncios, embeds e conteúdo injetado dinamicamente.

1. Sempre defina largura e altura em imagens e vídeos. Isso permite que o navegador reserve espaço.
2. Reserve espaço para anúncios e embeds. Use CSS aspect-ratio ou contêineres fixos.
3. Evite inserir conteúdo acima do conteúdo existente a menos que seja acionado por interação do usuário.
4. Use font-display: swap e pré-carregue fontes para evitar mudanças de texto invisível.
5. Cuidado com animações. Use transform e opacity em vez de propriedades que acionam layout.

Monitoramento e Melhoria Contínua

Desempenho não é uma correção única. Configure monitoramento para detectar regressões.

• Use a biblioteca web-vitals para enviar CWV para sua 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);

• Configure alertas para quando as métricas excederem os limites.
• Execute o Lighthouse no CI para cada pull request.
• Revise os dados do CrUX mensalmente para acompanhar tendências.

Comparação das Core Web Vitals

Perguntas Frequentes

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

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

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

Monitore dados de campo continuamente via análise. Revise o CrUX e o Search Console mensalmente. Execute testes de laboratório (Lighthouse) a cada mudança significativa de código.

Posso melhorar as Core Web Vitals sem um desenvolvedor?

Algumas correções como comprimir imagens ou ativar cache podem ser feitas via plugins ou configurações de hospedagem. Mas otimizações mais profundas (code splitting, redução de JS) geralmente exigem envolvimento de um desenvolvedor.

Pronto para otimizar suas imagens para um melhor LCP? Experimente nosso Image Compressor gratuito para reduzir o tamanho dos arquivos sem perder qualidade.