Add real-user performance monitoring

How to fix

1. 1 Enable a real-user monitoring tool (e.g. Vercel Speed Insights, SpeedCurve, or the CrUX report).
2. 2 Watch LCP, CLS, and INP trends after each release.

Fix it in your stack

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

const report = (metric) => navigator.sendBeacon('/analytics', JSON.stringify(metric));
onCLS(report);
onINP(report);
onLCP(report);

import { SpeedInsights } from '@vercel/speed-insights/next';

// inside <body>
<SpeedInsights />

Common mistakes

• • Watching only lab scores (Lighthouse, PageSpeed) and treating them as what visitors get.
• • Looking at averages, when the slowest quarter of visits (the 75th percentile Google uses) is where the problem shows.
• • Adding monitoring but never comparing before and after a release, so regressions pass unnoticed.

How to verify

1. 1 Open the monitoring dashboard and confirm it reports LCP, CLS and INP from real visits in the last few days.
2. 2 Compare the numbers to the Core Web Vitals report in Search Console or the CrUX data for the site.
3. 3 After the next release, check the trend for that day and confirm the tool shows the change.

Questions

What is real-user performance monitoring?

Measuring speed in the browsers of actual visitors, on their devices and networks, instead of in one lab test. It reports Core Web Vitals (LCP, CLS and INP) from real visits.

Is the field data in Search Console enough?

It is a start: the Core Web Vitals report shows field data from Chrome users once a site has enough traffic. It updates slowly and groups pages, so a release that slows one page is easier to see in your own monitoring.

Why does my report list this step?

A website scan cannot see this from outside. The step appears when you answer No to the question a scan asks about real-user performance monitoring, and it leaves your plan once you answer Yes on a later scan.