Core Web Vitals: LCP, INP & CLS
Core Web Vitals are real-user metrics that measure loading performance (LCP), interactivity (INP), and visual stability (CLS). They directly impact SEO rankings and user experience. Understanding thresholds and optimization techniques is essential for modern frontend performance work.
LCP = How fast does the main content appear? INP = How responsive does the page feel when I interact? CLS = Does the page jump around annoyingly while I'm reading? Good scores mean happy users and better search rankings.
1Largest Contentful Paint (LCP)
Measures when the largest visible element (usually hero image or main text) finishes rendering. Target: < 2.5s.
<link rel="preload" as="image" href="hero.webp"> <picture> <source srcset="hero.webp" type="image/webp"> <img src="hero.jpg" width="1200" height="600" alt="Hero"> </picture>
2Interaction to Next Paint (INP)
Measures the latency of user interactions (click, tap, keypress). Target: < 200ms. Replaces FID. Focus on breaking long tasks and minimizing main-thread work.
3Cumulative Layout Shift (CLS)
Measures unexpected layout shifts. Target: < 0.1. Prevent by reserving space for images, ads, and dynamic content.
| Property | LCP | INP | CLS |
|---|---|---|---|
| Metric | Loading performance | Interactivity / responsiveness | Visual stability |
| Target | < 2.5s | < 200ms | < 0.1 |
| Fix Focus | Image optimization, CDN, critical resource preloading | Code splitting, Web Workers, task chunking | Explicit dimensions, reserved space, font-display |
| Main Causes | Slow server, large images, render-blocking resources | Long JS tasks, heavy event handlers, third-party scripts | Unsized images, dynamic content insertion, font swaps |
LCP
Metric
Loading performance
Target
< 2.5s
Fix Focus
Image optimization, CDN, critical resource preloading
Main Causes
Slow server, large images, render-blocking resources
INP
Metric
Interactivity / responsiveness
Target
< 200ms
Fix Focus
Code splitting, Web Workers, task chunking
Main Causes
Long JS tasks, heavy event handlers, third-party scripts
CLS
Metric
Visual stability
Target
< 0.1
Fix Focus
Explicit dimensions, reserved space, font-display
Main Causes
Unsized images, dynamic content insertion, font swaps
Common questions
- ›“What are Core Web Vitals and why do they matter?”
- ›“How do you improve LCP / INP / CLS?”
- ›“Explain how you would debug poor Core Web Vitals in production.”
- ›“What is the relationship between Core Web Vitals and SEO?”
What interviewers look for
- Knowledge of the three metrics and their targets
- Practical, specific optimization techniques
- Understanding of real-user monitoring (RUM) vs lab data
- Connection to broader performance architecture (rendering, JS, images)
Short answer (60 sec)
Core Web Vitals are LCP (loading), INP (interactivity), and CLS (stability). Good thresholds: LCP < 2.5s, INP < 200ms, CLS < 0.1. Optimize images/CDN for LCP, break long tasks for INP, and reserve space for CLS.
Detailed answer (senior level)
Core Web Vitals are Google's user-centric metrics used for ranking. LCP focuses on perceived load speed, INP on responsiveness to input, and CLS on layout stability. In production, use the web-vitals library with Real User Monitoring. Lab tools like Lighthouse give directional signals, but CrUX and RUM data reflect actual user experience. Strong answers connect optimizations back to the rendering pipeline and browser behavior.
- Optimizing only Lighthouse scores instead of real-user metrics
- Forgetting to set explicit width/height on images
- Running heavy work in main-thread event handlers
- Not reserving space for dynamic ads or injected content
- Ignoring font loading strategies (FOIT/FOUT)
- ✓LCP < 2.5s, INP < 200ms, CLS < 0.1 are the targets
- ✓Optimize images, use CDN, and preload critical resources for LCP
- ✓Break long tasks, defer JS, and use Web Workers for INP
- ✓Reserve space with dimensions and placeholders for CLS
- ✓Measure real users with web-vitals library + RUM
- ✓Core Web Vitals directly influence SEO rankings and user satisfaction
Related web fundamentals topics
Continue with closely related browser and frontend engineering concepts.