Medindo os Core Web Vitals em aplicativos React
Use Lighthouse, WebPageTest e a biblioteca web-vitals para coletar as pontuações de LCP, INP e CLS.
Medindo os Core Web Vitals em aplicativos React é uma aula grátis de React Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 4 aulas no total.
O que são as métricas essenciais da Web?
As métricas essenciais da Web são métricas de experiência do usuário do Google que afetam a classificação de SEO: LCP (maior renderização de conteúdo — carregamento), INP (interação até a próxima renderização — capacidade de resposta) e CLS (deslocamento cumulativo de layout — estabilidade visual).
Limites recomendados
Valores desejados: LCP ≤ 2.5s, INP ≤ 200ms, CLS ≤ 0.1. Valores acima do limite de desempenho ruim (LCP > 4s, INP > 500ms, CLS > 0.25) prejudicam significativamente a experiência do usuário e o SEO.
Biblioteca web-vitals
O pacote npm web-vitals mede as métricas essenciais da Web em navegadores reais por meio de uma API simples.
npm install web-vitals
import { onCLS, onINP, onLCP } from 'web-vitals';
onCLS(metric => console.log('CLS:', metric.value));
onINP(metric => console.log('INP:', metric.value));
onLCP(metric => console.log('LCP:', metric.value));Envio das métricas para análise
Envie as métricas para seu endpoint de análise para realizar o monitoramento de usuários reais (RUM) — o Lighthouse mede o desempenho em laboratório, mas o RUM mostra o que os usuários reais vivenciam.
function sendToAnalytics(metric) {
fetch('/api/vitals', {
method: 'POST',
body: JSON.stringify(metric),
headers: { 'Content-Type': 'application/json' },
});
}
onCLS(sendToAnalytics);
onINP(sendToAnalytics);
onLCP(sendToAnalytics);Métricas integradas do Next.js
O Next.js instrumenta automaticamente as métricas essenciais da Web. Exporte uma função reportWebVitals de _app.js (Pages) ou utilize o suporte integrado do Roteador de Aplicações.
// pages/_app.js (Pages Router)
export function reportWebVitals(metric) {
if (metric.label === 'web-vital') {
console.log(metric.name, metric.value);
}
}Lighthouse no Chrome DevTools
Execute uma auditoria do Lighthouse no Chrome DevTools (guia Lighthouse) para obter medições das métricas essenciais da Web em laboratório. Utilize o modo anônimo para evitar interferências de extensões e limite a velocidade para simular um dispositivo móvel.
WebPageTest
O WebPageTest.org fornece gráficos detalhados em cascata, captura de vídeo e medições das métricas essenciais da Web em dispositivos reais de diferentes localizações geográficas — resultados mais realistas do que os do Lighthouse local.
Relatório de experiência do usuário do Chrome (CrUX)
O conjunto de dados CrUX do Google agrega dados reais das métricas essenciais da Web de milhões de sites. Acesse-o pelo Google Search Console, pelo PageSpeed Insights ou pela API do CrUX.
PerformanceObserver para LCP
Utilize a API nativa PerformanceObserver para observar entradas de LCP e entender qual elemento corresponde à maior renderização de conteúdo.
const po = new PerformanceObserver(entries => {
for (const entry of entries.getEntries()) {
console.log('LCP element:', entry.element, 'time:', entry.startTime);
}
});
po.observe({ type: 'largest-contentful-paint', buffered: true });Depuração de CLS
Utilize as regiões de deslocamento de layout do Chrome DevTools (no painel Rendering) para destacar, com sobreposições vermelhas, os elementos que causam deslocamentos de layout.
Dados de atribuição
A biblioteca web-vitals fornece dados de atribuição que identificam o que causou a métrica ruim — o elemento de LCP, a interação de INP ou o elemento que causou o CLS.
onLCP(metric => {
const { element, url } = metric.attribution.lcpEntry;
console.log('LCP element:', element);
}, { reportAllChanges: true });Verificação rápida
Qual métrica essencial da Web mede a capacidade de resposta — especificamente, a rapidez com que a página responde às interações do usuário?
Recapitulação
Meça as métricas essenciais da Web com a biblioteca web-vitals ou com o Lighthouse. Envie as métricas para seu sistema de análise para monitorar usuários reais. Busque LCP ≤ 2.5s, INP ≤ 200ms e CLS ≤ 0.1. Utilize dados de atribuição para identificar os elementos ou as interações específicos que causam pontuações ruins.
Perguntas Frequentes
A aula “Medindo os Core Web Vitals em aplicativos React” é grátis?
Sim — o texto completo de “Medindo os Core Web Vitals em aplicativos React” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 4 aulas no total.
O que vou aprender em “Medindo os Core Web Vitals em aplicativos React”?
Use Lighthouse, WebPageTest e a biblioteca web-vitals para coletar as pontuações de LCP, INP e CLS. Você pratica React Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar React Academy?
Nenhuma experiência prévia é necessária. React Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.
Quanto tempo leva a aula “Medindo os Core Web Vitals em aplicativos React”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de React Academy?
Sim. Cada aula de React Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Medindo os Core Web Vitals em aplicativos React
- Análise do pacote e estratégia de divisão de código
- Otimização de imagens e fontes no React
- Reduzindo o INP: otimização de manipuladores de eventos