Core Web Vitals Explained — and How to Pass Every Single One
Core Web Vitals are three numbers Google uses to measure whether your site actually feels fast to real users. Not fast in theory — fast in the browser, on a phone, on a Tuesday afternoon with average mobile signal.
If all three pass, Google gives you a rankings boost over comparable sites that fail. If they fail, you're handing that advantage to competitors whose content might be no better than yours.
Most small business sites fail at least one. The common culprits are WordPress plugins, unoptimised images, and page builders that load a small novel's worth of JavaScript before showing anything.
What Are Core Web Vitals?
Core Web Vitals are part of Google's Page Experience signals — a set of measurements based on real Chrome user data, not lab tests. Google collects this data from actual visitors and uses it to inform rankings.
There are three of them: LCP, INP, and CLS. Each one measures a different aspect of how a page feels to use.
You can check your scores at PageSpeed Insights. Enter your URL, run the test, and look at the Core Web Vitals section. It'll show you whether each metric passes or fails on both mobile and desktop — with mobile being the one that matters more for rankings.
LCP: Largest Contentful Paint
LCP measures how long it takes for the largest visible element on the page to fully render. That's usually your hero image or main heading — whatever is the most dominant thing above the fold.
What counts as a good LCP score?
| Score | Rating |
|---|---|
| ≤ 2.5 seconds | Good |
| 2.5s – 4.0s | Needs improvement |
| > 4.0 seconds | Poor |
Most WordPress sites I audit come in between 3.5 and 6 seconds on mobile. A Next.js site with correctly configured images typically comes in under 1.5 seconds.
Why LCP fails — and how to fix it
LCP fails for three reasons, almost every time.
Reason one: The hero image is unoptimised. It's a 3MB JPEG served at full resolution to a mobile device. The fix is to convert it to WebP, serve it at the correct size for each screen, and add a fetchpriority="high" attribute so the browser knows to load it before anything else.
Reason two: Render-blocking CSS or JavaScript. Something is making the browser wait before it even starts painting the page. Common causes are Google Fonts loading synchronously, jQuery loading in the <head>, or a plugin that injects a script with no defer attribute.
Reason three: Slow server response. If your hosting takes 1.5 seconds to send the first byte of HTML, your LCP can't be good no matter how optimised your images are. Cheap shared hosting is often the culprit. A CDN or a server that responds in under 200ms removes this entirely.
On Next.js, LCP is handled by the <Image> component. It serves WebP automatically, resizes images for each device, and sets priority on your hero image so it's loaded before anything else. You don't configure this manually — it's the default.
INP: Interaction to Next Paint
INP — Interaction to Next Paint — measures how quickly your page responds when a user clicks something, taps a button, or presses a key.
Google replaced the older FID (First Input Delay) metric with INP in March 2024. INP is stricter: it measures the worst interaction across the entire page visit, not just the first tap.
What counts as a good INP score?
| Score | Rating |
|---|---|
| ≤ 200 milliseconds | Good |
| 200ms – 500ms | Needs improvement |
| > 500 milliseconds | Poor |
Why INP fails — and how to fix it
INP fails when the browser's main thread is too busy to respond to user input.
The usual cause is JavaScript — specifically, too much of it loading all at once. A WordPress site with Elementor, WooCommerce, WPML, a chat widget, a cookie banner, and Google Tag Manager can easily load 2–4MB of JavaScript.
While that script is parsing and executing, the browser can't respond to anything. Every click feels sluggish or broken.
The fix on WordPress is to audit and remove plugins you don't need, switch to a lighter page builder or a block theme, and defer all non-critical scripts. Tools like Asset CleanUp or Perfmatters can help. But there's a ceiling: if your stack is fundamentally heavy, you can tune it forever and still not pass.
On Next.js, INP is naturally lower because the framework ships minimal JavaScript to the browser. Only the components that need interactivity are hydrated — the rest is plain HTML. There's no page builder, no plugin ecosystem loading scripts in the background.
CLS: Cumulative Layout Shift
CLS measures how much your page layout moves around unexpectedly while loading. If you've ever started reading an article and had an ad appear above the text, pushing everything down, that's a CLS event.
What counts as a good CLS score?
| Score | Rating |
|---|---|
| ≤ 0.1 | Good |
| 0.1 – 0.25 | Needs improvement |
| > 0.25 | Poor |
CLS is a score, not a time — it's calculated from the size of the shifting elements and how far they move.
Why CLS fails — and how to fix it
Images without explicit dimensions are the single most common CLS cause. When a browser downloads an image without knowing its height in advance, it has to reflow the page once the image loads. The fix is to add width and height attributes to every <img> tag. CSS aspect-ratio achieves the same result.
Web fonts cause CLS when the fallback font is a different size from the custom font. The browser renders the page in the system font, then swaps it out when the web font loads — shifting every line of text. The fix is font-display: swap combined with size-adjust to match the fallback font's metrics, or better yet, self-hosting fonts and preloading them.
Late-injected content — cookie banners, live chat widgets, notification bars — can push the entire page down if they appear after the initial paint. These need to be rendered with reserved space or positioned so they don't affect the document flow.
On Next.js, the <Image> component reserves space for images automatically. The next/font module handles web fonts with zero layout shift. These aren't add-ons — they're how the framework works out of the box.
Before and After: What a Real Fix Looks Like
A client came to me with a WordPress site built on Elementor. PageSpeed Insights gave it an LCP of 5.8 seconds on mobile, an INP of 620ms, and a CLS of 0.34. Everything was failing.
The LCP problem was a 2.4MB WebP hero image — already converted, but served at full resolution to every device. The INP problem was Elementor itself, loading 1.1MB of JavaScript before the page was interactive. The CLS problem was a Google Fonts load that shifted the heading block on every page view.
After rebuilding in Next.js:
- LCP: 5.8s → 1.1s
- INP: 620ms → 80ms
- CLS: 0.34 → 0.02
All three now pass. The site ranks on the first page for terms it couldn't touch before.
I'm not saying every WordPress site needs to be rebuilt. Some of the issues above can be addressed without switching stacks. But if you're running a page builder and you're failing all three metrics, you're fighting the platform — and it usually wins.
Key Takeaways
- Core Web Vitals are three Google ranking signals: LCP (load speed), INP (interactivity), and CLS (visual stability)
- Good thresholds: LCP ≤2.5s, INP ≤200ms, CLS ≤0.1
- The most common failure causes: unoptimised images, heavy JavaScript, images without dimensions
- WordPress fixes are possible but have a ceiling — heavy page builders cause INP problems that can't always be tuned away
- Next.js solves all three at the framework level, not through plugins or workarounds
- Check your scores at PageSpeed Insights — mobile score is the one that matters for rankings
Frequently Asked Questions
What are Core Web Vitals?
Core Web Vitals are three performance metrics Google uses to measure the real-world loading experience: LCP (how fast the main content appears), INP (how quickly the page responds to clicks), and CLS (how much the layout shifts while loading). All three are confirmed ranking factors.
Can you fix Core Web Vitals without rebuilding the site?
Sometimes. LCP and CLS issues on WordPress can often be addressed with image optimisation, caching, and correct image dimensions. INP problems caused by heavy page builder JavaScript are harder — they're usually a symptom of the stack, not a setting you can change.
Does passing Core Web Vitals actually improve rankings?
Yes. It's a confirmed Google ranking factor. On a competitive keyword, it can be the difference between page one and page two.
How do I check my scores?
Go to pagespeed.web.dev, enter your URL, and run the test. The Core Web Vitals section shows LCP, INP, and CLS for both mobile and desktop. Mobile is the score Google cares about most.
What is INP and why did Google change from FID?
INP (Interaction to Next Paint) replaced FID (First Input Delay) in March 2024. FID only measured the delay before the first interaction. INP measures the full response time for every interaction across the entire page visit — it's a much more accurate picture of how responsive a site actually feels.
If your site is failing Core Web Vitals and you want to know exactly why, the Core Web Vitals Diagnostic is a €100 audit. I run the full test, identify the root cause of each failure, and send you a written report with specific fixes. You can implement them yourself or bring me in to do it — your call.
If you already know you need a rebuild, the modular pricing calculator at /start will show you what that costs. No call needed — fill in what you need and get a number in two minutes. You can also see all the build and maintenance options on the pricing page.
Questions about the process? The FAQ page covers how async delivery works, what's included in each add-on, and what happens after launch.
People Also Ask
What are Core Web Vitals?
Core Web Vitals are three performance metrics Google uses to measure the real-world experience of loading a web page: LCP (how fast the main content appears), INP (how quickly the page responds to clicks), and CLS (how much the layout shifts unexpectedly while loading). All three are confirmed Google ranking factors.
What counts as a good LCP score?
A good LCP score is 2.5 seconds or under. Between 2.5s and 4s needs improvement. Anything above 4s is considered poor by Google. LCP measures how long it takes for the largest visible element on the page — usually a hero image or main heading — to render.
What counts as a good INP score?
A good INP score is 200 milliseconds or under. Between 200ms and 500ms needs improvement. Above 500ms is poor. INP measures how quickly your page responds to user interactions like clicks and taps. It replaced the old FID metric in March 2024.
What counts as a good CLS score?
A good CLS score is 0.1 or lower. Between 0.1 and 0.25 needs improvement. Above 0.25 is poor. CLS measures cumulative layout shift — how much the page moves around unexpectedly while loading, such as images jumping, text shifting, or buttons appearing late.
Why is my Core Web Vitals score bad?
The most common causes are unoptimised images (no WebP, missing width/height attributes), render-blocking JavaScript, slow server response times, and heavy third-party scripts. WordPress sites with multiple plugins are especially prone to all four. Page builders like Elementor or Divi add significant JavaScript weight that directly hurts INP.
How do I check my Core Web Vitals scores?
Run your URL through Google PageSpeed Insights at pagespeed.web.dev. It shows both field data (real user measurements from the Chrome User Experience Report) and lab data (Lighthouse scores) for mobile and desktop. The Core Web Vitals section shows LCP, INP, and CLS with pass/fail status.
Can you fix Core Web Vitals without rebuilding the site?
Sometimes. LCP and CLS issues on WordPress can often be improved with image optimisation, a caching plugin, and correct image dimensions. INP problems caused by heavy page builder JavaScript or plugin bloat are harder to fix without changing the underlying technology — they're symptoms of the stack, not settings you can tweak.
Does passing Core Web Vitals improve Google rankings?
Yes. Page experience signals, including Core Web Vitals, are a confirmed Google ranking factor. A site that passes all three has a rankings advantage over a comparable site that fails. On a competitive keyword, it can be the difference between page one and page two.
What is the Core Web Vitals Diagnostic?
The Core Web Vitals Diagnostic is a €100 entry offer from Nerd Prescribed. I run a full audit of your LCP, INP, and CLS scores, identify the root cause of each failure, and deliver a written report with specific fixes. You can implement them yourself or bring me in to do it — your call.
How does Next.js help with Core Web Vitals?
Next.js improves all three metrics. Its Image component automatically serves WebP at the correct size with priority hints for hero images, which directly fixes LCP. Minimal client JavaScript and server rendering reduce INP. Built-in font optimisation and server-rendered layouts eliminate the layout shifts that cause CLS. Most Next.js sites pass all three without extra configuration.
