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 os 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 com dados reais de usuários e passos práticos para melhorá-las.

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): Tempo até que o maior elemento visível (ex.: imagem principal ou título) seja renderizado. Bom: ≤2,5s.
• First Input Delay (FID): Tempo desde a primeira interação do usuário (ex.: clique em um link) até a resposta do navegador. Bom: ≤100ms.
• Cumulative Layout Shift (CLS): Mede a estabilidade visual — quanto os elementos se deslocam inesperadamente. Bom: ≤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 os Core Web Vitals

Você precisa de dados de laboratório e de campo. Dados de laboratório (ex.: Lighthouse) ajudam a depurar, enquanto dados de campo (monitoramento de usuários reais) mostram o desempenho real.

1. Use o Chrome UX Report (CrUX)

O CrUX fornece dados agregados de usuários reais para milhões de sites. Você pode visualizá-los no PageSpeed Insights ou no Painel do CrUX. Ele mostra a distribuição de LCP, FID e CLS para sua origem.

2. Configure o Monitoramento de Usuários Reais (RUM)

Ferramentas como Google Analytics 4, Vercel Analytics ou bibliotecas de código aberto (web-vitals) permitem coletar os Core Web Vitals de visitantes reais. Veja como enviar métricas para seu endpoint de 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);

Este trecho usa a biblioteca web-vitals para capturar métricas e enviá-las via sendBeacon sem afetar o carregamento da página.

3. Use o Lighthouse para Testes de Laboratório

O Lighthouse (no Chrome DevTools ou PageSpeed Insights) simula o carregamento de uma página e relata os Core Web Vitals, juntamente com oportunidades de melhoria. Execute-o em páginas-chave e acompanhe as mudanças ao longo do tempo.

Melhorando o LCP

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

• Otimize imagens: Comprima imagens, use formatos modernos (WebP, AVIF) e sirva tamanhos responsivos com srcset.
• Pré-carregue recursos críticos: Use <link rel="preload"> para a imagem ou fonte do LCP.
• Reduza o tempo de resposta do servidor: Use CDN, cache e otimize consultas de backend.
• Elimine recursos que bloqueiam a renderização: Adie CSS/JS não críticos, faça CSS crítico inline.

Por exemplo, pré-carregue sua imagem principal:

<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 FID

O FID mede a responsividade a entradas. Para melhorá-lo:

• Divida tarefas longas: Use setTimeout ou requestIdleCallback para ceder à thread principal.
• Minimize o trabalho na thread principal: Reduza o tempo de execução de JavaScript, evite bundles grandes.
• Use web workers para cálculos pesados.
• Otimize manipuladores de eventos: Use debounce ou throttle em eventos rápidos.

Considere também a transição para Interaction to Next Paint (INP), que substituirá o FID em 2024. O INP mede todas as interações, então as mesmas otimizações se aplicam.

Melhorando o CLS

O CLS trata da estabilidade visual. Causas comuns e correções:

• Imagens sem dimensões: Sempre defina atributos width e height ou use aspect-ratio no CSS.
• Anúncios, embeds e iframes: Reserve espaço com um placeholder ou defina dimensões fixas.
• Injeção de conteúdo dinâmico: Evite inserir conteúdo acima do conteúdo existente, a menos que em resposta à interação do usuário.
• Fontes web: Use font-display: swap e pré-carregue fontes para evitar texto invisível e deslocamentos de layout.

Exemplo: reserve espaço para uma imagem:

<img src="#" width="800" height="600" alt="...">

Comparação dos Core Web Vitals

Ferramentas para Monitoramento Contínuo

Melhorar os Core Web Vitals não é uma tarefa única. Configure painéis para acompanhar dados de campo. Use:

• Google Search Console: O relatório de Core Web Vitals mostra grupos de URLs que precisam de atenção.
• PageSpeed Insights: Combina dados de laboratório e de campo.
• Extensão Web Vitals: Métricas em tempo real enquanto você navega.
• Ferramentas RUM: Como SpeedCurve, Calibre ou alternativas de código aberto.

Audite seu site regularmente, especialmente após mudanças significativas.

Perguntas Frequentes

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

Core Web Vitals são três métricas (LCP, FID, CLS) que o Google usa para medir a experiência do usuário. Elas importam porque impactam o ranking de SEO e refletem a satisfação real do usuário.

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

Continuamente via monitoramento de usuários reais, e após quaisquer mudanças significativas de código ou conteúdo. Testes de laboratório devem ser executados durante o desenvolvimento e antes de lançamentos.

Posso melhorar os Core Web Vitals sem um desenvolvedor?

Algumas correções, como comprimir imagens ou definir dimensões de imagem, podem ser feitas por editores de conteúdo. Mas otimizações mais profundas geralmente exigem envolvimento de um desenvolvedor.

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