Core Web Vitals 2026: Complete Guide to LCP, INP & CLS

Core Web Vitals affect rankings and user experience. Here is what each metric measures, how to fix common failures, and which tools actually help.

Core Web Vitals (CWV) are Google's page-experience metrics. They're a confirmed ranking factor (modest but real), and — more importantly — they directly affect bounce rate, conversion rate, and ad-spend efficiency. Fix them.

The three metrics

LCP — Largest Contentful Paint

What: Time until the largest visible content element finishes rendering.
Target: < 2.5 seconds (good), 2.5-4s (needs improvement), > 4s (poor).
Why: Approximates "perceived load time" — how long does the page feel slow?

INP — Interaction to Next Paint

What: The longest delay between a user interaction (tap, click) and the next paint. Replaced FID in March 2024.
Target: < 200ms (good), 200-500ms (needs improvement), > 500ms (poor).
Why: Measures responsiveness across the entire visit, not just first interaction.

CLS — Cumulative Layout Shift

What: How much elements move around while the page loads.
Target: < 0.1 (good), 0.1-0.25 (needs improvement), > 0.25 (poor).
Why: Layout shifts cause mistaps, ad clicks on the wrong element, and a janky feel.

How to measure

Two complementary data sources:

Field data (CrUX)

Real users, real conditions. Google's Chrome User Experience Report. Available in:

• Google Search Console → Core Web Vitals report
• PageSpeed Insights (field data tab)
• CrUX Dashboard in Google Data Studio

This is what Google uses for ranking. Lab tests can mislead.

Lab data (synthetic)

Controlled environment, useful for debugging. Tools:

• PageSpeed Insights (lab tab)
• Lighthouse (Chrome DevTools)
• WebPageTest.org

Lab data is reproducible but doesn't reflect real-user device/network mix.

Common LCP fixes

• Slow server response. TTFB > 600ms is the most common cause. Move to a faster host (Cloudflare Pages, Vercel, decent VPS).
• Render-blocking resources. CSS/JS loaded synchronously delays the LCP element. Inline critical CSS, defer non-critical, async third-party scripts.
• Large hero images. Compress to WebP/AVIF, serve at the right size, use fetchpriority="high" on the LCP image.
• Client-side rendering. If your LCP element is rendered by JavaScript, you're fighting an uphill battle. Use SSR or SSG.
• Web fonts. Use font-display: swap and preload critical font files.

Common INP fixes

• Long JavaScript tasks. Tasks > 50ms block the main thread. Break them up with setTimeout or scheduler.yield().
• Heavy event handlers. Click/tap handlers that do too much work synchronously. Debounce / throttle / move work to web workers.
• Third-party scripts. Ads, chat widgets, analytics — they all add main-thread work. Audit each one; defer or remove the slow ones.
• Hydration cost (frameworks). React/Vue/Svelte hydration can block input. Use partial / progressive hydration if available.

Common CLS fixes

• Images without dimensions. Always set width and height attributes (or CSS aspect-ratio). The browser then reserves space.
• Ads / iframes without reserved space. Use min-height containers so injected content doesn't push everything down.
• Web fonts (FOUT). If a font swaps mid-render, text reflows. Preload critical fonts; use size-adjust CSS.
• Cookie banners / notifications. Don't inject above existing content. Use overlays or bottom positioning.
• Dynamic content injection above existing content. Never. Either reserve space or inject below.

Quick wins (in order)

1. Compress images to WebP. Set width + height. (Usually fixes CLS + LCP in one shot.)
2. Add loading="lazy" to below-fold images.
3. Add fetchpriority="high" to the LCP image.
4. Defer non-critical CSS and async non-critical JS.
5. Audit third-party scripts; remove or defer the worst offenders.
6. Move to a faster host if TTFB > 600ms.

The 80/20 of CWV

For most sites, four changes get you from "needs improvement" to "good":

• WebP images with width/height attributes
• Critical CSS inlined
• Third-party scripts deferred
• Decent hosting (TTFB < 300ms)

Do those four and you'll pass CWV on 80% of pages without touching anything else.

Audit your CWV

Our €50 SEO Audit includes a full CWV breakdown with specific fixes per page. Implementation is quoted separately based on what we find.