Measuring Core Web Vitals in React Apps
Use Lighthouse, WebPageTest, and the web-vitals library to collect LCP, INP, and CLS scores.
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.
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