Tools you need

web-vitals npm packageGoogle Analytics 4Google Tag Manager (optional)

The steps

1. 1Install web-vitals
   Run "npm install web-vitals" in your Next.js or React project. The package is tiny (under 2KB) and dependency-free.
2. 2Create a WebVitals client component
   Create a new client component that dynamically imports web-vitals and registers handlers for onCLS, onLCP, onINP, onFCP and onTTFB.
3. 3Mount it in the root layout
   Add your WebVitals component to the body of app/layout.js so it runs on every page.
4. 4Forward metrics to GA4
   Inside each handler, call window.gtag("event", metric.name, {...}) with value, metric_rating and non_interaction flags. GA4 will automatically capture it as an event.
5. 5Build a CWV report in GA4
   In GA4 Explorations, create a free-form report filtering events where name matches LCP, INP or CLS. Break down by page path to find worst offenders.
6. 6Wire alerts
   Use GA4 Insights or a Looker Studio dashboard with threshold alerts for LCP > 2.5s or CLS > 0.1. Catch regressions before they hit rankings.
7. 7Cross-check with Search Console
   After 28 days of data, compare your RUM dashboard to Google Search Console > Core Web Vitals report. These should track closely — if not, investigate page-sampling differences.

Frequently asked

• Is the web-vitals package production-safe?Yes — it is maintained by the Google Chrome team and used on millions of sites.
• Do I need GA4 specifically?No. The same events can be sent to any analytics backend — Segment, Mixpanel, PostHog, a custom endpoint.