Lesson 2 / 25
Core Web Vitals
Google's essential performance metrics: LCP, FID, and CLS that 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.
First Input Delay (FID)
FID measures delay between user interaction and browser response. Target: < 100ms. Low FID ensures the page feels responsive and interactive.
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 web-vitals library: import {getCLS, getFID, getLCP} 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?
- Unexpected layout changes
- Page load time
- Input response time