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

Seus usuários são impacientes. Se o seu site demora mais de alguns segundos para carregar, eles saem. Os mecanismos de busca também percebem: as Core Web Vitals são sinais de classificação. Mas melhorá-las parece um labirinto de métricas e ferramentas. Este guia corta o ruído. Você aprenderá o que cada métrica significa, como medi-la com precisão e passos concretos para melhorá-la.

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: abaixo de 2,5 segundos.
• Interaction to Next Paint (INP): Com que rapidez a página responde à entrada do usuário. Meta: abaixo de 200 milissegundos.
• Cumulative Layout Shift (CLS): Quanto o layout se desloca durante o carregamento. Meta: abaixo de 0,1.

Essas métricas são medidas a partir de sessões reais de usuários (dados de campo) e testes sintéticos (dados de laboratório). Os dados de campo são o que importa para classificação.

Como medir as Core Web Vitals

Você precisa de dados de laboratório e de campo. Os dados de laboratório ajudam a depurar; os dados de campo refletem a experiência real do usuário.

Ferramentas de laboratório

• Lighthouse no Chrome DevTools: Execute uma auditoria para obter pontuações e oportunidades.
• PageSpeed Insights: Combina dados de laboratório e de campo para uma URL.
• WebPageTest: Análise avançada de cascata.

Ferramentas de campo

• Chrome User Experience Report (CrUX): Dados reais de usuários do Chrome, disponíveis via PageSpeed Insights ou BigQuery.
• Biblioteca JavaScript web-vitals: Colete métricas de seus próprios usuários e envie para sua análise.

Para coletar dados de campo, adicione a biblioteca web-vitals ao seu site:

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

Isso fornece um fluxo contínuo de métricas reais de usuários.

Melhorando o LCP

O LCP geralmente é a maior imagem, vídeo ou bloco de texto. Para melhorá-lo, concentre-se no caminho crítico.

1. Otimize imagens: Comprima imagens, use formatos modernos como WebP ou AVIF e defina largura e altura explícitas. Ferramentas como o Image Compressor podem ajudar a reduzir o tamanho do arquivo sem perda visível de qualidade.
2. Pré-carregue o recurso LCP: Adicione <link rel="preload"> para a imagem principal ou fonte.
3. Reduza o tempo de resposta do servidor: Use um CDN, ative o cache e otimize consultas de backend.
4. Elimine recursos que bloqueiam a renderização: Incorpore CSS crítico, adie JavaScript não crítico.
5. Use imagens responsivas: Sirva imagens com tamanhos apropriados com srcset.

Exemplo de pré-carregamento de uma imagem LCP:

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

Melhorando o INP

O INP mede a capacidade de resposta. Tarefas longas bloqueiam a thread principal, atrasando o feedback visual.

• Divida tarefas longas: Use setTimeout ou requestIdleCallback para ceder à thread principal.
• Otimize manipuladores de eventos: Aplique debounce ou throttle em manipuladores caros.
• Reduza o JavaScript: Remova código não utilizado, faça code-split e lazy-load de módulos não críticos.
• Use web workers para cálculos pesados.
• Evite tamanhos grandes de DOM: Mantenha o DOM abaixo de 1.500 nós.

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

O CLS acontece quando elementos se deslocam inesperadamente. Causas comuns: imagens sem dimensões, anúncios, incorporações e conteúdo injetado dinamicamente.

• Sempre defina largura e altura em imagens e vídeos.
• Reserve espaço para anúncios e incorporações usando CSS aspect-ratio ou contêineres fixos.
• Evite inserir conteúdo acima do conteúdo existente a menos que seja acionado por interação do usuário.
• Use font-display: optional para evitar deslocamentos na troca de fontes, ou pré-carregue fontes.
• Aplique animações com transform em vez de propriedades que acionam layout.

Exemplo de reservar espaço para uma imagem:

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

Ferramentas e fluxo de trabalho

Integre verificações de desempenho ao seu fluxo de trabalho de desenvolvimento:

• Execute o Lighthouse no CI para capturar regressões.
• Use web-vitals para monitorar dados de campo e configurar alertas.
• Analise logs do servidor para identificar endpoints lentos. O Nginx Log Analyzer pode ajudar a identificar requisições lentas e erros.
• Teste em dispositivos reais e redes com limitação.

Comparação de métricas e metas

FAQ

O que são Core Web Vitals?

Core Web Vitals são três métricas—LCP, INP e CLS—que medem carregamento, interatividade e estabilidade visual. São usadas pelo Google como sinais de classificação.

Como medir as Core Web Vitals?

Use ferramentas de laboratório como o Lighthouse para depuração e ferramentas de campo como a biblioteca web-vitals ou o CrUX para dados reais de usuários. Ambas são importantes.

O que é uma boa pontuação de LCP?

Um bom LCP é abaixo de 2,5 segundos. Qualquer coisa acima de 4 segundos é ruim. Otimize imagens, pré-carregue recursos críticos e reduza o tempo de resposta do servidor.

Pronto para acelerar seu site? Comece comprimindo suas imagens com nosso Image Compressor gratuito para melhorar instantaneamente o LCP.