Measuring and Optimizing Core Web Vitals in Production

1// app/components/WebVitalsReporter.tsx
2'use client';
3
4import { useReportWebVitals } from 'next/navigation';
5
6export function WebVitalsReporter() {
7  useReportWebVitals((metric) => {
8    // Metrics tracked: LCP, INP, CLS, FCP, TTFB
9    const body = JSON.stringify({
10      id: metric.id,           // Unique ID for the metric occurrence
11      name: metric.name,       // 'LCP' | 'INP' | 'CLS' | 'FCP' | 'TTFB'
12      value: metric.value,     // Calculated performance value
13      rating: metric.rating,   // 'good' | 'needs-improvement' | 'poor'
14      pathname: window.location.pathname,
15    });
16
17    // Use navigator.sendBeacon to ensure data is transmitted
18    // even if the user navigates away or closes the tab!
19    const url = '/api/telemetry/vitals';
20    if (navigator.sendBeacon) {
21      navigator.sendBeacon(url, body);
22    } else {
23      fetch(url, { body, method: 'POST', keepalive: true });
24    }
25  });
26
27  return null;
28}