TryQuickToolBox

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

Web2026-11-06TryQuickToolBox

Seus usuários esperam que as páginas carreguem instantaneamente, respondam sem atraso e permaneçam visualmente estáveis. As Core Web Vitals (CWV) do Google quantificam essas expectativas: Largest Contentful Paint (LCP) mede o carregamento, Interaction to Next Paint (INP) mede a interatividade e Cumulative Layout Shift (CLS) mede a estabilidade visual. Pontuações ruins de CWV prejudicam a experiência do usuário e podem afetar o ranking de busca. Este guia mostra como medir cada métrica e melhorá-las com passos práticos e amigáveis para desenvolvedores.

O que são Core Web Vitals?

Core Web Vitals são três métricas que refletem a experiência real do usuário:

Esses limites são baseados no 75º percentil de carregamentos de página, segmentados entre mobile e desktop.

Como medir as Core Web Vitals

Você precisa de dados de laboratório e de campo. Ferramentas de laboratório simulam condições; dados de campo vêm de usuários reais.

Ferramentas de laboratório

Ferramentas de campo

Instale a biblioteca web-vitals via npm ou inclua-a de um CDN e registre as métricas:

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

Use sendBeacon para evitar bloqueio no unload. Colete dados ao longo do tempo para ver tendências.

Melhorando o Largest Contentful Paint (LCP)

O LCP geralmente é a imagem hero ou o título principal. Otimize o caminho crítico:

  1. Priorize o recurso LCP: adicione fetchpriority="high" à imagem LCP ou faça preload dela.
  2. Reduza o tempo de resposta do servidor: use cache, CDN e consultas de backend eficientes.
  3. Elimine recursos que bloqueiam a renderização: adie CSS/JS não críticos, inline o CSS crítico.
  4. Otimize imagens: comprima, use formatos modernos (WebP/AVIF) e defina dimensões.
  5. Use uma CDN para servir ativos de locais próximos aos usuários.

Exemplo: faça preload da imagem LCP e defina fetchpriority:

<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
<img src="/hero.webp" alt="Hero" width="1200" height="600" fetchpriority="high">

Para compressão de imagens, experimente nosso Compressor de Imagens para reduzir o tamanho do arquivo sem perda visível de qualidade.

Melhorando o Interaction to Next Paint (INP)

O INP reflete a responsividade. Tarefas JavaScript longas bloqueiam a thread principal e atrasam o feedback visual.

  1. Divida tarefas longas: use setTimeout, requestIdleCallback ou scheduler.yield() para ceder ao navegador.
  2. Otimize manipuladores de eventos: faça debounce de entrada, evite trabalho pesado em manipuladores de clique.
  3. Reduza o JavaScript: code-split, tree-shake e adie scripts não críticos.
  4. Use web workers para trabalho intensivo de CPU.
  5. Evite grandes atualizações de DOM: agrupe alterações de DOM e use virtualização para listas longas.

Meça o INP em campo com a biblioteca web-vitals e use o painel Performance para identificar tarefas longas durante interações.

Melhorando o Cumulative Layout Shift (CLS)

O CLS acontece quando elementos se movem inesperadamente. Causas comuns: imagens sem dimensões, anúncios/embeds sem espaço reservado e fontes que carregam tarde.

  1. Sempre defina largura e altura em imagens e vídeos, ou use CSS aspect-ratio.
  2. Reserve espaço para conteúdo dinâmico (anúncios, embeds) com min-height.
  3. Use font-display: swap e faça preload de fontes principais para evitar texto invisível e deslocamentos de layout.
  4. Evite inserir conteúdo acima do conteúdo existente, a menos que seja acionado por interação do usuário.

Exemplo: defina proporção para imagens responsivas:

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

Comparação das Core Web Vitals

MétricaMedeLimite BomOtimização Principal
LCPDesempenho de carregamento≤2,5sOtimize imagens, servidor, CSS crítico
INPInteratividade≤200msReduza JS, divida tarefas longas
CLSEstabilidade visual≤0,1Defina dimensões, reserve espaço

Fluxo de trabalho prático para melhorar as CWV

  1. Meça a linha de base: execute o Lighthouse e colete dados de campo via web-vitals.
  2. Identifique gargalos: use o painel Performance e o waterfall de rede.
  3. Priorize correções: foque na métrica com a pior pontuação.
  4. Implemente mudanças: otimize imagens, adie scripts, defina dimensões.
  5. Teste e monitore: execute novamente testes de laboratório e acompanhe dados de campo ao longo do tempo.

Lembre-se de que as CWV são métricas de campo; ferramentas de laboratório ajudam a diagnosticar, mas dados de usuários reais são a fonte da verdade.

FAQ

Quais são os limites atuais para as 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. Esses são avaliados no 75º percentil de carregamentos de página.

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

Monitore dados de campo continuamente e execute auditorias de laboratório após mudanças importantes. No mínimo, revise o relatório Core Web Vitals do Search Console mensalmente e após implantações que afetem o desempenho do frontend.

Posso melhorar as Core Web Vitals sem redesenhar meu site?

Sim. Muitas melhorias são técnicas: comprimir imagens, definir atributos de largura/altura, adiar JavaScript não crítico e dividir tarefas longas. Essas mudanças frequentemente geram ganhos significativos sem redesenho visual.

Pronto para otimizar suas imagens para um melhor LCP? Use nosso Compressor de Imagens gratuito para reduzir imagens preservando a qualidade e impulsionar suas pontuações de Core Web Vitals.