Performance12 min de leitura·Set 2026

Medindo Core Web Vitals em produção com React

Instrumentar métricas reais de usuário vai muito além de rodar o Lighthouse localmente. Veja como coletar LCP, CLS e INP diretamente do campo.

Core Web VitalsReactObservabilidadeLCP

Por que o Lighthouse local não é suficiente

O Lighthouse oferece uma fotografia do desempenho em condições controladas — rede throttled, CPU emulada, nenhum usuário real. Mas a percepção de velocidade do seu usuário real em São Paulo, às 9h, em 4G, é outra história completamente.

O Google usa dados do CrUX (Chrome User Experience Report) para rankeamento. Isso significa que a nota que importa não é a do seu laptop de desenvolvimento — é a mediana agregada dos seus usuários reais. Sem instrumentação de campo, você está operando no escuro.

Instrumentando com a web-vitals library

A biblioteca `web-vitals` do Google expõe callbacks para cada métrica assim que ela for coletada pelo browser. A API é simples: cada função recebe um objeto com `name`, `value`, `rating` e `navigationType`.

O ponto crítico é o LCP: o LCP deixa de ser atualizado na primeira interação do usuário ou quando a aba fica oculta; só então o valor é final. Capturar o valor antes desse momento gera leituras incorretas. A biblioteca cuida disso por você ao registrar o listener no evento `visibilitychange`.

// código

import { onLCP, onCLS, onINP } from 'web-vitals'

function sendToAnalytics({ name, value, rating, id }) {
  fetch('/api/vitals', {
    method: 'POST',
    body: JSON.stringify({ metric: name, value, rating, id }),
    keepalive: true, // importante: persiste após navegação
  })
}

onLCP(sendToAnalytics)
onCLS(sendToAnalytics)
onINP(sendToAnalytics)

Estratégia de amostragem para alto volume

Em produção com milhares de usuários diários, enviar cada leitura individualmente gera custo desnecessário. A estratégia recomendada é amostragem probabilística: envie apenas 10–20% das sessões para análise contínua, mas sempre 100% quando o rating for "poor".

Isso garante cobertura estatística para o percentil 75 (que é o que o Google usa) sem inflar a conta do seu serviço de analytics. Combine com alertas automáticos quando a proporção de "poor" ultrapassar um limiar definido.

Dica

O Google avalia Core Web Vitals no p75 — ou seja, 75% dos usuários precisam ter "good" para a URL ser considerada aprovada. Monitore o percentil correto, não a média.

Correlacionando vitals com conversão

A métrica que justifica investimento em performance para stakeholders não é o LCP em milissegundos — é a taxa de conversão segmentada por cohort de performance. Compare a conversão de quem teve LCP "good" com a de quem teve "poor": essa diferença é o argumento.

Adicione um cookie ou session attribute com o rating das métricas e associe-o ao seu funil de conversão. Em dois a três sprints de dados, você terá evidência concreta para priorizar otimizações de performance no roadmap.

Portodev Studio

Consultoria e engenharia digital · Set 2026

← Ver todos os conteúdos

[ Leituras relacionadas ]

Continue lendo

Para quem decide

7 min de leitura · Out 2026

Quanto custa um site lento (e como descobrir no seu caso)

Lentidão não aparece no extrato, mas aparece no funil: visita que desiste antes de carregar, formulário que não é enviado, anúncio pago que leva a uma tela em branco. Veja como medir o custo no seu site.

Ler o guia