Core Web Vitals 2026: The Complete Practical Guide

Core Web Vitals have been a Google ranking signal since 2021. In 2026, with Interaction to Next Paint (INP) now fully replacing First Input Delay, the bar has moved — and many sites that were passing are now failing.

This is a complete, practical guide. No fluff.

The Three Metrics That Matter


1. LCP — Largest Contentful Paint

LCP measures how long it takes for the largest visible element on the page to load. Usually this is the hero image or the main headline.

`

LCP Thresholds

────────────────────────────────

≤ 2.5 seconds ✅ Good

2.5–4.0 seconds ⚠️ Needs Improvement

4.0 seconds ❌ Poor

────────────────────────────────

`

What causes poor LCP:

• Hero image not preloaded
• Slow server response (TTFB > 800ms)
• Render-blocking CSS or JavaScript
• Images not sized correctly for the viewport

How to fix it:

Step one is always the hero image. Add fetchpriority="high" to your hero tag:

`html

src="/hero.webp"

alt="Hero image"

fetchpriority="high"

loading="eager"

width="1200"

height="600"

/>

`

Do not lazy-load the LCP image. This is the single most common mistake we see.

2. INP — Interaction to Next Paint

INP measures the worst interaction delay throughout the entire page session — clicks, taps, keyboard inputs. It replaced FID in March 2024.

`

INP Thresholds

────────────────────────────────

≤ 200ms ✅ Good

200–500ms ⚠️ Needs Improvement

500ms ❌ Poor

────────────────────────────────

`

INP is harder to fix than FID because it measures the worst interaction, not the first. A site can have a fast initial load but still fail INP due to a heavy third-party script that blocks the main thread when a button is clicked.

Common INP culprits:

• Google Tag Manager with 15+ tags firing on interaction
• Heavy React/Vue hydration
• Unoptimised event listeners
• Long tasks on the main thread blocking response

How to fix it:

Use Chrome DevTools Performance panel. Record an interaction, look for Long Tasks (> 50ms). Break them up or defer them.

`javascript

// Instead of this (blocks main thread):

btn.addEventListener('click', () => {

doExpensiveCalculation() // 300ms

updateUI()

})

// Do this (yields to browser):

btn.addEventListener('click', async () => {

await scheduler.yield() // yields control back

doExpensiveCalculation()

updateUI()

})

`

3. CLS — Cumulative Layout Shift

CLS measures unexpected visual shifts as the page loads. It is deeply annoying to users and actively penalised by Google.

`

CLS Thresholds

────────────────────────────────

≤ 0.1 ✅ Good

0.1–0.25 ⚠️ Needs Improvement

0.25 ❌ Poor

────────────────────────────────

`

What causes layout shift:

• Images without explicit width and height attributes
• Web fonts swapping in (FOUT)
• Injected banners and cookie notices
• Ads loading and pushing content down

How to fix it:

Always set explicit dimensions on images:

`html

`

For fonts, use font-display: optional or preload your fonts:

`css

@font-face {

font-family: 'Inter';

src: url('/fonts/inter.woff2') format('woff2');

font-display: swap; / or 'optional' for zero CLS /

}

`

Real-World Before & After

Here is a client audit from March 2026 — a WooCommerce store selling specialist tools:

`

Before Optimisation → After Optimisation

────────────────────────────────────────────────────────

Metric Before After Change

────────────────────────────────────────────────────────

LCP 4.8s 1.4s ▼ 71% ✅ Good

INP 390ms 140ms ▼ 64% ✅ Good

CLS 0.28 0.04 ▼ 86% ✅ Good

────────────────────────────────────────────────────────

Organic traffic +34% over following 90 days

Conversion rate +18%

`

The changes made:

1. Added fetchpriority="high" to hero image and removed lazy-load

2. Compressed and converted all product images to WebP

3. Removed 8 unused GTM tags; consolidated pixel firing

4. Added explicit width/height to all elements

5. Moved WooCommerce to a Redis-cached hosting stack

6. Preloaded the primary font

How to Measure Your Current Score

Three tools, used together:

• PageSpeed Insights — pagespeed.web.dev — real-world field data + lab scores
• Chrome DevTools — Lighthouse tab — detailed breakdown per metric
• Search Console — Core Web Vitals report — which pages are failing at scale

Important: Lab data (Lighthouse) and field data (Chrome User Experience Report) often differ. Google uses field data for ranking. Always check both.

Priority Order for Fixes

If you need to triage, tackle them in this order:

1. Fix images without width/height (quick, high CLS impact)

2. Remove render-blocking JavaScript (quick wins on LCP)

3. Optimise and preload the LCP element (biggest LCP gain)

4. Audit and reduce third-party scripts (INP + LCP)

5. Switch to a faster host or add caching (LCP + TTFB)

Most sites can reach a 'Good' score on all three metrics within two to four weeks of focused work. The sites that fail permanently are those that treat it as a one-time task rather than an ongoing discipline.