Core Web Vitals 2026 Explained
LCP, INP and CLS – Google''s performance metrics matter more than ever in 2026. What they mean, how they''re measured, how to bring them into the green.
Since 2021, Core Web Vitals have been an official Google ranking factor. Since 2024, INP has replaced FID, and 2025+ they apply increasingly to desktop too. Anyone running a site with red Web Vitals in 2026 is leaving SEO potential on the table – and losing conversions.
The three Core Web Vitals at a glance
| Metric | Measures | Good | Needs work | Poor |
|---|---|---|---|---|
| LCP | When largest content block becomes visible | ≤ 2.5 s | ≤ 4.0 s | > 4.0 s |
| INP | Response speed to clicks/keys | ≤ 200 ms | ≤ 500 ms | > 500 ms |
| CLS | Visual stability (layout jumps) | ≤ 0.1 | ≤ 0.25 | > 0.25 |
LCP: Largest Contentful Paint
Measures when the largest visible content block renders – usually the hero image or main heading.
Common LCP issues
- Huge uncompressed hero images (4 MB JPG)
- Render-blocking CSS with 200+ KB Tailwind/Bootstrap
- Slow server with TTFB > 800 ms
- Web fonts without font-display: swap
- Lazy-loading the LCP element (paradoxically delays it)
Fixes
- WebP/AVIF images, max 200 KB hero
- Preload LCP element:
<link rel="preload" as="image"> - Critical CSS inline, rest async
- Fast hosting: EU servers, HTTP/3, CDN
- SSR or SSG instead of pure client-side React/Vue
INP: Interaction to Next Paint
Replaced FID in March 2024. Where FID measured only the first interaction, INP looks at the worst across the visit.
Common INP issues
- Long tasks in main thread (> 50 ms blocking)
- Heavy JavaScript frameworks without code splitting
- 3rd-party scripts (tag managers, chat widgets)
- Forced reflows – repeated DOM read/write
Fixes
- Break up long tasks: setTimeout, requestIdleCallback, scheduler.yield()
- Code splitting per route
- Defer 3rd-party scripts
- Reflow batching via requestAnimationFrame
- Web workers for heavy computation
CLS: Cumulative Layout Shift
Measures visual stability – how much does the layout "jump" during loading?
Common CLS issues
- Images without width/height
- Web fonts without size-adjust
- Async-loaded ad banners without reserved space
- Cookie banners that suddenly appear
- CSS animations on layout properties (height, width, top)
Fixes
- Always set width & height on images
- aspect-ratio on iframes/videos
- Reserved containers for 3rd-party
- Cookie banner as overlay, not in document flow
- font-display: optional or size-adjust
- Animations via transform/opacity, not layout properties
Where to measure
- PageSpeed Insights – combines lab and field
- Google Search Console – field data from real users
- Chrome DevTools Lighthouse – lab data, good for debugging
- CrUX Dashboard – field data direct from Chrome User Experience Report
- web-vitals JS library – RUM on your own site
What better performance brings
Better performance doesnt just improve rankings – it directly improves conversion. Studies show every second of delay costs ~7 % conversion. For a € 100,000/year shop thats € 7,000 lost per second.
Bottom line
Core Web Vitals arent magic. With systematic steps – optimised images, clean caching, lean JS bundles, reserved containers – you can bring almost any site into the green. For deeper optimisation, a performance audit identifies your specific bottlenecks.
Edgar Oganisjan is the founder of Skins4You – a web design and online marketing agency from Graz, Austria. More about the team →