Skip to main content
Back to blog
Technical SEO

Core Web Vitals on Product Pages: Cut LCP Safely

LCP, CLS, INP: the 3 metrics that can lift or drag down a product page. How to improve them without losing image quality or UX.

#core web vitals#performance#lcp#inp#seo
Core Web Vitals on Product Pages: Cut LCP Safely

Core Web Vitals on Product Pages: Cut LCP Without Sacrificing Images

Since 2021, Google has used Core Web Vitals as a ranking signal. In 2026, their weight has kept increasing, and product pages are where this plays out most: high-resolution images, sliders, add-to-cart buttons, dynamic reviews — everything that hurts performance.

Here’s how to optimize the 3 metrics that matter (LCP, CLS, INP) on a product page without losing visual quality or UX.

The 3 Core Web Vitals in 2026

LCP (Largest Contentful Paint) — the time it takes for the largest visible element (typically the main product image) to render. Target: <2.5 s.

CLS (Cumulative Layout Shift) — visual stability: elements should not jump during loading. Target: <0.1.

INP (Interaction to Next Paint) — since March 2024, INP has replaced FID. It measures the delay between a user click (add to cart, opening a menu) and the visual response. Target: <200 ms.

A product page that passes all 3 thresholds in the green has a ranking advantage over pages that do not. The gap can mean a difference of 3–5 positions on a competitive keyword.

LCP on the hero image: the main job

On 90% of product pages, the LCP is the hero image (the first product image). Its weight and load time determine everything.

Image format

  • WebP: 25–35% lighter than JPEG, supported everywhere in 2026. The standard.
  • AVIF: 40–50% lighter than JPEG, better quality. Supported by Chrome/Firefox/Safari since 2022. Prefer it when possible.
  • JPEG: fallback only for very old browsers (<1% of traffic in 2026).

Serve the right format based on the browser with <picture>:

<picture>
  <source srcset="/product.avif" type="image/avif" />
  <source srcset="/product.webp" type="image/webp" />
  <img src="/product.jpg" alt="..." />
</picture>

Dimensions and density

A hero image displayed at 600×600 pixels on screen should not weigh 4000×4000 pixels. Serve the image at the right size + a 2x version for retina screens:

<img
  src="/product-600.webp"
  srcset="/product-600.webp 1x, /product-1200.webp 2x"
  width="600"
  height="600"
  alt="..."
/>

On Shopify, the Liquid syntax img_url: '600x600' handles this automatically. On WooCommerce, use WP Fastest Image Optimizer or Smush.

Smart lazy-loading

Do not lazy-load the hero image (the first visible image): it must load immediately. Add fetchpriority="high":

<img
  src="/product-hero.webp"
  fetchpriority="high"
  loading="eager"
  alt="..."
/>

Lazy-load everything else (secondary images, reviews with photos, related products at the bottom of the page):

<img
  src="/product-thumbnail.webp"
  loading="lazy"
  alt="..."
/>

CDN and cache

All product images should go through a CDN (Cloudflare, Fastly, Bunny). Typical LCP gain: 30–50% in Europe, 50–70% outside Europe.

Shopify includes its own CDN (Fastly). WooCommerce requires explicit setup.

CLS: causes and fixes

CLS on product pages mainly comes from:

Images without dimensions

<!-- ❌ Causes CLS -->
<img src="/product.webp" alt="..." />

<!-- ✅ Reserves space -->
<img src="/product.webp" width="600" height="600" alt="..." />

Even on a responsive image (CSS overriding width/height), specify the HTML attributes — they act as a hint to reserve space before loading.

Ads or banners that appear late

A banner like "Free shipping over €50" that appears 500ms after load and pushes all content downward = catastrophic CLS.

Solution: reserve the space in the initial HTML with min-height, then fill in the content afterward.

Web fonts that change text size

If you load a custom font, it arrives with a delay. In the meantime, text displays in a fallback font with different metrics. When the final font arrives, everything moves.

Solution: font-display: optional or font-display: swap with matching size-adjust:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-display: swap;
  size-adjust: 100%; /* Match fallback metrics */
}

Product image carousel / slider

Sliders are a common cause of CLS when implemented poorly. Rules:

  • Set a fixed height on the slider container (height: 600px, for example)
  • No JS pagination that changes height on click
  • Thumbnails have their dimensions specified

INP: add to cart and other critical interactions

INP measures the worst response delay to user interactions. On a product page, the key interactions are:

  • Click on "Add to cart"
  • Variant change (size, color)
  • Opening a burger menu
  • Scrolling a carousel

