Measuring Core Web Vitals in React Apps
Use Lighthouse, WebPageTest, and the web-vitals library to collect LCP, INP, and CLS scores.
Measuring Core Web Vitals in React Apps is a free React Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
What Are Core Web Vitals?
Core Web Vitals are Google's user-experience metrics that affect SEO ranking: LCP (Largest Contentful Paint — loading), INP (Interaction to Next Paint — responsiveness), and CLS (Cumulative Layout Shift — visual stability).
Good Thresholds
Target values: LCP ≤ 2.5s, INP ≤ 200ms, CLS ≤ 0.1. Values above the 'poor' threshold (LCP > 4s, INP > 500ms, CLS > 0.25) significantly hurt user experience and SEO.
web-vitals Library
The web-vitals npm package measures CWV in real browsers with a simple API.
npm install web-vitals
import { onCLS, onINP, onLCP } from 'web-vitals';
onCLS(metric => console.log('CLS:', metric.value));
onINP(metric => console.log('INP:', metric.value));
onLCP(metric => console.log('LCP:', metric.value));Sending Vitals to Analytics
Send vitals to your analytics endpoint for real-user monitoring (RUM) — Lighthouse measures lab performance, but RUM shows what real users experience.
function sendToAnalytics(metric) {
fetch('/api/vitals', {
method: 'POST',
body: JSON.stringify(metric),
headers: { 'Content-Type': 'application/json' },
});
}
onCLS(sendToAnalytics);
onINP(sendToAnalytics);
onLCP(sendToAnalytics);Next.js Built-in Vitals
Next.js auto-instruments Core Web Vitals. Export a reportWebVitals function from _app.js (Pages) or use the App Router's built-in support.
// pages/_app.js (Pages Router)
export function reportWebVitals(metric) {
if (metric.label === 'web-vital') {
console.log(metric.name, metric.value);
}
}Lighthouse in Chrome DevTools
Run a Lighthouse audit in Chrome DevTools (Lighthouse tab) for lab-based CWV measurements. Use Incognito mode to avoid extension interference and throttle to simulate mobile.
WebPageTest
WebPageTest.org provides detailed waterfall charts, video capture, and CWV measurements from real devices in different geographic locations — more realistic than local Lighthouse.
Chrome User Experience Report (CrUX)
Google's CrUX dataset aggregates real-user CWV data for millions of websites. Access it via Google Search Console, PageSpeed Insights, or the CrUX API.
PerformanceObserver for LCP
Use the native PerformanceObserver API to observe LCP entries and understand which element is the largest contentful paint.
const po = new PerformanceObserver(entries => {
for (const entry of entries.getEntries()) {
console.log('LCP element:', entry.element, 'time:', entry.startTime);
}
});
po.observe({ type: 'largest-contentful-paint', buffered: true });CLS Debugging
Use Chrome DevTools Layout Shift Regions (in Rendering panel) to highlight elements that cause layout shifts with red overlays.
Attribution Data
The web-vitals library provides attribution data identifying what caused the poor metric — the LCP element, the INP interaction, or the CLS-causing element.
onLCP(metric => {
const { element, url } = metric.attribution.lcpEntry;
console.log('LCP element:', element);
}, { reportAllChanges: true });Quick Check
Which Core Web Vital measures responsiveness — specifically how quickly the page responds to user interactions?
Recap
Measure CWV with the web-vitals library or Lighthouse. Send metrics to your analytics for real-user monitoring. Target LCP ≤ 2.5s, INP ≤ 200ms, CLS ≤ 0.1. Use attribution data to identify the specific elements or interactions causing poor scores.
Frequently asked questions
Is the “Measuring Core Web Vitals in React Apps” lesson free?
Yes — the full text of “Measuring Core Web Vitals in React Apps” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.
What will I learn in “Measuring Core Web Vitals in React Apps”?
Use Lighthouse, WebPageTest, and the web-vitals library to collect LCP, INP, and CLS scores. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start React Academy?
No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Measuring Core Web Vitals in React Apps” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this React Academy lesson?
Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Measuring Core Web Vitals in React Apps
- Bundle Analysis & Code Splitting Strategy
- Image & Font Optimisation in React
- Reducing INP: Event Handler Optimisation