Cumulative Layout Shift CLS Optimization: The Complete 2026 Guide

Layout shifts frustrate users. Content moving unexpectedly causes misclicks, reading disruption, and abandoned interactions. A 2025 study from Google found that pages with CLS above 0.25 have 23% higher user dissatisfaction scores compared to pages with good CLS. The impact on user experience is immediate and measurable.

CLS also affects conversion rates. Ecommerce sites with high CLS report users clicking the wrong product or accidentally adding items to cart. These friction points reduce revenue. Research from HTTP Archive shows that approximately 17% of mobile origins still have poor CLS above 0.25 as of early 2026.

Images without explicit width and height attributes are the most common cause. When an image loads, the browser does not know its dimensions. The page layout adjusts when the image appears, pushing other content down. This is a layout shift.

Ads and embeds are the second most common cause. Ad frameworks inject content dynamically after the initial render. These elements often arrive with unknown dimensions. The same issue applies to embedded videos, iframes, and social media widgets.

Web fonts cause invisible layout shifts. When a font loads, the text size may change even if the font-family matches. The layout adjusts to accommodate the new glyph metrics. Using font-display: swap reduces the visible impact but does not eliminate the shift.

Dynamic content injections from third-party scripts also cause CLS. Banners, cookie notices, and promo popups shift content when they appear.

Always set explicit width and height attributes on images and video elements. The browser reserves the correct space before the resource loads. This is the single highest impact fix for CLS. For responsive images, use aspect-ratio in CSS combined with width and height attributes.

Reserve space for ads and embeds. Determine the likely dimensions of ad slots and set a container with fixed dimensions. If the ad is smaller than the reserved space, the container still prevents shifts. Use placeholder elements for embeds with the expected aspect ratio.

Use font-display: optional for custom fonts. This eliminates invisible layout shifts from font loading. Users on slow connections see text in the fallback font immediately. The custom font loads if it arrives fast enough.

Avoid inserting new content above existing content. If you must show a banner or notification, push it in at the top and offset the main content. Better yet, reserve space for dynamic banners at page load. Never inject content without allocated space.

Chrome DevTools highlights layout shifts with red rectangles in the Performance panel. Each shift shows the impacted region. Lighthouse reports CLS as part of its performance score. CrUX provides field-level CLS data aggregated from real Chrome users.

CLS is measured across the entire page lifecycle. It includes shifts that happen after user interaction. The final CLS value is the sum of all unexpected shift scores. The browser only counts shifts that lack a user gesture context.

Run PageSpeed Insights on your top pages. Check the CLS score and the list of layout shift sources. Fix every image missing explicit dimensions. Reserve space for all ad slots and embeds. Switch to font-display: optional for custom fonts. Remove dynamic content injection above the fold.

Note the gap between lab CLS and field CLS. Lab tests may miss shifts caused by slow network conditions or third-party script timing. Real users see shifts that lab tools ignore. Field data is the ground truth. Audit quarterly.

• web.dev/cls (https://web.dev/cls)
• web.dev/optimize-cls (https://web.dev/optimize-cls)
• HTTP Archive CLS Report (https://httparchive.org/reports/loading-speed#cls)
• Chrome DevTools Layout Shifts Guide (https://developer.chrome.com/docs/lighthouse/performance/lighthouse-cumulative-layout-shift)