Core Web Vitals: How We Doubled a Client's Conversions
There is a direct correlation between your website's loading speed and your revenue. This is not a marketing theory — it's a reality documented by thousands of studies, measured by Google, Amazon, Walmart, and dozens of other companies of all sizes. In 2021, Google formalised this reality by integrating Core Web Vitals into its ranking algorithm. Since then, performance is no longer a technical luxury — it's a business imperative.
In early 2025, an e-commerce client came to us with a specific problem: their physical shop in Nantes was doing well, but the online store was barely converting. Decent traffic. Conversion rate: 0.4%. Industry average is 2–3%.
After an audit, the diagnosis was clear: Core Web Vitals were catastrophic. Six weeks later, conversions had doubled. This guide explains what Core Web Vitals are, why they directly impact your conversions and rankings, and how to improve them concretely — whether you manage a local e-commerce, a showcase site or a B2B platform.
What Are Core Web Vitals?
Core Web Vitals are three metrics defined by Google to measure the real user experience of a website. Unlike older performance indicators (total load time, page size), Core Web Vitals measure what the user perceives — not what the server sends.
Google integrated them as a ranking signal via the "Page Experience" update in 2021. Since then, a technically slow site is penalised in search results, regardless of its content quality.
The 3 Core Web Vitals Metrics Explained
| Metric | What It Measures | "Good" Threshold | "Needs Improvement" | "Poor" Threshold | Main Business Impact |
|---|---|---|---|---|---|
| LCP (Largest Contentful Paint) | Load time of the main visible element | < 2.5 s | 2.5 – 4.0 s | > 4.0 s | Bounce rate, first impressions |
| INP (Interaction to Next Paint) | Responsiveness to user interactions | < 200 ms | 200 – 500 ms | > 500 ms | Frustration, cart abandonment |
| CLS (Cumulative Layout Shift) | Visual stability (layout jumps) | < 0.1 | 0.1 – 0.25 | > 0.25 | Click errors, frustration |
These three metrics are complementary. A site can have an excellent LCP but a catastrophic CLS. Google takes all three into account to calculate your Page Experience score.
LCP (Largest Contentful Paint): Perceived Loading
What LCP Measures
LCP measures the time needed to display the largest element visible in the initial viewport — generally a hero image, a product image or a main text block. This is what the user perceives as "the site has loaded".
An LCP under 2.5 seconds is considered good. Beyond 4 seconds, Google classifies it as "Poor" — and your users have probably already pressed "Back".
Why LCP Is So Critical
The data is unambiguous:
- Google has measured that an LCP improvement of 0.1 seconds increases conversions by 10% on e-commerce sites
- Deloitte documented that a 0.1 second mobile speed improvement produces an 8.4% conversion increase for retailers
- Amazon estimated a 1% revenue loss per second of additional delay
Common Causes of Poor LCP
Unoptimised images: this is the most frequent cause. A 3 MB JPEG hero image takes several seconds to load on mobile. The solution: WebP or AVIF format, responsive resizing, loading="eager" attribute on the hero image (and lazy on others).
Slow server: if your site is hosted on a low-end shared server without a CDN, initial requests take time. A CDN like Cloudflare or Vercel edge functions can reduce latency by 70%.
Render-blocking resources: JavaScript scripts or Google Fonts loaded synchronously before the first render delay display. The solution is to defer these resources with defer or async.
Non-critical CSS included in the head: if you load your entire CSS before starting to display anything, you delay rendering. The "Critical CSS" approach inlines the minimal CSS needed for the initial render.
INP (Interaction to Next Paint): Responsiveness
What INP Measures
INP measures the time between a user action (click, touch, keyboard press) and the corresponding visual update on screen. Concretely: when the user clicks "Add to Cart", how long before the button changes state?
An INP under 200 ms is imperceptible to the user. Beyond 500 ms, the interface seems "stuck" or broken.
INP replaced FID (First Input Delay) in March 2024. It's more representative because it measures ALL interactions during the session, not just the first one.
The Impact of INP on Conversions
A "slow to respond" site generates immediate frustration. The user double-clicks a button, thinks the form didn't work, tries again — or gives up. On an e-commerce site, each additional 100 ms delay on the payment button increases the abandonment rate.
On contact forms, high INP can convince the visitor that the form is broken, when it's simply slow. That's a direct lead loss.
Common Causes of Poor INP
JavaScript too heavy on the main thread: bulky libraries (jQuery + plugins, unoptimised frameworks, massive analytics scripts) block the JavaScript main thread. The solution is to decompose code, use Web Workers for heavy calculations, and remove unnecessary dependencies.
Long tasks: JavaScript tasks that take more than 50 ms block the thread and delay interaction responses. Chrome profiling tools allow you to identify them.
Excessive hydration in JavaScript frameworks: some JS frameworks download and execute a lot of client-side JavaScript at load. Next.js with server-side rendering (SSR) and React Server Components minimises this issue.
CLS (Cumulative Layout Shift): Visual Stability
What CLS Measures
CLS measures the amplitude of unexpected visual displacements during loading. Have you ever tried to click a button and accidentally clicked an ad because the page "jumped" at the last moment? That's exactly what CLS measures.
A CLS under 0.1 is good. Beyond 0.25, it's Poor — and Google penalises.
Why CLS Harms Conversions
Layout jumps create involuntary click errors — the user clicks what they didn't intend to click. On an e-commerce site, this can trigger an unwanted purchase or miss a CTA. On a form, it can cancel an entry.
Even when it doesn't cause a direct error, CLS creates a feeling of an "unfinished" or unstable site, which harms trust and therefore conversion.
Common Causes of Poor CLS
Images without defined dimensions: if your CSS doesn't define width and height for images, the browser doesn't know how much space they'll occupy. When they load, they push other content down. Solution: always define dimensions, or use aspect-ratio in CSS.
Custom fonts: loading Google or custom fonts can cause a "flash of unstyled text" (FOUT) where text changes size and makes content jump. The solution is to use font-display: optional or preload critical fonts.
Ads and embedded content without reserved space: advertising iframes or third-party widgets that "arrive" after the initial load push content. The solution is to reserve space with a CSS placeholder of the right size.
Cookie banners: GDPR banners that appear after loading can cause significant CLS. The solution is to position them as fixed or display them from the first render.
The Measured Business Impact: What You're Losing With a Slow Site
Data on the speed/conversion correlation is abundant and convergent. Here are the most significant findings:
Walmart: a 1 second loading time improvement produced a 2% conversion increase and 1% revenue uplift.
Google (Shopping study): pages loading in 1 second convert 3 times better than those loading in 5 seconds.
BBC: for each additional second of loading delay, 10% of users leave the site.
Vodafone (UK): by improving their LCP by 31%, they observed an 8% increase in sales.
Zalando: a 100 ms load time reduction generated a 0.7% conversion rate increase — significant at their traffic scale.
These figures seem modest as percentages, but applied to your annual revenue, the impact can be considerable. An e-commerce making €200,000 in online revenue that improves its conversion rate by 0.5 points gains €10,000 additional revenue without additional marketing spend.
How to Measure Your Core Web Vitals
There are several tools, each with its specifics:
| Tool | Data Type | Real or Simulated | Free | Ideal For |
|---|---|---|---|---|
| PageSpeed Insights | Lab + Field | Both | Yes | Quick audit, overview |
| Google Search Console | Field (CrUX) | Real | Yes | Production monitoring, priority pages |
| Chrome DevTools / Lighthouse | Lab | Simulated | Yes | Technical debugging, developers |
| GTmetrix | Lab | Simulated | Freemium | Detailed reports, before/after comparison |
| WebPageTest | Lab | Simulated | Yes | Advanced tests, waterfall, multi-location |
| Vercel Analytics | Field | Real | Freemium | Next.js sites in production |
Recommendation: Start with PageSpeed Insights for a quick view, then use Google Search Console to monitor real data over several weeks. The Search Console "Core Web Vitals" report identifies which pages are "Poor" and "Needs Improvement" according to real user sessions.
Key point: lab data (simulated) and field data (real) can diverge significantly. What matters for Google ranking is the CrUX (Chrome User Experience Report) — data collected from real Chrome user sessions. Search Console gives you access to this data.
Optimisation Techniques by Metric
| Technique | Target Metric | Difficulty | Impact |
|---|---|---|---|
| Image conversion to WebP/AVIF | LCP | Easy | High |
| Adding CDN (Cloudflare, etc.) | LCP | Easy | High |
Hero image preloading (preload) |
LCP | Easy | Medium |
Deferring non-critical scripts (defer) |
LCP, INP | Medium | High |
| Critical CSS inline | LCP | Medium | Medium |
| Removing unnecessary plugins | LCP, INP | Easy | Variable |
| Migration to SSR framework (Next.js) | LCP, INP, CLS | Hard | Very high |
| Adding dimensions to all images | CLS | Easy | High |
font-display: swap or optional |
CLS | Easy | Medium |
| Space reservation for ads/cookies | CLS | Medium | Medium |
| Code splitting (lazy loading JS modules) | INP | Hard | High |
| Web Workers for heavy calculations | INP | Hard | Variable |
| React Server Components (Next.js) | LCP, INP | Hard | Very high |
What Next.js Does for Core Web Vitals
At Nervure, we build all our sites with Next.js, and that's not a random choice. Next.js is the highest-performing JavaScript framework for Core Web Vitals, for several structural reasons:
next/image: Automatic Image Optimisation
The next/image component automatically handles WebP conversion, adaptive resizing (responsive images), lazy loading and conditional preloading. An image integrated with next/image resolves 80% of LCP problems linked to images.
Server-Side Rendering (SSR) and Static Generation (SSG) Next.js generates HTML server-side, which allows the browser to display content immediately without waiting for JavaScript execution. Result: drastically improved LCP compared to a classic Single Page Application.
React Server Components Components that don't need client-side interactivity remain on the server — no JavaScript is sent to the browser for them. Less JavaScript = better INP.
Turbopack (Next.js 15+) The new ultra-fast bundler reduces build times and improves code splitting, which contributes to reducing initially loaded JavaScript.
Vercel Integration Deployed on Vercel, Next.js automatically benefits from a global edge CDN, Brotli compression, HTTP/3, and intelligent cache optimisations. Without any additional configuration.
According to Vercel data, Next.js sites deployed on their infrastructure achieve an average Lighthouse Mobile score of 85+ without manual optimisation. That's a starting point the majority of WordPress sites cannot natively reach.
Real Case Study: WordPress to Next.js Migration
Our client — an e-commerce business in Loire-Atlantique — came to us in early 2025 with a specific problem: reasonable traffic, catastrophic conversion rate at 0.4% (the e-commerce average is 2–3%).
After an audit, the diagnosis was clear: Core Web Vitals were catastrophic on mobile.
Initial state:
- LCP: 6.2 seconds (Poor threshold: > 4 s) — 43 active WordPress plugins
- INP: 820 ms (Poor threshold: > 500 ms)
- CLS: 0.38 (Poor threshold: > 0.25)
- Lighthouse Mobile score: 31/100
- Conversion rate: 0.4%
Actions taken over 6 weeks:
- WordPress + WooCommerce migration (43 plugins) → Next.js with static rendering
- Image optimisation: WebP conversion +
next/image, lazy loading — -70% on page weight - Elimination of render-blocking resources: 2 Google Fonts, live chat widget, Facebook pixel — all deferred to after first render
- Layout shift fixes: dimensions added to all visual elements
Results after 6 weeks:
| Metric | Before | After | Improvement |
|---|---|---|---|
| LCP | 6.2 s | 0.9 s | -85% |
| INP | 820 ms | 140 ms | -83% |
| CLS | 0.38 | 0.04 | -89% |
| Lighthouse Mobile Score | 31 | 94 | +203% |
| Conversion Rate | 0.4% | 0.9% | +125% |
| Monthly Online Revenue | baseline | +127% | — |
This case illustrates the scale of gains possible when the starting point is degraded. A site already performing reasonably can target more modest but still significant gains.
Why Performance Is a Conversion Variable (The Numbers)
The correlation between load speed and conversion is well-documented. Google found that each additional second of delay reduces conversions by 7%. These effects compound:
- A site that loads in 1 second vs 3 seconds can see 2-3x the conversions
- Mobile users are particularly sensitive: they abandon more readily on slow mobile connections
- Repeat visitors are more tolerant, but first-time visitors decide in seconds whether to stay
A fast website isn't just "pleasant" — it's a direct business variable. Every euro spent on performance optimisation has a measurable return through improved conversion rates.
What a Developer Can Do That You Cannot Do Alone
Tools like PageSpeed Insights are accessible to all, but interpreting results and implementing technical corrections requires specific expertise. Here's what genuinely requires a developer:
Waterfall analysis: identifying exactly which resource is blocking LCP among dozens of parallel requests requires reading complex waterfall reports.
Intelligent code splitting: dividing your JavaScript into chunks loaded on demand without breaking functionality requires mastery of build tools.
Server-side rendering optimisation: correctly configuring SSR/SSG/ISR depending on your pages (e-commerce = many dynamic pages) is genuine architectural work.
Critical Path CSS optimisation: extracting and inlining critical CSS without massively duplicating code is delicate.
Font management: between font-display, preconnect, and preload, font loading best practices have their subtleties.
For simple actions (image compression, adding a CDN), you can act alone. For serious optimisation that genuinely improves your conversions, call on a developer or an agency.
Nervure offers a free performance audit for businesses in Loire-Atlantique — we analyse your Core Web Vitals and identify the 3 priority actions. Results within 48 hours.
How to Monitor Your Core Web Vitals Over Time
Core Web Vitals optimisation is not a one-off project — it's continuous monitoring. Several events can degrade your metrics after optimisation:
- Adding a new unoptimised hero image
- Installing a new plugin or third-party tool (chat, analytics, popup...)
- Updating a JavaScript library
- Theme or template change
- Adding a cookie or promotional banner
Monitoring recommendations:
-
Google Search Console: check the Core Web Vitals report every month. It alerts you if pages pass to "Poor" according to real data.
-
Lighthouse CI: if you have a deployment process, integrate Lighthouse CI to validate performance at each deployment and block regressions.
-
Vercel Analytics (for Next.js sites): provides real-time Core Web Vitals data by page and by device, directly in your dashboard.
-
developers.google.com/search/docs/appearance/core-web-vitals: monitor announcements of threshold changes or new metrics.
Conclusion: Performance Is an Investment, Not a Cost
The slowness of a website has an invisible but real cost: each second of delay, visitors leave, prospects don't submit forms, customers abandon their carts. This cost accumulates silently in your analytics.
Improving your Core Web Vitals means investing in the efficiency of your entire marketing strategy: every euro spent on advertising or SEO generates more return when your site converts better.
Frequently Asked Questions
My site has a good score on desktop but poor on mobile. Which one counts for Google?
Google uses primarily mobile data for ranking, as the majority of searches happen from smartphones. A good desktop score is not sufficient — it's the mobile score that counts for your search ranking. Always prioritise mobile optimisation.
My PageSpeed Insights score is 75/100 — is that good or bad?
A Lighthouse score between 90 and 100 is "Good". Between 50 and 89, it's "Needs Improvement". Below 50, it's "Poor". A score of 75 deserves attention, especially if your competitors are above 90. Also look at the individual metrics (LCP, INP, CLS) — they're more informative than the global score.
If I improve my Core Web Vitals, will I automatically rank higher on Google?
Core Web Vitals are one of many ranking signals. Improving your metrics can help, but doesn't replace quality content, backlinks and thematic relevance. It's one factor among others — but one that also directly impacts your conversions, independently of ranking. See web.dev for the latest guidance from Google's web performance team.
Do Core Web Vitals apply to all types of sites?
To all websites, without exception. E-commerce, showcase, blog, portfolio, SaaS application — Google measures and ranks all site types according to these metrics. E-commerce and B2B sites with forms are generally most impacted in terms of conversion.
What does a Core Web Vitals optimisation cost?
It depends on the starting point and required actions. Simple optimisations (image compression, adding a CDN) can be completed in a few hours and cost €200 to €500. A complete technical overhaul (framework migration, code optimisation) can represent €2,000 to €8,000. In all cases, the ROI is directly measurable on your conversion rate.
Can a WordPress site have good Core Web Vitals?
Yes, with serious work: lightweight theme (GeneratePress, Kadence), fast hosting (Kinsta, WP Engine, SiteGround), advanced cache (WP Rocket), CDN, and image optimisation (ShortPixel, Imagify). An optimised WordPress can reach scores between 70 and 85 on mobile. To exceed 90, migration to a modern framework like Next.js is often necessary.
Want to know where your Core Web Vitals stand and what's costing you the most in conversions? Contact Nervure for a free performance audit — we analyse your site and propose a concrete action plan within 48h.
Further reading:
Related articles