How to Fix Cumulative Layout Shift (CLS) Issues

Layout shifts frustrate users and hurt your Core Web Vitals score. Here's how to identify and fix CLS problems on your website.

What is CLS?

Cumulative Layout Shift measures how much your page's visual content moves unexpectedly while loading. A CLS score under 0.1 is considered good.

Common Causes of Layout Shift

Images Without Dimensions

When images load without reserved space, content below shifts down.

Fix: Always include width and height attributes on images.

Ads and Embeds

Dynamically injected ads push content around.

Fix: Reserve space for ads with CSS before they load.

Web Fonts

Text resizes when custom fonts load, replacing system fonts.

Fix: Use font-display: swap and preload fonts.

Dynamically Injected Content

Content added above existing content pushes things down.

Fix: Add new content below the viewport or in reserved space.

How to Find CLS Issues

1. Run PageSpeed Insights and expand CLS details
2. Use Chrome DevTools Performance tab
3. Enable "Layout Shift Regions" in DevTools
4. Check Search Console Core Web Vitals report

CLS Best Practices

• Set explicit sizes for all images and videos
• Reserve space for ad slots
• Preload web fonts
• Avoid inserting content above existing content
• Use CSS transforms for animations (not properties that trigger layout)

CLS Thresholds

Related: Core Web Vitals Explained