Core Web Vitals for Ecommerce Stores

Google's Core Web Vitals are three metrics that measure how users experience your website. For ecommerce stores, they're not just an SEO ranking factor - they directly correlate with conversion rates, bounce rates, and revenue.

A 2024 study by Deloitte found that a 0.1-second improvement in load speed increased conversions by 8.4% for retail sites. That's not a rounding error - for a store doing £100K/month, that's an extra £100K+ per year from speed alone.

Let's break down each metric, what causes poor scores on ecommerce sites specifically, and how to fix them.

The Three Core Web Vitals Explained

Largest Contentful Paint (LCP)

What it measures: How long it takes for the largest visible element to render. On a product page, this is usually the main product image. On a collection page, it's often the hero banner.

Good: Under 2.5 seconds | Needs improvement: 2.5-4.0s | Poor: Over 4.0s

Why it matters for ecommerce: LCP is your first impression. If a customer clicks a product from Google Shopping and stares at a blank screen for 4 seconds, a significant number will hit the back button. Google measures this - a high bounce rate from slow LCP compounds into lower rankings over time.

Cumulative Layout Shift (CLS)

What it measures: How much the page layout shifts unexpectedly while loading. A CLS of 0 means nothing moved. A CLS of 0.25 means elements jumped around significantly.

Good: Under 0.1 | Needs improvement: 0.1-0.25 | Poor: Over 0.25

Why it matters for ecommerce: Layout shifts on product pages cause misclicks. A customer tries to tap "Add to Cart" but the button shifts because a late-loading banner pushed everything down. They accidentally tap something else, get frustrated, and leave. On mobile (where most ecommerce traffic comes from), this is especially damaging.

First Contentful Paint (FCP)

What it measures: How long until the browser renders the first piece of content - any text, image, or SVG. This is the moment the page stops looking blank.

Good: Under 1.8 seconds | Needs improvement: 1.8-3.0s | Poor: Over 3.0s

Why it matters for ecommerce: FCP is a trust signal. A fast FCP tells the customer "yes, this site works, content is coming." A slow FCP, especially on mobile networks, makes your store feel broken.

Ecommerce-Specific Causes of Poor Scores

Generic advice about Core Web Vitals is everywhere. Here's what specifically affects online stores.

Poor LCP: The Usual Suspects

Unoptimised product images. This is the number one cause. Product photography is high-resolution by nature, and many stores serve the original 4000×3000px file to a 375px-wide mobile screen.

Third-party review widgets. Apps like Loox, Judge.me, or Yotpo often inject above-the-fold content that delays the main product image render. They compete for bandwidth and main thread time.

Render-blocking stylesheets. Many ecommerce themes load a monolithic CSS file (200 KB+) that must be fully downloaded before anything renders.

Slow server response (TTFB). WooCommerce on shared hosting is notorious for this. If the server takes 2 seconds to respond, your LCP can't possibly be under 2.5 seconds.

Poor CLS: Ecommerce Edition

Product images without dimensions. If <img> tags lack width and height attributes, the browser doesn't know how much space to reserve. When the image loads, everything below it shifts.

Dynamically injected banners. Sale banners, cookie consent bars, and promotional strips that load after the initial render push content down.

Price and variant changes. When a customer selects a colour variant and the price changes, the text might reflow if the new price has different character length (e.g., "£9.99" → "£12.99").

Late-loading web fonts. Text renders in the system font, then swaps to the custom font with different metrics, causing text blocks to resize.

Poor FCP: What's Blocking First Paint

Excessive JavaScript in <head>. Every <script> tag without async or defer blocks rendering. Ecommerce sites average 15-20 third-party scripts.

Large CSS bundles. The browser won't paint anything until it's parsed all render-blocking CSS. If your stylesheet is 300 KB, that's a problem on 3G connections.

Slow DNS resolution for third-party domains. Each new domain (analytics, fonts, CDN, chat widget) requires a DNS lookup.

How to Fix Each Metric

Fixing LCP

1. Serve responsive images. Use srcset to deliver appropriately sized images:

<img
  src="product-800.webp"
  srcset="product-400.webp 400w, product-800.webp 800w, product-1200.webp 1200w"
  sizes="(max-width: 768px) 100vw, 50vw"
  width="800"
  height="800"
  alt="Product name"
  fetchpriority="high"
>

Note fetchpriority="high" - this tells the browser to prioritise this image over others. Use it only on the LCP element.

2. Preload the LCP image. Add this to your <head>:

<link rel="preload" as="image" href="product-800.webp"
  imagesrcset="product-400.webp 400w, product-800.webp 800w, product-1200.webp 1200w"
  imagesizes="(max-width: 768px) 100vw, 50vw">

3. Reduce server response time. For WooCommerce, switch to a managed host with server-level caching. For Shopify, this is handled for you - but excessive Liquid complexity can still slow TTFB.

4. Defer non-critical third-party scripts. Move analytics, chat widgets, and social proof tools below the fold or load them on user interaction.

Fixing CLS

1. Always set image dimensions. Every <img> tag needs width and height:

<!-- The browser reserves space even before the image loads -->
<img src="product.webp" width="600" height="600" alt="Product">

For CSS-responsive images, add:

img {
  max-width: 100%;
  height: auto;
}

The browser uses the aspect ratio from width/height to calculate reserved space.

2. Reserve space for dynamic content. If you have a review widget that loads asynchronously, give its container a minimum height:

.reviews-container {
  min-height: 400px;
}

3. Use font-display: swap with size-adjust. This prevents layout shift from font loading:

@font-face {
  font-family: 'BrandFont';
  src: url('brand-font.woff2') format('woff2');
  font-display: swap;
  size-adjust: 105%; /* Tweak until fallback matches custom font metrics */
}

4. Pin banner and header heights. If you have a promotional banner, give it a fixed height so it doesn't shift on load:

.promo-banner {
  height: 48px;
  contain: layout;
}

Fixing FCP

1. Inline critical CSS. Extract the CSS needed for above-the-fold content and inline it directly in the <head>. Load the rest asynchronously:

<style>/* Critical CSS here - header, hero, nav */</style>
<link rel="preload" href="full-styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

2. Defer all non-essential JavaScript. Use defer for your own scripts and async for third-party:

<script src="app.js" defer></script>
<script src="https://analytics.example.com/track.js" async></script>

3. Preconnect to critical third-party origins:

<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="preconnect" href="https://cdn.shopify.com" crossorigin>

4. Remove unused CSS. Audit your stylesheets for rules that no longer apply. Tools like PurgeCSS can automate this, but review the output carefully - dynamic ecommerce content (product badges, variant selectors) can look "unused" to static analysis.

Measuring Your Core Web Vitals

Lab tools like Lighthouse give you a snapshot, but they test from a single location with simulated throttling. For ecommerce-specific insights, PageDiag analyses your store's Core Web Vitals alongside ecommerce-specific factors like structured data completeness, AI Shopping Score, and LLM visibility.

Run your homepage, a product page, and a collection page through PageDiag to get a full picture. Performance often varies between page types - your homepage might score well whilst your product pages suffer from heavy review widgets and unoptimised galleries.

The Conversion Impact

Improving Core Web Vitals isn't just about pleasing Google. Here's what the data shows:

Vodafone improved LCP by 31% → 8% more sales
NDTV reduced LCP by 55% → 50% reduction in bounce rate
Akamai found that a 100ms delay in load time reduced conversions by 7%

For ecommerce, speed is revenue. Measure it, fix it, and keep measuring. Your competitors who don't will fall behind in both rankings and conversions.

Start by scanning your store at pagediag.com - it's free and takes under a minute.