Core Web Vitals in 2026: a practical guide to passing all three
LCP, INP and CLS — what they actually measure, what 'good' looks like in 2026, and the exact fixes that move each metric.
Google's Core Web Vitals — Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS) — are part of the page-experience ranking signal. They're also strongly correlated with conversion: a site that fails CWV loses both rankings and revenue.
The good news: 90%+ of failing sites can pass all three by fixing the same handful of issues. This guide walks through each metric and the specific fix for each common failure mode.
LCP: Largest Contentful Paint
LCP measures when the largest visible element on screen finishes loading. Target: under 2.5s on mobile. The largest element is almost always the hero image or hero heading.
Common causes of bad LCP: oversized hero image (uploaded at 4000px wide), no image preloading, render-blocking JavaScript in the head, server response time (TTFB) over 600ms.
Fixes: serve hero as WebP at the correct size, add fetchpriority='high' to the hero image tag, preload it, defer non-critical JS, upgrade to faster hosting.
INP: Interaction to Next Paint
INP replaced FID in March 2024. It measures the time between any user interaction (tap, click, key press) and the next paint. Target: under 200ms.
Common causes: heavy JavaScript on click handlers, third-party scripts (especially chat widgets, analytics, A/B testing tools), uncontrolled long tasks.
Fixes: remove unused JS, lazy-load chat widgets after first interaction, audit analytics overhead (GTM is often the culprit), break long tasks into smaller ones.
CLS: Cumulative Layout Shift
CLS measures how much visible content jumps around as the page loads. Target: under 0.1.
Common causes: images without width/height attributes, web fonts that swap (FOUT), ads or embeds that load late and push content down, dynamically injected banners or cookie notices.
Fixes: set width and height on every image and iframe, use font-display: optional or preload fonts, reserve space for ads/embeds, render cookie banners at fixed positions (overlay, not push).
Step by step
- 01
Measure baseline with PageSpeed Insights
pagespeed.web.dev → enter your URL. Check both Lab and Field data (Field data shows real user metrics from Chrome UX Report).
- 02
Identify the LCP element
PageSpeed Insights → 'Largest Contentful Paint element' → screenshot. Usually the hero image. Note its size and format.
- 03
Optimize the LCP image
Convert to WebP. Resize to actual displayed size (usually max 1920px wide for desktop, 768px for mobile). Add fetchpriority='high'. Preload it with <link rel='preload' as='image' href='...'> in the head.
- 04
Defer non-critical JavaScript
Add 'defer' or 'async' to script tags that aren't critical. Move third-party scripts (chat, A/B testing) to load after first user interaction or after a 3-second delay.
- 05
Audit third-party scripts
PageSpeed Insights → 'Reduce the impact of third-party code'. Common offenders: GTM with 20 tags inside, Intercom, Hotjar, Optimizely. Remove anything you're not actively using.
- 06
Fix CLS: set image dimensions everywhere
Every <img> and <iframe> needs width and height attributes (the browser uses these to reserve space). Audit all theme templates.
- 07
Fix CLS: handle web fonts
Use font-display: optional in @font-face, or preload critical fonts with <link rel='preload' as='font' crossorigin>. Self-host fonts to skip the Google Fonts request.
- 08
Fix CLS: reserve space for ads and embeds
If you have ads or embeds, set min-height on their containers so they don't push content when they load.
- 09
Re-test after each fix
Don't make 10 changes at once. Fix one thing, re-test, confirm the metric moved, then move on. PageSpeed Insights uses cached data — wait 24h between major tests, or test in incognito with throttling.
- 10
Monitor field data weekly
Search Console → Core Web Vitals report. This is the real metric Google uses for ranking. Lab tests are a debugging tool; field data is what counts.
Key takeaways
- LCP under 2.5s, INP under 200ms, CLS under 0.1. These are the targets.
- The LCP element is almost always the hero image. Fix it first.
- Third-party scripts (GTM, chat, A/B) are the biggest INP killers.
- Set width/height on every image to kill CLS.
- Field data in Search Console is what Google ranks on, not lab tests.
Frequently asked questions
+How much does passing Core Web Vitals affect rankings?
Modest in isolation, but compounding. Google has confirmed CWV is one of many ranking signals. The bigger win is usually conversion — fast sites convert 15–30% better than slow sites at the same traffic.
+Do I need to pass CWV on every page?
Yes — Google measures field data per URL. A great homepage doesn't save a slow product page. Audit your top 20 trafficked pages and fix each one.
+What's the easiest platform to pass CWV on?
Framer and Squarespace 7.1 are best out-of-the-box. WordPress can match them with managed hosting + caching + image optimization, but it takes setup. Wix is competitive in 2026 if you skip heavy apps.
+Does HTTP/3 matter for CWV?
Yes, slightly. HTTP/3 (QUIC) reduces connection latency, which helps LCP and TTFB. Most managed hosts and CDNs (Cloudflare, Vercel) support it automatically.
We build sites on Squarespace, Wix, WordPress, Shopify, Webflow and Framer — from blank canvas to live domain.
Book a website call