Lesson 2 / 25
Core Web Vitals
Google's essential performance metrics: LCP, INP and CLS, which define user experience quality.
Largest Contentful Paint (LCP)
LCP measures when the largest visible content element loads. Target: < 2.5 seconds. Good LCP indicates that the main content appears quickly, improving perceived performance.
Interaction to Next Paint (INP)
INP measures how quickly the page responds to user interactions (clicks, taps, key presses) across the whole visit. Target: ≤ 200ms. It replaced First Input Delay (FID) as a Core Web Vital in March 2024.
Cumulative Layout Shift (CLS)
CLS measures unexpected layout changes. Target: < 0.1. Prevent elements from suddenly moving, which frustrates users and breaks interactions.
Monitoring Core Web Vitals
Use the web-vitals library: import {onCLS, onINP, onLCP} from 'web-vitals'. Google CrUX (Chrome User Experience Report) provides real-user data. Track these metrics in your analytics.
Quick check
Quick check: What does CLS measure?
- Page load time
- Input response time
- Unexpected layout changes
- Server response time
Answer
Unexpected layout changes — CLS scores how much visible content shifts unexpectedly while the page loads.