WooCommerce Core Web Vitals — the most common causes of LCP, CLS, and INP failures and their specific fixes

WooCommerce Core Web Vitals: Fixing LCP (Largest Contentful Paint)

LCP measures how long it takes the largest visible element — usually the hero product image or featured image — to appear on screen. On WooCommerce product and shop pages, the featured product image is almost always the LCP element. Poor LCP on WooCommerce stores is usually caused by one of three issues: the hero image is lazy-loaded (which blocks it), the image is not preloaded in the <head>, or the image is unoptimised (wrong format, too large).

• Never lazy-load the hero image: the loading="lazy" attribute tells the browser to defer the image — but the hero image is above-fold and should load immediately. Remove lazy loading from the featured product image in WooCommerce templates. This single fix often drops LCP by 0.5–1.5 seconds
• Preload the hero image: add a <link rel="preload"> tag for the featured image in wp_head — this tells the browser to fetch it at the highest priority before parsing the page body
• Serve WebP: WebP images are 25–35% smaller than JPEG at the same quality, directly reducing LCP load time
• Use explicit width and height on image: prevents the browser from waiting to know the image dimensions before showing it

WooCommerce Core Web Vitals: Fixing CLS (Cumulative Layout Shift)

CLS measures unexpected layout movement as the page loads — elements jumping around after initial render. WooCommerce Core Web Vitals CLS failures are most commonly caused by: images without explicit dimensions, web fonts causing text reflow (FOUT), and WooCommerce notices injecting content above the page fold after the initial render.

• Add width and height to all images: WordPress adds these automatically from Media Library metadata, but custom templates and third-party plugins often strip them. Audit your product image markup to ensure every <img> has both attributes
• Preload critical fonts: use <link rel="preload" as="font"> for your primary font. Use font-display: swap in CSS — this tells the browser to show text immediately in a fallback font rather than staying invisible until the web font loads
• Reserve space for WooCommerce notices: WooCommerce injects cart/checkout notices dynamically which shifts content. Set a minimum height on the notices container in your CSS to prevent content shift when notices appear
• Fix Cloudflare Rocket Loader conflicts: Cloudflare’s Rocket Loader can change when JavaScript executes, causing layout-dependent scripts to fire at different times and shift content unexpectedly

WooCommerce Core Web Vitals: Fixing INP (Interaction to Next Paint)

INP (which replaced FID as a Core Web Vitals metric in March 2024) measures how long it takes your WooCommerce store to visually respond to a user interaction — a click, tap, or key press. Poor INP on WooCommerce stores is almost always caused by excessive JavaScript execution on the main thread — typically from jQuery, Knockout.js, or plugin scripts that run synchronous blocking operations when a user clicks.

• Audit and remove unnecessary plugins: each active plugin that loads frontend JavaScript increases INP. Deactivate plugins and measure INP improvement with PageSpeed Insights to identify the offenders
• Break up long tasks: JavaScript tasks over 50ms block the main thread and prevent the browser from responding to user input. Use setTimeout(() => {}, 0) or requestAnimationFrame to yield control back to the browser between heavy computations
• Defer non-critical JavaScript: add the defer attribute to non-essential scripts — analytics, chat widgets, marketing pixels — so they do not compete with user interaction handlers

The Google LCP documentation covers Largest Contentful Paint causes and fixes including the WooCommerce Core Web Vitals LCP patterns. The Google CLS documentation covers Cumulative Layout Shift measurement and the image dimension patterns critical for WooCommerce. The Google INP documentation covers Interaction to Next Paint measurement and main thread optimisation. See our WooCommerce page speed optimisation guide and our WooCommerce performance services.

Frequently Asked Questions — WooCommerce Core Web Vitals