How Core Web Vitals Affect Your Conversion Rate

How do Core Web Vitals affect conversion rate?

Core Web Vitals measure how quickly shoppers see the main content (LCP), how fast the page responds when they tap or click (INP) and how stable the layout stays (CLS). Each of these creates friction right inside the buying journey. In an A/B test published on web.dev, Vodafone improved LCP by 31% and got 8% more sales.

Speed is not a conversion strategy on its own. But a slow product image, a product grid that freezes after a filter click or a banner that shifts the page just as someone taps "Add to cart" will undermine even your best offer. This guide covers the metrics, how to measure them and the fixes that matter most for ecommerce sites.

What are LCP, INP and CLS, and what counts as "good"?

According to Google's definitions on web.dev, the three metrics and their good thresholds are:

Metric	What it measures	"Good" threshold
LCP (Largest Contentful Paint)	Loading speed of the main content	2.5 seconds or less
INP (Interaction to Next Paint)	Responsiveness to clicks, taps and key presses	200 milliseconds or less
CLS (Cumulative Layout Shift)	Unexpected layout movement	0.1 or less

Google recommends judging these at the 75th percentile of page loads, segmented by mobile and desktop. In other words, a good average isn't enough if more than a quarter of your visitors get a slow experience. For INP, anything between 200 and 500 milliseconds "needs improvement" and above 500 milliseconds is "poor". For CLS, anything above 0.25 is poor.

What do these metrics mean on an ecommerce site?

• LCP: the campaign hero on the homepage, the first row of product cards on a category page or the main product photo on a product page.
• INP: clicking a filter, picking a size, tapping "Add to cart", opening the mobile menu.
• CLS: a promo bar that loads late, a cookie banner, images without dimensions, a reviews widget that pushes content down.

How do you measure Core Web Vitals?

There are two kinds of data and it pays to keep them apart. Field data comes from real users and is what you're ultimately judged on. Lab data comes from a controlled test and helps you diagnose the cause.

1. Start with PageSpeed Insights. Enter a URL and, if the page has enough traffic, you'll see real-user data at the top and a Lighthouse lab test with suggestions below.
2. Open the Core Web Vitals report in Search Console. It groups similar URLs so you can see which templates (product, category, blog) have problems.
3. Check CrUX. The Chrome UX Report is Google's dataset reflecting how real Chrome users experience sites. It's also handy for benchmarking against competitors.
4. Set up your own real-user monitoring. Send metrics from Google's open source web-vitals library to your analytics tool so you can segment conversion rate by speed in the same report.
5. Reproduce in the lab. Use the Chrome DevTools Performance panel to step through a slow interaction or a late LCP element.

How do you fix Core Web Vitals on an ecommerce site?

This table summarises the causes we run into most often in ecommerce audits and the first fix to try:

Metric	Common cause	Fix
LCP	Huge, uncompressed hero image	Resize it, serve WebP or AVIF, use srcset for device-appropriate versions
LCP	Lazy loading applied to the LCP image	Never lazy load above-the-fold images, add fetchpriority="high"
LCP	Slow server response	Shorten time to first byte with caching, a CDN and server-side rendering
INP	Too many third-party scripts (chat, pop-ups, tags)	Audit tags, remove unused ones, defer anything non-critical
INP	Whole product grid re-rendering on filter click	Break up long tasks, show visual feedback first, do heavy work after
CLS	Images and videos without dimensions	Reserve space with width and height attributes or aspect-ratio
CLS	Late promo banners and cookie notices	Reserve the space up front or use an overlay that doesn't push content
CLS	Text jumping when web fonts load	Preload key fonts, use font-display and metric-matched fallback fonts

Hero images

On ecommerce sites the LCP element is usually an image. web.dev recommends adding fetchpriority="high" to the image likely to be your LCP element, while warning that setting high priority on more than one or two images makes prioritisation useless. The image should also be discoverable directly in the HTML; a slider image injected later by JavaScript starts loading late.

Third-party scripts

Analytics, ad pixels, live chat, reviews and personalisation tools pile up over time. Each one competes for the main thread and drags INP down. Review your tag manager every quarter and remove tags with no clear owner, no one reading the reports or a campaign that ended months ago.

Fonts

Brand fonts matter, but loading two families in four weights on every page rarely does. Limit yourself to the weights you actually use, subset to the characters you need and preload only the font visible on first render.

Mobile first

Mobile devices have less processing power and often slower connections than desktops, so test on mobile first and read mobile and desktop results separately in Search Console. A filter interaction that feels instant on a developer's laptop can lag noticeably on a mid-range Android phone. Don't rely on your team's high-end devices for testing.

How do you prove speed work improved conversion?

The Vodafone case is a good model. The team measured its Web Vitals work with an A/B test and found that a 31% LCP improvement led to 8% more sales and an 11% improvement in cart to visit rate. On your own site, run a server-side test where possible rather than a simple before and after comparison, because seasonality and campaigns can easily distort results.

If you can't run a test, here's an example approach: split sessions into "good" and "poor" groups using LCP from your real-user monitoring and compare conversion rates. It won't prove causation, but it's a strong signal for prioritising investment.

At Performetic we always report speed improvements alongside conversion data. You can see results from similar projects in our case studies and read how we approach conversion-focused design.

Key takeaways

• Core Web Vitals are LCP (good: 2.5 s), INP (good: 200 ms) and CLS (good: 0.1).
• They're assessed at the 75th percentile, separately for mobile and desktop.
• Combine PageSpeed Insights, the Search Console report, CrUX and your own real-user data.
• On ecommerce sites the biggest wins usually come from hero images, third-party scripts and fonts.
• Prove the impact on conversion with an A/B test whenever you can.