Typical causes of high INP:

Blocking JavaScript

Third-party libraries (Facebook Pixel, Google Tag Manager, Hotjar, review widgets) are the main culprits. Every script running on the main thread blocks interactions.

Solutions:

  • Load third-party scripts with defer or async when possible
  • Move them to a Web Worker if critical
  • Consolidate analytics pixels through a single tag (GTM)
  • Add intentional delays: do not load Hotjar before 3 seconds after First Contentful Paint

Heavy JavaScript handlers on click

An "Add to cart" click that triggers 5 API calls, animates 3 elements, and opens a modal can take 500ms to respond.

Optimizations:

  • Optimistic UI: show feedback immediately (button state changes), even if the API takes 300ms to respond
  • Debounce handlers: avoid rerunning calculations on every hover
  • Move animations to CSS instead of JS when possible

Hydration on SPA / frameworks

If you use React/Next/Vue, the initial hydration can block the main thread for 1–2 seconds. During that time, clicks do not work.

Solutions:

  • Server-side rendering with limited interactive content at first
  • Progressive hydration: hydrate critical parts first
  • On Next.js 16+, use "use client" sparingly — the more server-side the component is, the better the INP

Measurement tools

Lab tools (simulated data, useful in development):

  • PageSpeed Insights — fast, public
  • Lighthouse (built into Chrome DevTools) — detailed
  • WebPageTest — more configuration, multi-device testing

Field data (real user data, critical for Google):

  • Chrome User Experience Report (CrUX) — public aggregated data
  • Google Search Console → Core Web Vitals — your site specifically
  • PostHog, Vercel Analytics, Cloudflare Web Analytics — continuous monitoring

Important rule: only field data matters for ranking. A perfect lab score with poor field scores = no positive SEO effect.

By platform

Shopify

Shopify provides decent Core Web Vitals by default. Official themes (Dawn, Studio, Crave) are optimized. Poor Core Web Vitals on Shopify almost always come from:

  • Third-party apps injecting heavy JS
  • Poorly optimized third-party paid themes
  • Uncompressed images

Audit on Shopify: remove unnecessary apps (Online Store → Apps), use a recent official theme, compress images.

WooCommerce

More variability depending on hosting and plugins. Recommended stack:

  • Fast host: Kinsta, WP Engine, Hostinger Cloud (not low-cost shared hosting)
  • Lightweight theme: official Storefront or an optimized custom theme (not Divi or Avada)
  • Essential plugins only
  • Cache plugin: WP Rocket, Cache Enabler
  • Image optimization plugin: ShortPixel, Imagify

Headless

On Next.js with next/image, optimization is automatic. On a custom frontend: implement it manually (formats, lazy-loading, fetchpriority).

FAQ

How long does Google take to reflect Core Web Vitals improvements?

28 days of field data are aggregated for CrUX. After deploying optimizations, expect 4–6 weeks before Google’s score reflects reality. Be patient; do not roll back after 1 week.

Are Core Web Vitals more important than content for ranking?

No. Content (relevance, quality, backlinks) remains the dominant factor. Core Web Vitals are a tie-breaker: between two pages with equivalent content, the one with better CWV ranks higher. Hurting content to gain CWV is counterproductive.

Can I be in the green without a CDN?

For a French site with a French-only audience, yes — if your server is in France and well configured. For international traffic, a CDN is almost mandatory. Free Cloudflare is enough in 80% of cases.

Do I need to sacrifice image quality to improve LCP?

No. The right setup (WebP/AVIF + dimensions + CDN + fetchpriority) lets you serve a 600×600 image at 40 KB with quality equivalent to a 200 KB JPEG. The tradeoff has not been necessary since 2023.

Are Core Web Vitals the same on mobile and desktop?

The thresholds are, but Google measures the scores separately. A page can be "Good" on desktop and "Poor" on mobile (this is common). Google mainly uses mobile metrics for ranking (Mobile-First Indexing).

How much money should I invest in CWV optimization?

Scope it properly: if your pages are already "Good," there is no need to invest more. If you are in "Needs improvement," 1–3 weeks of development on the main fixes (images, third-party scripts, CDN) is usually enough. If you are "Poor" across the board, a technical rebuild may be necessary — start with a full audit.

Ecomptimize automatically optimizes Core Web Vitals on the product pages in your catalog. See Ecomptimize for Shopify or Ecomptimize for WooCommerce.

Did you enjoy this article?