How to reduce CLS in Google PageSpeed Insights (with fixes that work)

What CLS is and why it matters

Cumulative Layout Shift (CLS) is one of Google’s three Core Web Vitals. It measures how much visible content moves unexpectedly while a page loads and during its life. A CLS of 0.1 or less is “good”; above 0.25 is “poor”. Layout shift is frustrating — customers tap the wrong button or lose their place — so it affects conversion as well as SEO.

How to find what is shifting

• Run PageSpeed Insights and open “Avoid large layout shifts” to see the elements responsible
• In Chrome DevTools, open Performance, record a load and look for “Layout Shift” entries
• Enable Rendering → “Layout Shift Regions” to highlight shifts in blue
• Check the Core Web Vitals report in Search Console for affected URL groups

Fix 1: Always reserve space for images and video

Add width and height attributes (or CSS aspect-ratio) to every image, iframe and video so the browser reserves space before it loads. This matters most for product grids, hero banners and sliders.

Fix 2: Stop banners and pop-ups pushing content down

Cookie banners, promo bars and “free delivery” strips injected after load are a classic cause. Reserve their space in the initial HTML, or overlay them with position: fixed so they don’t move content.

Fix 3: Load fonts without jumps

Web fonts can change text size when they swap in. Preload key fonts, use font-display: optional or swap, and use size-adjust / ascent-override on the fallback font so both take up the same space.

Fix 4: Ecommerce-specific fixes

• Give product-image galleries a fixed aspect ratio
• Reserve space for reviews widgets, “recently viewed” and recommendations
• Avoid inserting price or stock messages above the add-to-basket button after load
• On Magento, Hyvä themes avoid much of the layout shift common in Luma
• Use transform animations instead of changing top/height

Common mistakes to avoid

Frequently asked questions