How do you measure Core Web Vitals in a production React app?

Core Web Vitals should be measured in the field (real users) not just in lab conditions (Lighthouse), since real network/device conditions differ significantly.

1. web-vitals library

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

onLCP(console.log);
onINP(console.log);
onCLS(console.log);

Call your analytics endpoint inside these callbacks to collect real-user data.

2. Next.js built-in

// pages/_app.tsx or app/layout.tsx
export function reportWebVitals(metric: NextWebVitalsMetric) {
  console.log(metric); // { name: 'LCP', value: 1234, ... }
  // send to your analytics
}

3. Chrome User Experience Report (CrUX) — real-field data from Chrome users, aggregated by URL. Accessible via PageSpeed Insights API or Google Search Console's Core Web Vitals report.

4. Lab tools for debugging

• Lighthouse (Chrome DevTools) — simulated conditions; identifies specific elements.
• PageSpeed Insights — combines lab + field data.
• WebPageTest — detailed waterfall and filmstrip views.