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

Seus usuários são impacientes. Se sua página demora muito para carregar ou fica pulando enquanto eles tentam ler, eles vão embora. As Core Web Vitals (CWV) são as métricas do Google que quantificam essas frustrações: Largest Contentful Paint (LCP) para velocidade de carregamento, Interaction to Next Paint (INP) para capacidade de resposta e Cumulative Layout Shift (CLS) para estabilidade visual. Neste guia, você aprenderá a medir essas métricas e aplicar correções práticas que funcionam.

O que são Core Web Vitals?

As Core Web Vitals são um conjunto de métricas do mundo real que refletem a experiência do usuário. Elas fazem parte dos sinais de experiência de página do Google e são usadas no ranking. Cada métrica tem um limite "bom":

• LCP: Deve ser ≤ 2,5 segundos.
• INP: Deve ser ≤ 200 milissegundos.
• CLS: Deve ser ≤ 0,1.

Esses limites são medidos no 75º percentil de carregamentos de página, o que significa que 75% das visitas devem atingir a meta.

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 mostram a experiência real do usuário.

Dados de campo (usuários reais)

• Chrome User Experience Report (CrUX): Fornece dados agregados de usuários reais para sua origem. Acesse via PageSpeed Insights ou pelo painel do CrUX.
• Biblioteca JavaScript web-vitals: Adicione este script leve ao seu site para enviar métricas ao seu analytics.

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

Dados de laboratório (sintéticos)

• Lighthouse: Integrado ao Chrome DevTools, ele audita o desempenho e fornece uma pontuação.
• WebPageTest: Para análises mais profundas com limitação de rede.

Use dados de laboratório para iterar rapidamente, mas sempre valide com dados de campo.

Melhorando o Largest Contentful Paint (LCP)

O LCP mede quando o maior elemento de conteúdo (geralmente uma imagem hero ou título) se torna visível. Para melhorá-lo:

1. Otimize imagens: Comprima imagens, use formatos modernos como WebP ou AVIF e sirva tamanhos responsivos com srcset.
2. Pré-carregue recursos críticos: Use <link rel="preload"> para a imagem LCP e fontes principais.
3. Elimine recursos que bloqueiam a renderização: Adie CSS e JavaScript não críticos. Embuta o CSS crítico.
4. Use uma CDN: Sirva ativos de locais próximos aos usuários.
5. Ative compressão de texto: Use Brotli ou gzip para ativos baseados em texto.

Para compressão de imagens, você pode usar uma ferramenta como o Image Compressor para reduzir rapidamente o tamanho dos arquivos sem perder qualidade.

Melhorando o Interaction to Next Paint (INP)

O INP mede a capacidade de resposta da sua página às interações do usuário. Um INP alto significa que o navegador está ocupado e não consegue responder rapidamente. Para melhorá-lo:

1. Divida tarefas longas: Separe o trabalho JavaScript em partes menores usando setTimeout ou requestIdleCallback.
2. Otimize manipuladores de eventos: Aplique debounce ou throttle em manipuladores caros. Evite layout thrashing.
3. Reduza o JavaScript: Remova código não utilizado, faça code-splitting e adie scripts não críticos.
4. Use web workers: Transfira cálculos pesados para uma thread worker.

Além disso, certifique-se de não estar bloqueando a thread principal com scripts de terceiros. Audite-os regularmente.

Melhorando o Cumulative Layout Shift (CLS)

O CLS mede mudanças inesperadas de layout. Para mantê-lo baixo:

1. Defina atributos de tamanho: Sempre inclua width e height em imagens e vídeos.
2. Reserve espaço para conteúdo dinâmico: Use aspect-ratio do CSS ou placeholders para anúncios e incorporações.
3. Evite inserir conteúdo acima do conteúdo existente: Exceto em resposta à interação do usuário.
4. Use animações com transform: Prefira transform e opacity para animações em vez de propriedades que acionam layout.

Ferramentas e fluxo de trabalho

Aqui está um fluxo de trabalho simples para monitorar e melhorar continuamente as CWV:

Lembre-se de que as melhorias devem ser validadas com dados de usuários reais ao longo do tempo.

Perguntas frequentes

Quais são os limites atuais das Core Web Vitals?

LCP ≤ 2,5s, INP ≤ 200ms, CLS ≤ 0,1, medidos no 75º percentil de carregamentos de página.

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

Monitore dados de campo continuamente e execute auditorias de laboratório após grandes mudanças. Uma revisão mensal é uma boa prática.

Posso melhorar as Core Web Vitals sem redesenhar meu site?

Sim. Muitas melhorias como otimização de imagens, adiamento de scripts e definição de atributos de tamanho podem ser feitas com alterações mínimas de código.

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