Troubleshooting
Beginner
1 min read
276 words
Core Web Vitals Optimization: LCP, INP, and CLS
Core Web Vitals are Google's metrics for user experience: loading speed (LCP), interactivity (INP), and visual stability (CLS). Meeting the thresholds improves both rankings and user satisfaction.
Key Takeaways
- LCP measures the time until the largest visible element (usually a hero image or heading) finishes rendering.
- INP replaced FID in March 2024.
- CLS measures unexpected layout shifts during the page lifetime.
The Three Metrics
| Metric | Measures | Good | Needs Improvement | Poor |
|---|---|---|---|---|
| LCP | Largest Contentful Paint | ≤ 2.5s | 2.5 - 4.0s | > 4.0s |
| INP | Interaction to Next Paint | ≤ 200ms | 200 - 500ms | > 500ms |
| CLS | Cumulative Layout Shift | ≤ 0.1 | 0.1 - 0.25 | > 0.25 |
Optimizing LCP
LCP measures the time until the largest visible element (usually a hero image or heading) finishes rendering.
- Preload the LCP image:
- Use responsive images with
srcset - Avoid lazy-loading the LCP element
- Reduce server response time (TTFB)
- Eliminate render-blocking CSS and JS
Optimizing INP
INP replaced FID in March 2024. It measures the worst-case delay between a user interaction and the next visual update.
- Break long tasks (>50ms) into smaller chunks using
requestIdleCallbackorscheduler.yield() - Minimize main-thread JavaScript during interactions
- Debounce expensive event handlers
- Move non-critical work to web workers
Optimizing CLS
CLS measures unexpected layout shifts during the page lifetime.
- Set explicit
widthandheighton images and iframes - Reserve space for dynamic content (ads, embeds)
- Use
font-display: optionalif fonts cause layout shifts - Avoid inserting content above existing content after initial render
Measurement Tools
| Tool | Data Type | When to Use |
|---|---|---|
| PageSpeed Insights | Lab + Field | Quick checks |
| Chrome DevTools | Lab | Debugging |
| Search Console | Field (CrUX) | Monitoring trends |
| web-vitals.js | Field (RUM) | Custom monitoring |