Monitoring Vitals in Production
Setting up real user monitoring (RUM) for Core Web Vitals.
Monitoring Vitals in Production: The Ultimate Guide to Real User Monitoring (RUM)
In the modern web landscape, "fast enough" is no longer a subjective feeling—it’s a data point. While lab tests (like Lighthouse) provide a great baseline, they are essentially "controlled experiments." To understand how your application survives in the wild, you need to monitor Core Web Vitals (CWV) using Real User Monitoring (RUM).
In this guide, we’ll break down how to move from synthetic testing to production-grade observability.
Why RUM is Non-Negotiable in 2026
Synthetic monitoring (running a bot on a schedule) is like testing a car on a flat, indoor track. RUM is like tracking that same car in a rainstorm, on a potholed road, with a heavy load in the trunk.
- Variable Network Conditions: Real users experience 3G, 4G, 5G, and spotty Wi-Fi.
- Device Fragmentation: A mid-range smartphone from 2022 handles JavaScript differently than a 2026 flagship.
- nteraction to Next Paint (INP): Unlike the retired FID, INP measures responsiveness throughout the entire page lifecycle. You cannot simulate every possible user interaction in a lab; you must measure it in the wild.
Step 1: Choosing Your RUM Strategy
- You have two primary paths for setting up RUM:
1. The "Open Source" Way (Web-Vitals Library)
Google maintains the web-vitals JavaScript library. It is tiny, modular, and the most accurate way to capture the same metrics Chrome uses for its reports.
import { onLCP, onINP, onCLS } from 'web-vitals'; function sendToAnalytics(metric) { const body = JSON.stringify(metric); // Use sendBeacon to ensure data is sent even if the page is closing (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) || fetch('/analytics', { body, method: 'POST', keepalive: true }); } onLCP(sendToAnalytics); onINP(sendToAnalytics); onCLS(sendToAnalytics);
