Language: English
Request a service

Core Web Vitals for E-commerce: How to Fix LCP, INP and CLS on Your Store

Core Web Vitals affect both rankings and conversion. On online stores, the same few issues cause most failures. Here is how to find and fix them on product and category pages.

Hasan Gültekin4 min read

Core Web Vitals are Google’s way of measuring how a page feels to real users. For online stores they matter twice: they are part of Google’s page experience signals, and, more importantly, slow and jumpy pages lose sales.

The good news: on e-commerce sites, the same handful of problems causes most failures. This guide explains each metric in store terms and shows how to fix it.

The three metrics and their targets

Metric What it measures “Good” threshold
LCP – Largest Contentful Paint How fast the main content (often the product image or hero banner) appears ≤ 2.5 s
INP – Interaction to Next Paint How fast the page responds to taps and clicks ≤ 200 ms
CLS – Cumulative Layout Shift How much the layout jumps while loading ≤ 0.1

Google assesses these at the 75th percentile of real visits. That means three out of four visitors need a good experience, not just your fast office computer.

INP replaced First Input Delay (FID) as a Core Web Vital in March 2024. Many stores that passed under FID now fail under INP, because INP measures every interaction, not just the first.

Where to find your real data

  • Google Search Console → Core Web Vitals report: groups of URLs with issues, based on real Chrome users
  • PageSpeed Insights: field data for a single URL plus lab diagnostics
  • CrUX dashboard: history over time
  • Your own real user monitoring (RUM): the web-vitals JavaScript library can send data to GA4 or another tool

Use lab tools (Lighthouse) to find causes, but judge success with field data.

Fixing LCP on product and category pages

On a product page, the LCP element is usually the main product image. On category pages, it is often a banner or the first product images.

Common causes:

  • The main image is lazy-loaded
  • The image is too large or in an old format
  • The image is loaded by JavaScript (sliders and galleries)
  • Slow server response (high TTFB)
  • Render-blocking CSS and fonts

Fixes:

  1. Never lazy-load the LCP image. Use loading="eager" and fetchpriority="high" on it.
  2. Serve WebP or AVIF with correct srcset and sizes.
  3. Render the first gallery image in plain HTML, then let the slider take over.
  4. Fix TTFB with full page caching (Varnish, a CDN, or your platform’s cache).
  5. Preload the main web font or use font-display: swap.

Fixing INP: the JavaScript problem

INP problems almost always come from too much JavaScript running on the main thread.

Common causes on stores:

  • Heavy themes (for example Magento Luma, bloated WordPress page builders)
  • Many tag manager scripts: analytics, ads pixels, heatmaps, chat widgets, A/B testing
  • Product option selectors and filters that rerender the whole page
  • Large third-party review and recommendation widgets

Fixes:

  1. Audit your tag manager. Remove tags nobody uses. Load non-critical tags after user interaction or on idle.
  2. Delay chat widgets until the user scrolls or clicks a chat button.
  3. Break up long tasks. Developers can yield to the main thread so clicks are handled faster.
  4. Choose a lighter frontend when the theme itself is the problem. On Magento, moving to Hyvä is often the biggest INP win. See my Luma to Hyvä migration guide.

Fixing CLS: stop the page from jumping

Common causes:

  • Images without width and height
  • Cookie banners and promo bars pushing content down
  • Fonts swapping and changing text size
  • Late-loading review stars, badges or “you may also like” blocks

Fixes:

  1. Always set width and height (or aspect-ratio) on images.
  2. Show cookie banners as overlays, not by pushing the page.
  3. Reserve space for dynamic blocks with a minimum height.
  4. Use font fallbacks with matching metrics.

Prioritise by template, not by URL

A store may have thousands of URLs but only a few templates: home, category, product, search, cart, CMS. Fix the template and you fix every URL that uses it. Start with the template that gets the most organic traffic, usually category or product pages.

How Core Web Vitals connect to revenue

Speed is not only an SEO topic. Faster pages generally mean more pages viewed and fewer abandoned sessions. To prove it for your own store, compare conversion rate and bounce rate by device and by page speed bucket in your analytics before and after the work.

Frequently asked questions

Do Core Web Vitals directly affect rankings?

They are part of Google’s page experience signals. Content relevance matters more, but when competitors are close, a better experience helps, and it always helps conversion.

Why does PageSpeed Insights show a different score every time?

The lab score is a simulation and varies. The field data at the top (from real users) is what Google uses for Core Web Vitals.

How long until Search Console shows improvement?

Field data is based on a rolling 28-day window, so expect about four weeks after a fix before the report fully reflects it.

Want your store to pass Core Web Vitals?

I audit and fix Core Web Vitals on Magento, WooCommerce and Shopify stores, from LCP images to tag manager cleanup. See my technical SEO service or request an audit.