How to fix cwv cls on WooCommerce

Steps for WooCommerce

1. Images: Install the 'Specify Image Dimensions' plugin (free, WordPress.org) to automatically add missing width/height attributes to all images output by WordPress and WooCommerce. Alternatively, use the 'Perfmatters' plugin → Image tab → 'Add Missing Image Dimensions'.
2. Theme: In your child theme's functions.php, ensure add_theme_support('html5', ['img']) is present so WordPress outputs modern image markup. For block themes, check theme.json for any layout that may cause reflow.
3. Fonts: In Appearance → Customize → Additional CSS (or your child theme's style.css), add font-display: swap (with override descriptors if needed) to all @font-face rules. If using Google Fonts via a plugin, switch to 'Local Google Fonts' plugin which gives you control over font-display.
4. Cookie / GDPR banners: In your cookie consent plugin settings (e.g. Complianz, CookieYes), set the banner display style to 'bottom bar' or 'modal overlay' rather than a top push-down banner.
5. Caching / optimisation plugin: In WP Rocket, LiteSpeed Cache, or W3 Total Cache → Media settings, enable 'Add missing image dimensions' and 'Lazy load images'. These tools also defer non-critical JS that may inject shifting content.
6. Verify: Run PageSpeed Insights or use the Chrome Web Vitals extension on your site; target CLS < 0.1.

What is cwv cls?

Cumulative Layout Shift (CLS) measures how much page content unexpectedly moves around while a visitor is looking at it. Every time an image pops in and shoves text down, a banner slides in from a cookie notice, or a font swap causes a paragraph to reflow, that counts as a layout shift. Google adds all those shifts together into a single score; anything above 0.1 is considered "needs improvement," and above 0.25 is "poor." A score of 1.35 (like the example above) means the page is shifting dramatically — visitors are misclicking, losing their place, and bouncing before they buy.

CLS is one of Google's three Core Web Vitals and is a direct ranking signal in Google Search — a poor score actively suppresses your position in search results, reducing organic traffic and revenue. On mobile, where most ecommerce shopping happens, layout shifts are especially jarring: a customer tapping "Add to Cart" can accidentally tap a shifted link instead, killing the conversion. High CLS also signals a low-quality page experience, which increases bounce rate and reduces the trust visitors place in your store. Google's own data shows that sites meeting Core Web Vitals thresholds see measurably better business outcomes than those that don't.

See the complete Cwv cls guide for every platform and the full background.