TryQuickToolBox

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

Web2026-11-05TryQuickToolBox

Você construiu um site rápido, mas os usuários ainda reclamam de lentidão. Ou talvez seu ranking de SEO tenha caído após uma atualização do Google. As Core Web Vitals (CWV) provavelmente são a causa. Essas métricas medem a experiência real do usuário e impactam diretamente os rankings de busca e as taxas de conversão. Neste guia, você aprenderá o que são as CWV, como medi-las com precisão e passos práticos para melhorar cada uma delas.

O que são Core Web Vitals?

As Core Web Vitals são um conjunto de três métricas que o Google usa para quantificar a experiência do usuário:

Esses limites são baseados no 75º percentil de carregamentos de página, segmentados por celular e desktop. Portanto, você precisa garantir que 75% dos seus usuários tenham valores bons.

Como medir as Core Web Vitals

Você pode medir as CWV de duas maneiras: em laboratório (teste sintético) e em campo (monitoramento de usuários reais). Ambos são valiosos, mas os dados de campo são o que o Google usa para ranqueamento.

Dados de campo: Monitoramento de Usuários Reais (RUM)

Dados de campo vêm de usuários reais. A melhor fonte é o Chrome User Experience Report (CrUX), que alimenta o relatório Core Web Vitals no Google Search Console. Você também pode usar a biblioteca web-vitals para coletar seus próprios dados RUM e enviá-los a um endpoint de análise.

Para visualizar os dados do CrUX do seu site, use o PageSpeed Insights ou a API CrUX. Eles mostram a distribuição de LCP, INP e CLS para sua origem.

Dados de laboratório: Teste sintético

Ferramentas de laboratório simulam o carregamento de uma página em um ambiente controlado. São ótimas para depuração e integração com CI/CD. Opções populares:

Lembre-se: dados de laboratório não incluem a variabilidade do mundo real, então use-os para diagnóstico, não como preditor de ranqueamento.

Melhorando o Largest Contentful Paint (LCP)

O LCP geralmente é a métrica mais impactante de corrigir. O maior elemento costuma ser uma imagem hero, um título ou um pôster de vídeo. Para melhorar o LCP:

  1. Otimize imagens: Comprima imagens, use formatos modernos como WebP ou AVIF e sirva tamanhos responsivos com srcset. Ferramentas como o Compressor de Imagens podem ajudar a reduzir o tamanho do arquivo sem perder qualidade.
  2. Pré-carregue o recurso LCP: Adicione <link rel="preload"> para a imagem hero ou fonte para começar o carregamento mais cedo.
  3. Elimine recursos que bloqueiam a renderização: Faça inline do CSS crítico, adie o CSS não crítico e carregue JavaScript de forma assíncrona.
  4. Use uma CDN: Sirva ativos de uma rede de entrega de conteúdo para reduzir a latência.
  5. Cache agressivo: Defina tempos de vida longos de cache para ativos estáticos com cabeçalhos Cache-Control.

Exemplo de pré-carregamento de uma imagem LCP:

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

Melhorando o Interaction to Next Paint (INP)

O INP mede quão rapidamente a página responde à entrada do usuário. Um INP alto geralmente vem de tarefas JavaScript longas bloqueando a thread principal. Para melhorar o INP:

Você pode medir o INP em campo com a biblioteca web-vitals:

import {onINP} from 'web-vitals';

onINP((metric) => {
  console.log('INP:', metric.value);
  // Envie para seu endpoint de análise
});

Melhorando o Content Layout Shift (CLS)

O CLS ocorre quando elementos se movem inesperadamente durante o carregamento. Causas comuns: imagens sem dimensões, anúncios, embeds e fontes web causando FOIT/FOUT. Para melhorar o CLS:

Exemplo de reserva de espaço com CSS aspect-ratio:

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

Ferramentas e fluxo de trabalho para monitoramento contínuo

Melhorar as CWV não é uma tarefa única. Configure monitoramento contínuo:

Para uma verificação rápida, use a ferramenta HTML para Imagem para capturar instantâneos visuais da sua página em diferentes estágios, ajudando a identificar mudanças de layout manualmente.

Perguntas frequentes

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

Bom: LCP ≤ 2,5s, INP ≤ 200ms, CLS ≤ 0,1. Precisa melhorar: LCP ≤ 4s, INP ≤ 500ms, CLS ≤ 0,25. Ruim: acima desses valores.

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

Os dados do CrUX são atualizados diariamente, mas a janela móvel de 28 dias significa que as mudanças levam tempo para refletir. Para feedback mais rápido, use seu próprio RUM.

Posso melhorar as Core Web Vitals sem alterar meu design?

Sim. Muitas melhorias são técnicas: compressão de imagens, pré-carregamento, adiamento de scripts e reserva de espaço. Essas geralmente não têm impacto visual.

Pronto para otimizar suas imagens para um melhor LCP? Experimente nosso Compressor de Imagens gratuito para reduzir o tamanho dos arquivos mantendo a qualidade.