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

Por que as Core Web Vitals são importantes para o seu site

Você provavelmente já ouviu falar das Core Web Vitals (CWV) — as métricas do Google para experiência do usuário. Mas se o seu site parece lento ou instável, você não está sozinho. Muitos desenvolvedores têm dificuldade em traduzir as pontuações CWV em correções concretas. Este guia mostra como medir e melhorar cada vital com passos práticos e trechos de código.

As Core Web Vitals são três métricas específicas: Largest Contentful Paint (LCP) para desempenho de carregamento, First Input Delay (FID) para interatividade e Cumulative Layout Shift (CLS) para estabilidade visual. O Google usa essas métricas como sinais de ranking, então otimizá-las beneficia tanto os usuários quanto o SEO.

Entendendo as três Core Web Vitals

Antes de mergulhar nas correções, vamos esclarecer o que cada métrica mede e os limites para uma boa pontuação.

Nota: O FID está sendo substituído pelo Interaction to Next Paint (INP) em março de 2024, mas os princípios de otimização são semelhantes. Vamos focar no FID aqui, pois ainda é amplamente referenciado.

Como medir as Core Web Vitals

Você precisa de dados de laboratório e de campo para obter uma visão completa. Dados de laboratório (testes sintéticos) ajudam a depurar, enquanto dados de campo (monitoramento de usuários reais) mostram a experiência real do usuário.

Ferramentas de laboratório

• Lighthouse no Chrome DevTools: Execute uma auditoria na aba Lighthouse.
• PageSpeed Insights: Fornece dados de laboratório e de campo para uma URL.
• WebPageTest: Testes avançados com condições de rede personalizadas.

Ferramentas de campo

• Chrome User Experience Report (CrUX): Conjunto de dados público de métricas de usuários reais.
• Google Search Console: O relatório Core Web Vitals mostra o desempenho do grupo.
• Biblioteca JavaScript web-vitals: Colete métricas de usuários reais na sua análise.

Para coletar dados de campo, inclua a biblioteca web-vitals e envie as métricas para o endpoint da sua análise:

<script type="module">
import {onLCP, onFID, onCLS} from 'https://unpkg.com/web-vitals@3?module';

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

onLCP(sendToAnalytics);
onFID(sendToAnalytics);
onCLS(sendToAnalytics);
</script>

Isso fornece dados do mundo real para complementar os testes de laboratório.

Melhorando o Largest Contentful Paint (LCP)

O LCP mede quando o maior elemento de conteúdo (imagem, bloco de texto ou vídeo) se torna visível. Para melhorá-lo, concentre-se no tempo de resposta do servidor, no carregamento de recursos e nos recursos que bloqueiam a renderização.

1. Otimize o tempo de resposta do servidor

• Use uma CDN para servir conteúdo mais próximo dos usuários.
• Ative o cache (cabeçalhos de cache HTTP, cache do lado do servidor).
• Atualize a hospedagem se o TTFB (Time to First Byte) estiver consistentemente alto.

2. Otimize imagens

• Comprima imagens e use formatos modernos como WebP ou AVIF.
• Use imagens responsivas com srcset e sizes.
• Carregue imagens abaixo da dobra com lazy-load, mas evite lazy-load na imagem LCP.

Para compressão rápida de imagens, experimente nosso Compressor de Imagens.

3. Elimine recursos que bloqueiam a renderização

• Incorpore CSS crítico e adie CSS não crítico.
• Use async ou defer para JavaScript.
• Minifique CSS e JavaScript.

4. Pré-carregue recursos importantes

Use <link rel="preload"> para ativos principais como fontes ou imagens hero:

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

Melhorando o First Input Delay (FID)

O FID mede o tempo desde a primeira interação do usuário com sua página até quando o navegador pode responder. Tarefas longas de JavaScript bloqueiam a thread principal, causando atrasos.

1. Divida tarefas longas

Divida JavaScript de longa duração em partes menores usando setTimeout ou requestIdleCallback. Por exemplo:

function processItems(items) {
  if (items.length === 0) return;
  const item = items.pop();
  // Process item
  setTimeout(() => processItems(items), 0);
}

2. Otimize manipuladores de eventos

• Use debounce ou throttle em manipuladores de entrada.
• Evite cálculos complexos em ouvintes de eventos; transfira para Web Workers.

3. Reduza o tempo de execução de JavaScript

• Faça code-splitting com importações dinâmicas.
• Remova JavaScript não utilizado (tree shaking).
• Use loading="lazy" para iframes não críticos.

4. Use Web Workers para tarefas pesadas

Mova o trabalho intensivo de CPU para fora da thread principal:

const worker = new Worker('worker.js');
worker.postMessage(data);
worker.onmessage = (e) => { /* handle result */ };

Melhorando o Cumulative Layout Shift (CLS)

O CLS mede mudanças inesperadas de layout. Causas comuns incluem imagens sem dimensões, anúncios, incorporações e fontes web.

1. Sempre defina largura e altura em mídias

Inclua atributos width e height em imagens e vídeos, ou use aspect-ratio no CSS:

img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

2. Reserve espaço para conteúdo dinâmico

Para anúncios ou incorporações, reserve espaço com um elemento placeholder ou defina um tamanho fixo.

3. Evite inserir conteúdo acima do conteúdo existente

Se precisar inserir um banner, use uma animação de transformação ou sobreposição que não altere o layout.

4. Use font-display: swap

Evite texto invisível e mudanças de layout causadas por fontes web:

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap;
}

Monitoramento e melhoria contínua

Otimizar as Core Web Vitals não é uma tarefa única. Configure monitoramento contínuo com ferramentas como:

• Google Search Console: Alertas para regressões de CWV.
• Lighthouse CI: Execute auditorias em cada pull request.
• Real User Monitoring (RUM): Ferramentas como New Relic, Datadog ou análises personalizadas.

Revise regularmente os dados de campo e itere nas correções. Priorize a métrica com a pior pontuação primeiro.

Perguntas frequentes

O que são Core Web Vitals?

Core Web Vitals são um conjunto de métricas que o Google usa para medir a experiência do usuário: LCP (carregamento), FID (interatividade) e CLS (estabilidade visual).

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

Monitore dados de campo continuamente via Search Console ou RUM. Execute testes de laboratório após mudanças importantes e pelo menos mensalmente.

Melhorar as Core Web Vitals afeta o SEO?

Sim, as Core Web Vitals são um sinal de ranking. Melhores pontuações podem melhorar a visibilidade nos mecanismos de busca e a satisfação do usuário.

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