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

Você criou um aplicativo web moderno, mas os usuários reclamam que parece lento. As classificações de pesquisa caem. Você verifica seu código—nada óbvio. O problema pode ser as Core Web Vitals (CWV), as métricas do Google para experiência do usuário. Este guia mostra como medi-las e melhorá-las na prática.

O que são Core Web Vitals?

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

• Largest Contentful Paint (LCP): Quanto tempo até o conteúdo principal carregar. Meta: ≤2,5s.
• First Input Delay (FID): Tempo desde a primeira interação do usuário até a resposta. Meta: ≤100ms.
• Cumulative Layout Shift (CLS): Estabilidade visual—quanto os elementos se movem inesperadamente. Meta: ≤0,1.

Essas métricas fazem parte dos sinais de experiência de página do Google e impactam diretamente o SEO. Mas, mais importante, elas refletem a frustração real do usuário.

Como medir as Core Web Vitals

Você precisa de dados de laboratório e de campo. Dados de laboratório ajudam a depurar; dados de campo refletem usuários reais.

Ferramentas de laboratório

• Lighthouse (no Chrome DevTools ou online) – auditoria rápida com pontuações e oportunidades.
• WebPageTest – análise avançada de cascata e filmstrip.
• Painel Performance do Chrome DevTools – mergulho profundo no runtime.

Ferramentas de campo

• Chrome User Experience Report (CrUX) – conjunto de dados público de métricas de usuários reais.
• PageSpeed Insights – combina dados de laboratório e de campo.
• Relatório Core Web Vitals do Search Console – agrupa URLs por status.
• Biblioteca JavaScript web-vitals – colete seus próprios dados de campo.

Comece com o PageSpeed Insights para obter uma linha de base. Depois, use a biblioteca web-vitals para instrumentar seu site e enviar métricas para sua análise.

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

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

onLCP(sendToAnalytics);
onFID(sendToAnalytics);
onCLS(sendToAnalytics);

Melhorando o LCP

O LCP costuma ser o maior culpado. Otimize o caminho crítico:

1. Identifique o elemento LCP – geralmente uma imagem hero, título ou pôster de vídeo.
2. Otimize imagens – comprima, use formatos modernos (WebP/AVIF) e defina dimensões explícitas.
3. Pré-carregue o recurso LCP – use <link rel="preload"> para imagens ou fontes.
4. Reduza o tempo de resposta do servidor – use cache, CDN e backend eficiente.
5. Elimine recursos que bloqueiam a renderização – adie CSS/JS não críticos.

Para imagens, ferramentas como o Image Compressor podem ajudar a reduzir arquivos sem perda de qualidade.

Melhorando o FID

O FID mede a responsividade da entrada. Tarefas JavaScript longas bloqueiam a thread principal.

• Divida tarefas longas – use setTimeout ou requestIdleCallback para ceder.
• Code-splitting – carregue apenas o JS necessário.
• Otimize manipuladores de eventos – use debounce ou throttle em operações caras.
• Use web workers para trabalho intensivo de CPU.

// Exemplo: ceder à thread principal
function yieldToMain() {
  return new Promise(resolve => {
    setTimeout(resolve, 0);
  });
}

async function processItems(items) {
  for (const item of items) {
    // processar item
    await yieldToMain();
  }
}

Melhorando o CLS

Mudanças de layout incomodam os usuários. Prevenha-as reservando espaço:

• Defina largura/altura em imagens e vídeos – ou use aspect-ratio no CSS.
• Não injete conteúdo acima do conteúdo existente – a menos que em resposta à interação do usuário.
• Use animações com transform em vez de propriedades que acionam layout.
• Pré-carregue fontes e use font-display: swap para evitar texto invisível.

Comparação de métricas e ferramentas

Fluxo de trabalho prático

1. Meça – Execute o PageSpeed Insights nas páginas principais. Anote os dados de campo (se disponíveis) e as pontuações de laboratório.
2. Priorize – Foque nas métricas que estão ruins e afetam mais usuários.
3. Corrija – Aplique as técnicas acima, começando pelos maiores ganhos (ex.: otimização de imagens).
4. Verifique – Execute novamente os testes de laboratório e monitore os dados de campo via web-vitals.
5. Itere – O desempenho é contínuo; defina orçamentos e monitore regressões.

Lembre-se: dados de campo são a verdade absoluta. Ferramentas de laboratório ajudam a depurar, mas podem não refletir as condições reais do usuário.

Perguntas frequentes

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

Monitore continuamente em produção usando a biblioteca web-vitals. Execute auditorias de laboratório antes de lançamentos importantes e periodicamente (ex.: mensalmente) para páginas principais.

Melhorar as Core Web Vitals realmente afeta o SEO?

Sim, a experiência de página é um sinal de classificação, mas a relevância do conteúdo continua sendo primordial. Boas CWV melhoram a experiência do usuário, o que indiretamente ajuda o SEO.

Qual a diferença entre dados de laboratório e de campo?

Dados de laboratório são coletados em um ambiente controlado com condições simuladas; dados de campo vêm de usuários reais em vários dispositivos e redes. Use ambos: laboratório para depuração, campo para a verdade.

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