Core Web Vitals for eCommerce: Faster Product and Category Pages

What Core Web Vitals are, and why eCommerce feels them hardest

Core Web Vitals are three field metrics Google uses to score real user experience: loading, interactivity and visual stability. For an online store they are not an abstract dev concern. They sit directly between a shopper and the buy button.

eCommerce pages carry more weight than almost any other page type. A product page loads high-resolution imagery, a gallery, variant swatches, reviews, recommendation carousels, trust badges and a stack of marketing tags. A category page can render dozens of product cards, filters and lazy-loaded thumbnails at once. Each of those is a chance to miss a threshold.

That matters because slow pages cost sales in a way you can measure. Our own analysis found that every additional second of LCP delay drops eCommerce conversion rate by 11.4%, and an INP slower than 200ms cuts conversion rate by 23% (Visionary Marketing, page speed and conversion impact, 2026). The ranking side compounds it: in our ranking factor study, mobile LCP showed a 0.71 correlation with position for commercial queries (Visionary Marketing, eCommerce SEO ranking factor study, 2026). Faster pages rank higher and convert more of the traffic they earn.

The Core Web Vitals thresholds for online stores

Here is the reference. To pass, a page must meet all three targets at the 75th percentile of real visits across mobile and desktop (web.dev, 2024).

Source: web.dev, Web Vitals, updated 2024.

Two things stores get wrong about these numbers. First, the score that counts is field data from real Chrome users, not the lab score in a one-off test. A Lighthouse run on your office fibre will flatter a page that struggles on a mid-range phone on 4G. Second, INP replaced First Input Delay as a Core Web Vital in 2024, and it is far stricter, because it measures the response of every interaction across the whole visit, not just the first tap (web.dev, 2024). Plenty of stores that passed FID now fail INP.

LCP for eCommerce: get the main image in fast

The most common eCommerce LCP causes we see, and the fix for each:

• Oversized hero images. A 3000px product shot served to a phone is the classic culprit. Serve responsive sizes, compress to modern formats (WebP or AVIF), and set explicit width and height.
• Slow server response (TTFB). Heavy theme logic, unoptimised database queries and no caching push Time to First Byte up before the browser even starts. Cache aggressively and put a CDN in front of images and static assets.
• Render-blocking scripts and fonts. Third-party tag managers, chat widgets and review scripts stall the main thread. Defer non-critical JavaScript and preload the LCP image.
• Lazy-loading the wrong element. Lazy-loading is great for below-the-fold thumbnails and a disaster when applied to the LCP image itself. Never lazy-load the largest above-the-fold element.

LCP is the metric with the most direct revenue line. Because each second of delay costs 11.4% of conversion rate (Visionary Marketing, 2026), shaving a slow 4-second LCP down to 2.5 is not a vanity exercise. On a store turning over £40,000 a month, that 1.5-second gain models out to a meaningful five-figure annual swing.

INP optimisation: make every tap feel instant

On a store, the interactions that blow INP are predictable:

• Add-to-cart and variant selectors that fire heavy synchronous scripts before the UI updates.
• Filtering and sorting on category pages that re-render the whole grid on the main thread.
• Third-party tags firing on click: analytics, remarketing pixels and chat tools all compete for the same thread.
• Hydration cost on JavaScript-heavy themes and headless builds, where the page looks ready but cannot respond yet.

The fixes are about breaking work up and moving it off the critical path. Split long tasks so the browser can respond between them. Defer or lazy-load third-party scripts so they do not run during the first interactions. Show optimistic UI on add-to-cart, so the cart count updates instantly while the network request completes in the background. Audit your tag manager ruthlessly, because most stores carry tags they no longer use.

INP optimisation has the steepest conversion penalty of the three. An INP worse than 200ms cuts conversion rate by 23% in our data (Visionary Marketing, 2026), because a laggy add-to-cart is the moment a ready-to-buy shopper hesitates.

CLS on product pages: stop the layout jumping

• Images without dimensions. If the browser does not know how tall an image is, it reflows everything below once the image lands. Always set width and height or a CSS aspect ratio.
• Injected banners and promo bars. A "free delivery" strip or cookie notice that loads late shoves the whole page down. Reserve its height up front.
• Web fonts swapping in. Late font loads cause text to reflow. Use font-display: optional or swap with a matched fallback metric.
• Dynamic price and stock widgets. Personalised pricing, countdown timers and stock counters that appear after load are a frequent cause on product pages. Hold their space with a placeholder.
• Star ratings and review counts that pop in and shift the add-to-cart button down, exactly when a shopper is reaching for it.

CLS rarely gets the attention LCP and INP do, but on mobile it is the metric most likely to cause a mis-tap, and a mis-tap on a product page is a lost sale. For deeper, page-by-page treatment of these elements, see our product page SEO and category page content and UX guides.

The Core Web Vitals at a glance

Sources: thresholds and tools from web.dev (2024); revenue figures from Visionary Marketing page speed and conversion impact, 2026.

Calculate what page speed is worth to your store

How to fix Core Web Vitals on an eCommerce store

1. Measure with real field data. Start in Search Console's Core Web Vitals report and PageSpeed Insights, which both use CrUX field data. Group by page template, not individual URLs, because product pages and category pages fail for different reasons.
2. Fix LCP on your worst template first. Identify the LCP element, compress and serve it in a modern format, set dimensions, preload it and stop lazy-loading it. Add a CDN and caching if you have not.
3. Cut server response time. Reduce TTFB with caching, a lean theme and fewer blocking app scripts. On hosted platforms, audit installed apps, since each one can add weight.
4. Tackle INP by taming JavaScript. Defer third-party tags, break up long tasks, and add optimistic UI to add-to-cart and filters so interactions feel instant.
5. Close out CLS. Set width and height on every image, reserve space for banners, fonts, price widgets and review stars, and load late elements into pre-sized containers.
6. Re-measure after 28 days. CrUX field data is a rolling 28-day window, so changes take time to show. Re-check and iterate on the next-worst template.

For the full store-wide programme this sits inside, see our technical SEO eCommerce checklist.

Product pages vs category pages: where the work differs

The two templates fail Core Web Vitals for different reasons, so treat them separately.

Product pages usually fail on LCP (the big hero image) and CLS (price, stock and review widgets shifting late). Prioritise compressing and preloading the main image and reserving space for everything that loads after it.

Category pages usually fail on INP (filtering and sorting that re-renders the grid) and LCP (a wall of product-card thumbnails competing to load). Prioritise efficient lazy-loading below the fold, eager-loading the first visible row, and moving filter logic off the main thread.

Typical share-of-failure pattern from store audits, Visionary Marketing.

How this guide goes further

Frequently asked questions

Core Web Vitals are where technical SEO and revenue meet most directly for an online store. Fix LCP first, make every tap respond under 200ms, and stop the layout jumping, in that order. The traffic you already have will convert harder, and the rankings will follow.