What Is CLS (Cumulative Layout Shift) and How Do You Fix It?

Cumulative Layout Shift (CLS) is a Core Web Vital that measures visual stability — specifically, how much your page’s content jumps around as it loads. If you’ve ever tried to click a button only for a late-loading image to push it down the screen, that shift is exactly what CLS captures. Google scores it on a scale from 0 (perfectly stable) upwards, with a score of 0.1 or under considered “good”.

CLS matters for two reasons. First, it’s a direct Google ranking signal as part of the Page Experience update. Second, it genuinely annoys users — unexpected layout shifts cause misclicks, lost reading position, and a general sense that the site is broken. Reducing CLS improves both your SEO score and the real experience visitors have on your site.

What Causes High CLS?

The most common cause is images and media without declared dimensions. When the browser doesn’t know how tall an image will be before it loads, it reserves no space for it. When the image arrives, everything below it gets pushed down. The fix is simple: always include explicit “width” and “height” attributes on your <img> tags so the browser can reserve the correct space before the file downloads.

Ads, embeds, and iframes injected dynamically are another major cause. An ad slot that appears between two paragraphs after the rest of the page has loaded will shove content down, creating a large layout shift. Web fonts that swap in after the fallback font has already been rendered can also cause CLS, especially if the two fonts have different line heights or character widths.

How to Fix Layout Shifts

For images, adding “width” and “height” HTML attributes is the single most impactful fix. Modern browsers use these to calculate the aspect ratio and reserve the right amount of space, even when CSS is resizing the image responsively. For video and iframe embeds, wrap them in a container with a fixed aspect ratio using the CSS “aspect-ratio” property.

For ads and dynamic content, pre-allocate space using a minimum-height placeholder. If you’re loading web fonts, use “font-display: optional” or preload your fonts so the browser has them ready before it renders text. Tools like Google Search Console and the Chrome DevTools Layout Shift Regions visualisation will highlight exactly which elements are shifting and by how much.

Checking Your CLS Score

Google Search Console’s Core Web Vitals report shows your real-world CLS score based on data collected from Chrome users. Google PageSpeed Insights gives both lab and field data. In Chrome DevTools, the Performance panel marks layout shifts as red bars on the timeline, and the Layout Shift Regions feature draws a visual overlay showing which parts of the page moved and by how much.

A common trap is testing only on a fast connection. Layout shifts often appear more severely on slower connections where images and ads take longer to load, giving other content time to settle before the late-arriving elements push things around. Always test on throttled mobile conditions to get a realistic picture of your CLS score for the majority of your visitors.