Technical SEO

Core Web Vitals in 2026: What Every Web Developer Needs to Fix Right Now

Struggling to pass Core Web Vitals in 2026? Learn how to fix LCP, INP, and CLS on WordPress, Webflow & Shopify with real-world tips from a Technical SEO Developer.

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.

ScoreThreshold
✅ GoodUnder 2.5 seconds
⚠️ Needs Improvement2.5 – 4.0 seconds
❌ PoorOver 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.

ScoreThreshold
✅ GoodUnder 200 milliseconds
⚠️ Needs Improvement200 – 500 milliseconds
❌ PoorOver 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.

ScoreThreshold
✅ GoodUnder 0.1
⚠️ Needs Improvement0.1 – 0.25
❌ PoorOver 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 width and height attributes on every <img> tag
  • Reserve fixed dimensions for ad slots and embeds
  • Use font-display: optional or font-display: swap for 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:

ToolWhat It’s Best For
Google PageSpeed InsightsFree, shows lab + field data, gives specific fix recommendations
Google Search ConsoleReal CrUX data for your actual visitors, grouped by “Good/Needs Improvement/Poor”
Screaming FrogBulk audit across all pages, useful for finding patterns
Chrome DevTools (Lighthouse)Deep-dive diagnostics, local testing without analytics noise
web.dev/measureClean 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/height on 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 explicit width and height
  • Ad slots have reserved dimensions
  • Custom fonts use font-display: swap or optional
  • 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.

Back to Blog