TryQuickToolBox

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

Web2026-11-09TryQuickToolBox

Você construiu um aplicativo web moderno, mas os usuários reclamam que parece lento. As classificações de pesquisa também podem ser afetadas. As Core Web Vitals (CWV) são as métricas do Google para a experiência do usuário: Largest Contentful Paint (LCP), Interaction to Next Paint (INP) e Cumulative Layout Shift (CLS). Este guia mostra como medi-las com precisão e melhorá-las efetivamente.

O que são Core Web Vitals?

As Core Web Vitals são três métricas que quantificam aspectos-chave da experiência do usuário:

Essas métricas são medidas em campo (de usuários reais) e em laboratório (em ambientes controlados). Ambas importam.

Como medir as Core Web Vitals

Você precisa de dados de campo e de laboratório para diagnosticar problemas.

Dados de campo (Monitoramento de usuários reais)

Os dados de campo refletem as experiências reais dos usuários em dispositivos e redes. Use estas fontes:

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 (Teste sintético)

Ferramentas de laboratório simulam o carregamento em um ambiente controlado, tornando-as ótimas para depuração e integração com CI.

Melhor prática: Use dados de laboratório para identificar correções e dados de campo para validar o impacto.

Melhorando o Largest Contentful Paint (LCP)

O LCP geralmente é dominado pela imagem principal ou por um grande bloco de texto. Otimize estes:

  1. Otimize o recurso LCP: Comprima imagens (use WebP/AVIF), sirva tamanhos responsivos com srcset e pré-carregue a imagem LCP se for crítica.
  2. Elimine recursos que bloqueiam a renderização: Coloque o CSS crítico inline, adie CSS e JavaScript não críticos.
  3. Melhore o tempo de resposta do servidor (TTFB): Use um CDN, ative o cache e otimize consultas de backend.
  4. Reduza a renderização do lado do cliente: Para SPAs, considere renderização do lado do servidor (SSR) ou geração estática para a visualização inicial.

Exemplo: Pré-carregue a imagem LCP:

<link rel="preload" as="image" href="/hero.avif" imagesrcset="/hero-480.avif 480w, /hero-800.avif 800w" imagesizes="(max-width: 600px) 480px, 800px">

Melhorando o Interaction to Next Paint (INP)

O INP mede o atraso entre uma interação do usuário e a próxima pintura. Tarefas longas e JavaScript pesado são culpados comuns.

  1. Divida tarefas longas: Use setTimeout, requestIdleCallback ou a API scheduler para ceder à thread principal.
  2. Otimize manipuladores de eventos: Aplique debounce ou throttle em manipuladores caros; evite layout thrashing.
  3. Reduza o tempo de execução do JavaScript: Faça code-splitting, tree-shaking e adie scripts não críticos.
  4. Use web workers para trabalho intensivo de CPU.

Exemplo: Ceda à thread principal:

async function yieldToMain() {
  if ('scheduler' in window && 'yield' in scheduler) {
    return scheduler.yield();
  }
  return new Promise(resolve => setTimeout(resolve, 0));
}

async function handleClick() {
  // ... faça algum trabalho
  await yieldToMain();
  // ... continue
}

Melhorando o Cumulative Layout Shift (CLS)

O CLS ocorre quando elementos se deslocam inesperadamente. Previna-o:

Exemplo: Reserve espaço para um anúncio:

<div>
  <!-- o anúncio carrega aqui -->
</div>

Ferramentas e fluxo de trabalho para melhoria contínua

Desempenho não é uma correção única. Integre a medição ao seu fluxo de trabalho:

Para uma verificação rápida, execute sua página no PageSpeed Insights; ele combina dados de laboratório e de campo.

Perguntas frequentes

Quais são os limites atuais para as Core Web Vitals?

LCP: bom ≤2,5s, precisa melhorar ≤4s, ruim >4s. INP: bom ≤200ms, precisa melhorar ≤500ms, ruim >500ms. CLS: bom ≤0,1, precisa melhorar ≤0,25, ruim >0,25.

Com que frequência os dados do CrUX são atualizados?

Os dados do CrUX são atualizados diariamente, mas o conjunto de dados reflete uma janela móvel de 28 dias. O Search Console é atualizado periodicamente.

Posso melhorar as Core Web Vitals sem alterar meu design?

Sim. Muitas melhorias são técnicas: otimizar imagens, adiar scripts, reservar espaço para conteúdo dinâmico e reduzir o trabalho na thread principal.

Pronto para analisar o desempenho do seu site? Use nosso analisador de logs do Nginx para identificar respostas lentas do servidor que impactam o TTFB e o LCP.