Real User Monitoring and Web Vitals

Google's web-vitals npm package provides a simple API for measuring Core Web Vitals in real user browsers. Install it with npm install web-vitals and import individual metric callbacks: onLCP, onFID (deprecated), onCLS, onFCP, onTTFB, and the modern onINP for Interaction to Next Paint.

Each callback (onLCP, onCLS, onINP, etc.) receives a metric object containing: name ('LCP'), value (milliseconds or unitless score), rating ('good', 'needs-improvement', 'poor'), and id (a unique identifier for deduplication). The callback fires once the metric value is finalized.