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

Você construiu um aplicativo web moderno, mas os usuários reclamam que ele parece lento. As classificações nos mecanismos de busca estão caindo e as taxas de rejeição aumentando. O culpado pode ser Core Web Vitals ruins—as métricas do Google para a experiência do usuário no mundo real. Neste guia, você aprenderá o que são, como medi-las com precisão e passos práticos para melhorar cada uma delas.

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): Quanto tempo leva para o maior elemento de conteúdo (imagem ou bloco de texto) se tornar visível. Bom: ≤ 2,5s.
• Interaction to Next Paint (INP): Mede a responsividade—o tempo desde uma interação do usuário (clique, toque, pressionamento de tecla) até a próxima atualização visual. Bom: ≤ 200ms.
• Cumulative Layout Shift (CLS): Quantifica mudanças inesperadas de layout. Bom: ≤ 0,1.

Essas métricas fazem parte dos sinais de experiência de página do Google e impactam diretamente o SEO e a satisfação 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: Execute uma auditoria para obter LCP, CLS e TBT (um proxy para INP).
• WebPageTest: Testes avançados com filmstrips e gráficos de cascata.
• PageSpeed Insights: Combina dados de laboratório e de campo.

Ferramentas de campo

• Chrome UX Report (CrUX): Conjunto de dados público de métricas de usuários reais.
• Biblioteca web-vitals: Envie métricas para sua ferramenta de analytics.

Exemplo: Usando a biblioteca web-vitals para registrar métricas:

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);

Melhorando o LCP

O LCP costuma ser a métrica de maior impacto a ser corrigida. Causas comuns: resposta lenta do servidor, recursos bloqueadores de renderização e imagens não otimizadas.

1. Otimize imagens: Comprima, use formatos modernos (WebP/AVIF) e defina dimensões. Para compressão rápida, experimente nosso Compressor de Imagens.
2. Pré-carregue recursos críticos: Use <link rel="preload"> para imagens hero e fontes.
3. Reduza o tempo de resposta do servidor: Use cache, CDN e otimize consultas de backend.
4. Elimine recursos bloqueadores de renderização: Coloque CSS crítico inline, adie JS não crítico.

Exemplo: Pré-carregar imagem LCP:

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

Melhorando o INP

O INP mede a responsividade. Tarefas longas bloqueiam a thread principal e atrasam o feedback visual.

1. Divida tarefas longas: Use setTimeout ou scheduler.yield para ceder à thread principal.
2. Otimize manipuladores de eventos: Use debounce e throttle quando apropriado; evite trabalho síncrono pesado.
3. Reduza JavaScript: Faça code-split, tree-shake e adie scripts não críticos.
4. Use web workers para tarefas intensivas de CPU.

Exemplo: Cedendo com scheduler.yield (onde houver suporte):

async function handleClick() {
  // Do some work
  await scheduler.yield();
  // Continue after yielding
}

Melhorando o CLS

O CLS trata da estabilidade visual. Mudanças de layout ocorrem quando elementos mudam de posição inesperadamente.

1. Defina atributos de tamanho em imagens e vídeos (width/height).
2. Reserve espaço para anúncios e incorporações: Use aspect-ratio do CSS ou dimensões fixas.
3. Evite inserir conteúdo acima do conteúdo existente, a menos que seja acionado por interação do usuário.
4. Use animações com transform em vez de propriedades que acionam layout.

Exemplo: Reservar espaço com aspect-ratio:

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

Comparação das Core Web Vitals

Ferramentas e Fluxo de Trabalho

Integre o monitoramento de desempenho ao seu pipeline de CI/CD. Use o Lighthouse CI para detectar regressões. Para dados de campo, configure um painel com web-vitals e sua ferramenta de analytics.

Ao otimizar imagens, você pode comprimi-las rapidamente com nosso Compressor de Imagens antes de enviá-las ao seu site.

Perguntas Frequentes

O que são Core Web Vitals?

Core Web Vitals são três métricas—LCP, INP e CLS—que o Google usa para medir a experiência do usuário em páginas web.

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

Continuamente em campo via analytics, e a cada implantação em laboratório usando o Lighthouse CI para detectar regressões.

Posso melhorar as Core Web Vitals sem redesenhar meu site?

Sim. Muitas melhorias, como otimização de imagens, pré-carregamento e definição de dimensões, podem ser feitas de forma incremental sem um redesenho completo.

Comece medindo suas pontuações atuais com o Lighthouse, depois ataque a métrica de maior impacto. Otimizações pequenas e consistentes geram ganhos significativos na experiência do usuário e no SEO.