If you’ve ever built a website that looks stunning but still loses rankings to a plainer competitor, Core Web Vitals could be the reason why.
Google uses Core Web Vitals as a direct ranking factor — and in 2025, they’ve become even harder to ignore. With the shift from FID to INP in 2024, many websites that were previously “passing” are now failing, and developers are scrambling to catch up.
In this guide, I’ll break down exactly what Core Web Vitals are, why they matter, and — most importantly — how to fix them across WordPress, Webflow, and Shopify from a real technical SEO developer’s perspective.
What Are Core Web Vitals? (And Why Google Cares)
Core Web Vitals are three user-experience metrics that Google uses to evaluate how well a page performs for real visitors. They’re part of Google’s Page Experience signals, which feed into your overall search ranking.
The three metrics are:
- LCP — Largest Contentful Paint (loading speed)
- INP — Interaction to Next Paint (interactivity)
- CLS — Cumulative Layout Shift (visual stability)
Think of them as a report card for how your website feels to use — not just how fast it loads on a speed test, but how responsive and stable it is for an actual human visitor.
Google measures these using real user data via the Chrome User Experience Report (CrUX), not just lab data. This means your real visitors’ experiences directly affect your search rankings.
The Big Change: INP Replaced FID in 2024
One of the most significant updates to Core Web Vitals happened in March 2024: First Input Delay (FID) was retired and replaced by Interaction to Next Paint (INP).
This change caught many website owners off guard. A site could have a perfect FID score but a terrible INP score — and suddenly it was failing the Core Web Vitals assessment.
Why does this matter? FID only measured the delay before the browser began processing your very first interaction. INP measures the response time of all interactions throughout the entire page session — clicks, taps, keyboard inputs, everything.
This is a much stricter standard, and it’s the reason many sites that were “passing” in 2023 are now “failing” in 2025.
The 3 Core Web Vitals Explained (With Target Scores)
1. LCP — Largest Contentful Paint
What it measures: How quickly the largest visible element on the page loads. Usually a hero image, a large heading, or a video thumbnail.
| Score | Threshold |
|---|---|
| ✅ Good | Under 2.5 seconds |
| ⚠️ Needs Improvement | 2.5 – 4.0 seconds |
| ❌ Poor | Over 4.0 seconds |
Most common causes of poor LCP:
- Unoptimized hero images (PNG instead of WebP, no compression)
- Slow server response time (TTFB)
- Render-blocking CSS or JavaScript
- No CDN in place
Quick fixes:
- Convert hero images to WebP format and compress them
- Add
rel="preload"to your above-the-fold image - Use a content delivery network (CDN)
- Upgrade to faster hosting (look for TTFB under 200ms)
- Minify and defer non-critical CSS/JS
2. INP — Interaction to Next Paint
What it measures: The time between a user’s interaction (click, tap, keyboard press) and the next visual update on screen. This is the newest and often trickiest metric.
| Score | Threshold |
|---|---|
| ✅ Good | Under 200 milliseconds |
| ⚠️ Needs Improvement | 200 – 500 milliseconds |
| ❌ Poor | Over 500 milliseconds |
Most common causes of poor INP:
- Heavy JavaScript blocking the main thread
- Large JavaScript bundles loading all at once
- Unoptimised third-party scripts (chat widgets, tracking pixels, ad scripts)
- Excessive DOM size (too many elements on the page)
Quick fixes:
- Break up long JavaScript tasks (anything over 50ms should be split)
- Defer third-party scripts that aren’t critical above the fold
- Remove unused JavaScript and plugins
- Use a tag manager to load tracking scripts asynchronously
- Reduce DOM complexity — aim for under 1,500 total DOM nodes
3. CLS — Cumulative Layout Shift
What it measures: How much page content unexpectedly moves around while loading. You’ve experienced poor CLS when you go to click a button and the page jumps — and you accidentally tap something else.
| Score | Threshold |
|---|---|
| ✅ Good | Under 0.1 |
| ⚠️ Needs Improvement | 0.1 – 0.25 |
| ❌ Poor | Over 0.25 |
Most common causes of poor CLS:
- Images without defined width and height attributes
- Ads or embeds without reserved space
- Web fonts that cause text reflow (FOUT/FOIT)
- Dynamically injected content (banners, cookie notices, popups)
Quick fixes:
- Always set
widthandheightattributes on every<img>tag - Reserve fixed dimensions for ad slots and embeds
- Use
font-display: optionalorfont-display: swapfor custom fonts - Avoid inserting content above existing page content after load
Platform-Specific Tips: WordPress, Webflow & Shopify
WordPress
WordPress is the most popular CMS but also the most prone to Core Web Vitals issues due to plugin bloat and theme overhead.
Top recommendations:
- Use a performance-optimised theme (GeneratePress, Blocksy, or a custom build)
- Install WP Rocket or NitroPack for automated performance optimisation
- Use Imagify or ShortPixel for automatic WebP conversion
- Enable object caching with Redis or Memcached on your server
- Audit and remove unused plugins — every plugin adds JavaScript and CSS overhead
- Use Google Fonts locally rather than loading from Google’s servers
Must-use plugins for CWV:
- WP Rocket (caching, minification, lazy loading)
- Cloudflare (CDN + security)
- Imagify (image optimization)
Webflow
Webflow gives you cleaner code by default, but there are still several common CWV pitfalls.
Top recommendations:
- Enable Webflow’s built-in image compression and lazy loading
- Avoid loading heavy Lottie animations above the fold
- Minimise the use of third-party embed codes
- Use Webflow’s Asset Manager to host fonts locally
- Reduce interaction complexity on load — defer non-essential animations
Shopify
Shopify stores often struggle with INP due to heavy theme JavaScript and multiple third-party apps.
Top recommendations:
- Audit your installed apps — each one may be injecting scripts
- Use Shopify’s Online Store Speed Report as a baseline
- Switch to a lightweight theme like Dawn (Shopify’s default) if on a heavy theme
- Lazy load product images below the fold
- Preload the largest above-the-fold product image on collection/product pages
Tools to Measure Your Core Web Vitals
You can’t fix what you don’t measure. Here are the tools I use in every technical SEO audit:
| Tool | What It’s Best For |
|---|---|
| Google PageSpeed Insights | Free, shows lab + field data, gives specific fix recommendations |
| Google Search Console | Real CrUX data for your actual visitors, grouped by “Good/Needs Improvement/Poor” |
| Screaming Frog | Bulk audit across all pages, useful for finding patterns |
| Chrome DevTools (Lighthouse) | Deep-dive diagnostics, local testing without analytics noise |
| web.dev/measure | Clean PageSpeed wrapper with detailed explanations |
Pro tip: Always prioritise your Google Search Console Core Web Vitals report over PageSpeed Insights. GSC uses real visitor data. PageSpeed uses simulated lab data. They often give different results — and Google ranks you based on real data.
Real-World Example: Center for Lean Excellence Redesign
During the Center for Lean Excellence website redesign, the existing site had significant Core Web Vitals issues — primarily a slow LCP caused by an unoptimised banner image and render-blocking theme scripts.
Key fixes applied:
- Hero image converted from JPEG to WebP, compressed from 1.2MB to 87KB
- Image preloaded with
<link rel="preload">in the document<head> - Removed 4 unused plugins that were injecting JavaScript on every page
- Enabled object caching and configured Cloudflare CDN
- Set explicit
width/heighton all content images to eliminate CLS
Result: LCP improved from 5.8s to 1.9s, CLS dropped from 0.31 to 0.04, and the site moved from “Poor” to “Good” across all three Core Web Vitals metrics.
Core Web Vitals 2026 Checklist
Use this as a quick reference before you launch any new project:
LCP
- Hero image is WebP format and under 150KB
- Hero image has
rel="preload"in<head> - TTFB is under 200ms (check server/hosting)
- No render-blocking CSS above the fold
INP
- No JavaScript tasks over 50ms on page load
- Third-party scripts loaded asynchronously or deferred
- DOM node count under 1,500
- Unused JavaScript removed or deferred
CLS
- All
<img>tags have explicitwidthandheight - Ad slots have reserved dimensions
- Custom fonts use
font-display: swaporoptional - No above-fold content injected after page load
Frequently Asked Questions
What is a good Core Web Vitals score?
Good scores are LCP under 2.5s, INP under 200ms, and CLS under 0.1. All three metrics need to be in the “Good” range for a page to pass the Core Web Vitals assessment.
What replaced FID in Core Web Vitals?
INP (Interaction to Next Paint) replaced FID (First Input Delay) in March 2024. INP is stricter because it measures all interactions throughout a page session, not just the first one.
How do I fix LCP on WordPress?
Start by optimising your hero image — convert to WebP, compress it, and add a preload tag. Then check your hosting speed and consider adding a CDN like Cloudflare. Plugins like WP Rocket can automate many fixes.
Does Core Web Vitals affect Google ranking?
Yes. Core Web Vitals are part of Google’s Page Experience ranking signals. Poor scores won’t necessarily tank your rankings on their own, but when two pages are otherwise equal, the one with better Core Web Vitals scores will rank higher.
Final Thoughts
Core Web Vitals aren’t going away — if anything, Google continues to weight user experience signals more heavily each year. The good news is that most CWV issues are fixable with the right knowledge and the right tools.
If your site is struggling to pass the Core Web Vitals assessment — whether it’s on WordPress, Webflow, Shopify, or a custom build — the fixes above cover the vast majority of real-world issues I encounter in technical SEO audits.
Need help with your site’s Core Web Vitals? I offer technical SEO audits and performance optimisation as part of my web development work. Get in touch and let’s take a look at your site together.
