blog / speed & technical / 12 min read
How to Improve Core Web Vitals: LCP, INP and CLS in Plain English
short answer
Core Web Vitals on one screen
02 · speed & technical
Core Web Vitals in 90 seconds
To pass, a page needs all three in "good" at the 75th percentile of real visits. In other words, three out of four visitors must get a good experience, measured separately for mobile and desktop.
Core Web Vitals are Google's way of putting numbers on "does this page feel good to use?" They're measured from real Chrome users through the Chrome UX Report, over a rolling 28-day window. That window matters: fix something today and your field data improves gradually, not overnight.
They're part of Google's page experience signals. Good scores won't push thin content past a better answer, but on competitive searches, a fast, stable page is one less reason to lose. More importantly, it's one less reason for a visitor to hit the back button.
What is FID in Core Web Vitals, and why did it disappear?
"Our FID is great, so responsiveness is solved."
FID (First Input Delay) measured only the delay before the browser could start handling a visitor's first interaction, with a good threshold of 100 ms. It ignored everything after that. In March 2024, Google replaced FID with Interaction to Next Paint as a Core Web Vital. If a tool or agency still reports FID as your responsiveness score, it's out of date.
03 · speed & technical
How to improve Core Web Vitals: start with a test that tells the truth
There are two kinds of data. Field data comes from real visitors on real phones and networks; it's what Google uses. Lab data comes from a simulated load on a test machine; it's what helps you debug. Most confusion comes from mixing them up.
My workflow: start in Search Console to see which page groups fail, run a PageSpeed Insights core web vitals test on an example URL from each group, then open DevTools to find the cause. Any core web vitals checker that only shows a lab score is telling you half the story. My Google Search Console guide explains how to read the report without panicking.
Lab data
Repeatable, instant and great for debugging. But it uses one simulated device and network, and it can't measure INP because nobody's tapping. A perfect lab score with failing field data is common.
Field data
What your actual visitors experienced, and what Google assesses. Slower to change and needs enough traffic to appear. When the two disagree, believe the field and use the lab to work out why.
Core Web Vitals Scorecard
This tool needs JavaScript to run.
04 · speed & technical
How to improve LCP (the loading metric)
LCP is the moment the biggest thing in the viewport, usually a hero image or headline, finishes rendering. If you're wondering how to improve LCP, break it into four parts: server response time, the delay before the browser discovers the hero file, the time to download it, and the delay before it's painted. Fix whichever part is biggest.
- 01
Speed up the server response — Page caching, decent hosting and a CDN. If the first byte is slow, everything after it is slow. My guide on why your WordPress site is slow covers this in depth.
- 02
Make the hero image discoverable — Use a real
<img>in the HTML, not a CSS background or something injected by JavaScript, so the browser finds it immediately. - 03
Prioritize it — Add
fetchpriority="high"to the LCP image and never lazy-load it. - 04
Shrink it — Serve a properly sized, compressed WebP or AVIF with
srcset, so phones don't download a desktop-sized file. - 05
Cut render-blocking code — Inline the small amount of CSS needed above the fold, defer the rest, and delay non-critical scripts.
- 06
Check text LCP too — If your headline is the LCP element, a slow-loading web font can hold it back. Preload the main font file and use
font-display: swap.
<!-- The LCP hero image: discoverable, prioritized, responsive, never lazy -->
<img
src="/images/hero-1200.webp"
srcset="/images/hero-800.webp 800w, /images/hero-1200.webp 1200w, /images/hero-1600.webp 1600w"
sizes="100vw"
width="1600" height="900"
fetchpriority="high"
alt="Team reviewing a project plan">
<!-- Note: no loading="lazy" here. Lazy-load images further down the page instead. -->The fastest way to fix LCP is usually to stop making the hero image wait in line behind everything else.
05 · speed & technical
Interaction to Next Paint: fixing the lag after the click
Interaction to Next Paint watches every click, tap and key press during a visit and reports one of the slowest (on pages with lots of interactions, a few extreme outliers are ignored). Each interaction has three phases: the input delay while the browser is busy with something else, the processing time of your event handlers, and the presentation delay before the next frame is painted. Long JavaScript tasks are the villain in all three.
Five ways to bring INP down
Ship less JavaScript
Every script the page runs competes with your visitor's tap. Remove unused plugins, widgets and libraries before optimizing anything.
Delay third-party scripts
Chat widgets, heatmaps and ad tags often run heavy work right when people start interacting. Load them later, or only on pages that need them.
Break up long tasks
Any task longer than 50 ms blocks the main thread. Split big jobs into chunks and yield between them so the browser can respond.
Show feedback first
Update the button, open the menu or show a spinner immediately, then do the expensive work. People forgive work they can see happening.
Keep the DOM lean
Huge pages with thousands of nested elements make every update slower. Page builders are frequent offenders.
Here's the "feedback first, then yield" pattern in practice. scheduler.yield() is available in Chromium-based browsers; the fallback covers the rest.
function yieldToMain() {
if (globalThis.scheduler?.yield) return scheduler.yield();
return new Promise(resolve => setTimeout(resolve, 0));
}
filterButton.addEventListener('click', async () => {
showLoadingState(); // 1. instant visual feedback
await yieldToMain(); // 2. let the browser paint it
applyHeavyFilters(); // 3. then do the expensive work
});To find your slowest interactions, open Chrome DevTools' Performance panel, interact with the page as a visitor would, and look for long tasks after each click. Mobile matters most: a mid-range phone has far less processing power than your laptop.
06 · speed & technical
CLS: stop the page from jumping
CLS measures the biggest burst of unexpected layout movement during a visit. You've felt it: you go to tap a link and an ad loads above it, so you tap the wrong thing. It's often the cheapest metric to fix.
CLS fix list
07 · speed & technical
WordPress Core Web Vitals: the platform-specific fixes
WordPress gives you a head start and a few traps. Recent versions try to add fetchpriority="high" to the image they think is the LCP element and skip lazy-loading it, and they output width and height on images inserted through the editor. But they're guessing, and themes and page builders often confuse the guess.
WordPress Core Web Vitals traps
- A slider as the hero — loads several images and a script before showing anything
- Lazy-loading everything — including the hero, which wrecks LCP
- Stacked optimization plugins — they conflict, double-minify and cause layout shifts
- Page builders without their performance settings on — extra CSS, JavaScript and DOM depth
- Every plugin loading assets site-wide — a form plugin's script has no business on your blog posts
- Budget hosting — slow server response sets a floor no front-end trick can beat
Core Web Vitals WordPress plugins: help or hype?
Plugins for Core Web Vitals WordPress tuning (caching, image optimization, script delay) can genuinely help, and one good one beats three average ones. Most offer free and paid tiers. But a plugin can only optimize what's there. If the theme ships heavy code, the plugin is polishing it. A lean theme from proper WordPress development removes the problem instead of hiding it.
08 · speed & technical
How to improve Core Web Vitals in the right order
- 01
Find the failing groups — Search Console tells you which templates fail, on which device.
- 02
Pick the worst metric per group — Use the scorecard above.
- 03
Fix the cause, not the score — Use DevTools to find the actual element, script or shift.
- 04
Fix templates, not pages — One template fix can repair hundreds of URLs.
- 05
Validate and wait — Click "Validate fix" in Search Console and give field data its 28 days.
If you'd rather hand it over, my website speed optimization work starts with field data and fixes causes in priority order, with pricing from $450 for a one-off fix on one site. Speed is one layer; technical SEO covers crawling, indexing and site structure. Ongoing SEO is what turns a fast site into one that earns traffic.
How to improve Core Web Vitals fast if I only have a day?
Start with the cheapest high-impact fixes: stop lazy-loading the hero image and add fetchpriority="high" to it, set width and height on images, reserve space for banners and embeds, and delay non-essential third-party scripts. Then run a lab test to confirm. Field data in Search Console will take up to 28 days to reflect the changes.
Why does my lab score look fine but my Core Web Vitals still fail?
Lab tests simulate one device and one load, with no real taps. Field data comes from your actual visitors, often on slower phones and networks, and includes INP, which lab tools can't measure. Trust the field data for your status and use the lab to diagnose. Test on a real mid-range phone too.
What is Interaction to Next Paint, in simple terms?
It's how long your page takes to visibly respond after someone clicks, taps or presses a key, from the input to the next painted frame. Google rates 200 milliseconds or less as good and over 500 as poor. It replaced First Input Delay as a Core Web Vital in March 2024 because it measures every interaction, not just the first.
Do Core Web Vitals affect rankings?
They're part of Google's page experience signals, so they can play a role, but relevance and content quality matter far more. Treat good scores as a tiebreaker in search and a clear win for visitors. Nobody can promise that fixing Core Web Vitals alone will lift rankings, and you should be wary of anyone who does.
Which core web vitals checker should I use?
Use PageSpeed Insights for a quick check of one URL with field and lab data, Search Console's Core Web Vitals report for site-wide patterns, and Chrome DevTools to find causes. Avoid relying on any tool that only shows a lab score, because it can't show INP or what real visitors experience.
Is WordPress bad for Core Web Vitals?
No. WordPress can pass comfortably. Problems usually come from heavy themes, page builders without their performance settings, too many plugins loading assets everywhere, and slow hosting. A lean theme, sensible plugins, page caching and properly sized images get most WordPress sites into the green.
free audit
Want someone to just fix it?
If you'd rather not spend your week in DevTools, I'll show you how to improve Core Web Vitals on your own site: which metric fails, on which templates, and what to fix first. Plain English, no obligation.
Free audit · No obligation · Reply within one business day
keep reading