Core Web Vitals for eCommerce: the definitive guide
A slow store costs you rankings and conversions simultaneously. This guide covers everything from image pipelines to third-party script management.
Core Web Vitals are Google's framework for measuring real-world user experience. They directly influence search rankings, and they have a documented, measurable impact on conversion rates. A slow store isn't a technical problem — it's a revenue problem.
The three metrics that matter
LCP — Largest Contentful Paint
Measures how long it takes for the largest visible element on the page (usually a hero image or product photo) to load. Target: under 2.5 seconds. Below 1.0s is excellent.
Why it matters for eCommerce: Your hero image or first product photo is almost always your LCP element. If it loads slowly, customers see an incomplete page for seconds — a period where bounce rate is highest.
CLS — Cumulative Layout Shift
Measures visual stability — how much the page layout shifts as elements load. A score of 0 is perfect; below 0.1 is good. eCommerce sites are particularly prone to this because of dynamic elements loading after initial render.
Common culprits: Cookie banners loading without reserved space, images without explicit width/height attributes, ads loading asynchronously, fonts rendering with different line heights than the fallback.
INP — Interaction to Next Paint
Replaced FID in 2024. Measures how responsive a page is to all user interactions throughout the session — clicks, taps, keyboard input. Target: below 200ms.
Why it matters for eCommerce: Every time a customer interacts with your store — selecting a variant, adding to cart, opening a filter — they're measuring your responsiveness. Sluggish interactions feel broken and erode trust.
The top causes on eCommerce sites
Unoptimised images (biggest impact)
Product images are the primary LCP element and often the primary page weight issue. Fix: serve WebP or AVIF, use responsive images with correct srcset, preload the LCP image, and never load full-resolution images when thumbnails will do.
Third-party scripts
Live chat widgets, analytics tags, A/B testing tools, retargeting pixels, review widgets — every one adds JavaScript that can block rendering or delay interactivity. Audit your tag manager quarterly. Remove what you're not using. Load non-critical scripts after interaction or behind a consent wall.
Render-blocking resources
CSS and JavaScript loaded in the <head> blocks the browser from rendering the page until they're downloaded and parsed. Critical CSS should be inlined; non-critical CSS deferred. JavaScript should be deferred or loaded asynchronously wherever possible.
No server-side caching
On platforms you control (WooCommerce, headless builds), server response time (TTFB) is a major LCP factor. Full-page caching, edge caching via a CDN, and database query optimisation all contribute. On Shopify, this is managed for you — which is one of its genuine advantages.
How to measure
- Google Search Console > Core Web Vitals report: field data from real users on your actual site
- PageSpeed Insights: lab data with specific improvement recommendations
- Chrome DevTools > Lighthouse: deep diagnostic during development
- WebPageTest.org: advanced waterfall analysis, especially useful for third-party script impact
- Vercel Analytics or similar: real-user monitoring in production (RUM)
The conversion case
Google's own research shows a direct correlation: sites in the top Core Web Vitals percentile see 24% lower abandonment rates than those in the bottom quartile. For a store doing €5M/year, moving from poor to good CWV performance is worth €200k–€500k in additional revenue — without changing a word of copy or spending more on ads.
Want to put this into practice?
We help brands apply exactly this kind of thinking to their actual business.
Contact us