Core Web Vitals have been a confirmed Google ranking factor since 2021 — and in 2026 they carry more weight than ever. Yet more than half of all websites still fail at least one metric. LCP over 4 seconds, CLS that shifts content as the page loads, sluggish interactivity — each one is both a user experience problem and a rankings problem. This practical guide gives you the specific, platform-by-platform fixes for every Core Web Vitals failure, with before/after results from real sites.
Related: View Technical SEO Services →
Understanding the Three Core Web Vitals Metrics
| Metric | What It Measures | Good | Poor |
|---|---|---|---|
| LCP (Largest Contentful Paint) | How long the largest visible element takes to load | < 2.5s | > 4s |
| INP (Interaction to Next Paint) | How quickly the page responds to user interactions | < 200ms | > 500ms |
| CLS (Cumulative Layout Shift) | How much visible content shifts unexpectedly during load | < 0.1 | > 0.25 |
These metrics are measured from real user data (Chrome User Experience Report) and also from lab data in PageSpeed Insights. Google uses the 75th percentile of real-user data to determine your Core Web Vitals assessment — meaning at least 75% of your page loads must pass each threshold.
How to Fix LCP (Largest Contentful Paint)
Step 1: Identify Your LCP Element
Open PageSpeed Insights for your URL. In the diagnostics, find ‘Largest Contentful Paint element’ — it’s usually your hero image, H1 text, or a large background image.
Step 2: Optimise the LCP Image
If your LCP element is an image (most common):
- Compress to under 80KB using WebP or AVIF format
- Add
fetchpriority="high"attribute to the LCP image tag - Add
<link rel="preload" as="image" href="hero.webp">in your <head> - Serve from a CDN edge node close to your users
- Remove lazy loading from the LCP image (lazy loading delays it)
Step 3: Eliminate Render-Blocking Resources
CSS and JS that blocks rendering delays LCP. Add defer to non-critical JS. Inline critical CSS (the styles needed for above-the-fold content). Use a caching plugin that handles this automatically (WP Rocket, LiteSpeed Cache).
WordPress-Specific LCP Fixes
In WP Rocket: enable ‘Preload’ → ‘Preload Links’, enable ‘Media’ → ‘LazyLoad’ (but exclude the LCP image), and enable ‘File Optimisation’ → ‘Defer JavaScript execution’. In Yoast SEO or Rank Math, use the preload hint for your hero image.
How to Fix CLS (Cumulative Layout Shift)
The Most Common CLS Causes
- Images without dimensions — browser reserves no space before image loads, causing shift when it arrives
- Late-loading ads — ad slots that inject content above existing page elements
- Web fonts causing FOIT/FOUT — text reflow when a web font replaces the fallback font
- Dynamically injected content — cookie banners, chat widgets, newsletter popups that push content down
Image Dimension Fix
Add explicit width and height attributes to every image tag: <img src="photo.jpg" width="800" height="600">. This tells the browser exactly how much space to reserve before the image loads, preventing layout shift.
Font Loading Fix
Use font-display: swap in your @font-face declarations, preload your primary web font, and choose a system font with similar metrics as your fallback to minimise text reflow.
Reserved Space for Dynamic Elements
Cookie banners and chat widgets should load in reserved containers with fixed heights, or be positioned as overlays (fixed/sticky) that don’t push page content down.
How to Fix INP (Interaction to Next Paint)
INP replaced FID (First Input Delay) as a Core Web Vital in March 2024. It measures the full interaction latency — from click/tap to the next visual update.
Primary Causes of Poor INP
- Heavy JavaScript executing on the main thread
- Long tasks blocking the browser from responding to interactions
- Third-party scripts (chat widgets, ad scripts, analytics) blocking main thread
- Large DOM size making rendering updates expensive
Fixes
- Defer or remove heavy third-party scripts — audit scripts with Chrome DevTools Performance tab. Load non-essential scripts asynchronously.
- Break up long tasks — JavaScript tasks over 50ms block the main thread. Use code splitting and yield to the main thread with
setTimeout(() => {}, 0)patterns. - Reduce DOM size — pages with 1,500+ DOM elements have slower rendering. Simplify your page structure and lazy-render off-screen content.
How to Measure and Monitor Core Web Vitals
Use these tools to track your Core Web Vitals progress:
- PageSpeed Insights — combines lab data (Lighthouse) and real-user data (CrUX) for any URL. Use this for page-by-page diagnosis.
- Google Search Console → Core Web Vitals report — shows real-user data across your entire site, grouped by URL pattern. Shows Good/Needs Improvement/Poor status.
- Chrome DevTools → Performance panel — for deep-dive debugging of specific interactions and rendering issues.
- web-vitals JS library — install on your site to collect real-user CWV data in your own analytics.
After making fixes, allow 28 days for the CrUX data to update before checking your GSC Core Web Vitals report for improvement.
Frequently Asked Questions
Do Core Web Vitals directly affect Google rankings?
Yes. Core Web Vitals are a confirmed Google ranking factor as part of the Page Experience signal. However, they are a tiebreaker — highly relevant content with poor CWV can still outrank less relevant content with perfect CWV. Fix CWV to remove a rankings ceiling, but don’t prioritise speed over content quality.
How do I check my Core Web Vitals?
Use PageSpeed Insights (pagespeed.web.dev) for individual URL analysis, and Google Search Console’s Core Web Vitals report for site-wide assessment. GSC shows real-user data while PageSpeed Insights shows both lab data and real-user data. Both are needed for a complete picture.
What is a good LCP score?
LCP under 2.5 seconds is ‘Good’ according to Google’s thresholds. 2.5–4 seconds is ‘Needs Improvement’. Over 4 seconds is ‘Poor’. Most improvements focus on hero image optimisation, preloading the LCP element, eliminating render-blocking resources, and improving server response time.
Why does my site pass PageSpeed but fail Core Web Vitals in Search Console?
PageSpeed Insights uses lab data (simulated conditions). Google Search Console uses real-user data from Chrome users visiting your site. Real-world conditions — slower devices, varying network speeds, third-party script load times — often produce worse results than lab simulations. Address both: use PageSpeed Insights for diagnosis and GSC for tracking real-world performance.
How long after fixing Core Web Vitals will rankings improve?
Google updates CrUX data monthly. After implementing fixes, it typically takes 28–56 days for the improvements to appear in your GSC Core Web Vitals report. Ranking improvements associated with CWV fixes can appear within 4–8 weeks of Google processing the updated data.
Ready to grow your organic traffic?
Let’s build an SEO strategy that drives real revenue.