Ecommerce Core Web Vitals Optimisation: How to Fix LCP, INP, and CLS on Your Store

Core Web Vitals are Google’s page experience metrics and a confirmed ranking factor. For ecommerce stores, they present a specific challenge because product pages combine large images, dynamic content, review widgets, and third-party scripts into pages that frequently fail all three assessments. Fixing them improves both rankings and conversion rates simultaneously, making this one of the highest-return technical investments you can make.

This guide covers each Core Web Vital in practical ecommerce terms and how to fix the most common issues. For a broader technical SEO context, our guide on Core Web Vitals and why they matter for SEO covers the fundamentals.

The Three Core Web Vitals Explained for Ecommerce

Largest Contentful Paint (LCP)

LCP measures how long it takes for the largest visible element on the page to load. On ecommerce product pages, this is almost always the main product image. A good LCP score is under 2.5 seconds. Most ecommerce stores fail this because product images are large, unoptimised, and not prioritised in the page load order.

Interaction to Next Paint (INP)

INP measures how quickly the page responds to user interactions like taps, clicks, and keyboard input. A good INP score is under 200 milliseconds. On ecommerce pages with heavy JavaScript from apps, live chat, and marketing scripts, INP frequently fails because the main thread is too busy processing scripts to respond quickly to user input.

Cumulative Layout Shift (CLS)

CLS measures how much the page layout shifts unexpectedly as it loads. On ecommerce pages, late-loading promotional banners, cookie consent bars that push content down, and review widgets that appear after the initial render are the most common causes of high CLS scores. A good score is under 0.1.

Fixing LCP on Ecommerce Product Pages

Optimise and Prioritise the Hero Product Image

The main product image is almost always the LCP element. Compress it aggressively using WebP format without visible quality loss. Add the fetchpriority=’high’ attribute to the main product image HTML tag so browsers load it before other resources. Avoid lazy loading the above-the-fold product image, as lazy loading delays exactly the element Google is measuring for LCP.

Use a Content Delivery Network

A CDN serves your images and static assets from servers geographically close to each visitor. For ecommerce stores serving customers across multiple regions, a CDN can cut LCP times significantly by reducing the physical distance data has to travel. Most major ecommerce hosting providers offer CDN integration, and for Shopify stores the CDN is built in but image optimisation still needs to be applied manually.

Improve Server Response Time

If your server takes more than 600 milliseconds to respond to the initial page request, your LCP will struggle regardless of how well optimised your images are. Upgrade your hosting tier if you are on shared hosting, enable server-side caching, and use a performance plugin or configuration on WooCommerce stores to reduce database query load on each page request.

Fixing INP on Ecommerce Stores

Audit and Reduce Third-Party Scripts

Third-party JavaScript from marketing pixels, live chat tools, review apps, and affiliate tracking scripts all compete for the browser’s main thread. When too many scripts run simultaneously, the browser cannot respond quickly to user interactions. Audit every third-party script on your store and remove those that are not delivering measurable value. For Shopify stores, our guide on Shopify app bloat and page speed covers how to identify which apps are causing the most damage.

Defer Non-Critical JavaScript

Scripts that do not need to execute on page load should be deferred or loaded asynchronously. Add the defer attribute to non-critical script tags or load them after the page becomes interactive. This frees up the main thread for user interactions during the critical first few seconds of a page visit.

Optimise Add to Cart Interactions

The add to cart button is the most important interaction on any product page. If it triggers heavy JavaScript, fetches inventory data, or fires multiple analytics events simultaneously on click, users will experience a visible delay. Audit what happens when add to cart is clicked and optimise the sequence so the visual response is immediate even if background processes complete slightly later.

Fixing CLS on Ecommerce Pages

Set Explicit Dimensions on Images

The most common cause of layout shift on ecommerce pages is images loading without explicit width and height attributes defined in the HTML. When the browser does not know how large an image will be before it loads, it cannot reserve space for it, and the surrounding content shifts when the image appears. Add explicit width and height attributes to every product image and banner element.

Reserve Space for Dynamic Elements

Review widgets, promotional banners, cookie consent bars, and size selector components that load after the initial render all cause layout shift if space is not reserved for them. Use CSS min-height on containers that will be populated by dynamic content so the layout does not shift when they appear.

Avoid Inserting Content Above Existing Content

Banners, notification bars, and sticky headers that appear after page load and push existing content downward are a direct cause of high CLS scores. If you use promotional notification bars, load them as part of the initial page render rather than injecting them via JavaScript after load. If they must load dynamically, position them in a way that does not shift existing content.

Core Web Vitals by Ecommerce Page Type

Product Pages

Product pages are the highest priority for Core Web Vitals work because they are the highest-value pages for both SEO and conversion. LCP is almost always the primary issue due to large hero images. Combine image optimisation with fetchpriority markup and CDN delivery for the fastest improvement. Our product page SEO guide covers the full optimisation picture for this page type.

Category Pages

Category pages with product grids face CLS issues from images loading into the grid without reserved dimensions, and INP issues from filter interactions that trigger heavy re-renders. Ensure product grid images have explicit dimensions and that filter JavaScript is optimised to update results without blocking the main thread. Our category page SEO guide covers the broader optimisation context.

Homepage

Homepage hero banners and carousels are frequent LCP culprits. Carousels in particular often load multiple large images on page load even though only one is visible. Lazy load carousel images beyond the first slide and ensure the first visible hero image is preloaded with high priority.

How to Measure Core Web Vitals on Your Ecommerce Store

Use Google PageSpeed Insights to test individual pages and see both lab data and field data where available. Use Google Search Console’s Core Web Vitals report to see aggregated real-user data across your entire store, segmented by page type. Field data from real users is what Google uses for ranking assessments, so prioritise fixing pages flagged as poor in Search Console over pages that only fail in lab testing.

For platform-specific guidance, our Shopify technical SEO checklist and WooCommerce SEO guide both cover Core Web Vitals in the context of each platform’s specific constraints and available optimisation tools.