How to Fix Every CLS Finding
The CLS Debugger identifies the specific elements causing Cumulative Layout Shift on your page — the metric Google uses to measure visual stability. CLS over 0.1 fails the threshold. Most CLS comes from a handful of fixable patterns. This index covers each one.
New here?
Start with the
CLS Guide for what the metric measures and why.
By finding type
Each shift source has its own fix. Pick yours:
🖼️ Fix CLS from images without dimensions PLANNED
<img> without width and height attributes. Browser doesn't know how much space to reserve, so layout shifts when image loads. Set explicit dimensions or aspect-ratio CSS.
🔤 Fix CLS from web font swap PLANNED
Font loads late, browser re-renders text in the new font, surrounding layout shifts. font-display: optional or matching fallback-font metrics via size-adjust. The next/font solution.
📺 Fix CLS from ad slots PLANNED
Ads inject content into reserved space — or worse, push content down. Reserve fixed dimensions per ad slot in CSS. The lazy-loaded ad pattern that doesn't shift.
🔄 Fix CLS from late-loaded components PLANNED
React components mounting after page load push existing content down. Reserve space with skeleton loaders, set min-height on containers, the lazy-component pattern that doesn't shift.
📜 Fix CLS from dynamic content insertion PLANNED
Newsletter signup banners, cookie banners, age-gate modals injected after load. Place them strategically (overlay rather than push), or reserve space when they're definitely going to appear.
📐 Fix CLS from responsive image swap PLANNED
srcset picking different image sizes on resize causes shift. Use aspect-ratio CSS to lock the box regardless of which source is loaded.
🎬 Fix CLS from video and iframe PLANNED
Embedded YouTube, Vimeo, social embeds load with their own size. Wrap in a fixed-aspect-ratio container. The padding-bottom trick or modern aspect-ratio property.
🛒 Fix CLS from cart-banner or notification PLANNED
"Item added to cart" bar, "You have unsaved changes" banner, GDPR consent — all push content. Use fixed overlay positioning so the rest of the page doesn't shift.
By platform
CLS root causes by platform:
📰 Fix CLS in WordPress PLANNED
Page-builder image-output without dimensions, lazy-loaded blocks, ad-plugin injection patterns, the font-display patches via plugin.
🛒 Fix CLS in Shopify PLANNED
App-injected components, the announcement-bar shift, theme font-loading without size-adjust, product-image variant swap.
⚛️ Fix CLS in React / Next.js PLANNED
Hydration shifts, lazy-component patterns with skeleton loaders, next/font automatic adjustment, the <Image> component's automatic aspect-ratio.
What our CLS Debugger checks
The debugger records every layout shift during page load, identifies the specific elements causing each shift, calculates the cumulative score, and ranks shifts by impact. For the full reference, see the CLS Guide.
🔎 Find your shifts first
CLS fixes are usually quick once you know where the shifts are coming from.
Run CLS Debugger →