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

Cumulative Layout Shift, or CLS, is one of Google’s three Core Web Vitals. It measures how much a page’s layout shifts unexpectedly while it’s loading. If you’ve ever been about to click a button on a webpage and had it suddenly jump down the screen because an image loaded above it, you’ve experienced a high CLS.

A good CLS score is 0.1 or less. Scores between 0.1 and 0.25 need improvement, and anything above 0.25 is considered poor. CLS is measured throughout the entire page lifecycle, not just during the initial load — so late-loading content, ads, and embeds can all contribute to your score.

What Causes Layout Shift?

The most common cause of CLS is images and videos that don’t have explicit width and height attributes defined. When the browser encounters an `<img>` tag without dimensions, it doesn’t reserve space for it. When the image finally loads, it pushes all the surrounding content out of the way.

Ads and embeds — social media posts, YouTube videos, third-party widgets — are another frequent culprit. These elements often load asynchronously and insert themselves into the page after the surrounding content has already been rendered. Web fonts can also cause layout shift through Flash of Unstyled Text (FOUT), where text is initially displayed in a fallback font and then shifts when the custom font loads in.

Dynamically injected content is another common cause. If your site shows a cookie banner, a promotional banner, or a sticky notification bar that loads after the main content, it can push the rest of the page down and increase your CLS score.

How to Fix Cumulative Layout Shift

The most impactful fix is also the simplest: always define explicit `width` and `height` attributes on your `<img>` and `<video>` elements. Modern browsers use these attributes to calculate the correct aspect ratio and reserve the right amount of space before the resource loads, preventing any shift when it arrives.

For ads and embeds, reserve the space they’ll occupy before they load. Wrap them in a container with a minimum height, or use the `aspect-ratio` CSS property. For web fonts, use `font-display: optional` or `font-display: swap` carefully — `optional` prevents FOUT entirely by only using the custom font if it’s already cached, while `swap` can contribute to shift if the metrics differ significantly from the fallback font.

If you must inject content above the fold dynamically, ensure it’s triggered by a user interaction (like a click) rather than appearing automatically. Shift caused by user-initiated interactions is excluded from the CLS calculation.

Checking Your CLS Score

You can check your CLS score via Google PageSpeed Insights, Google Search Console (under Core Web Vitals), or the Chrome DevTools Performance panel. The Layout Shift overlay in Chrome DevTools is particularly useful — it highlights which elements are shifting and by how much, making it much easier to diagnose the specific cause.

Bear in mind that CLS in Search Console is based on real user data collected by Chrome, so it reflects genuine experiences. Lab tools like Lighthouse may give you a different reading because they can’t replicate all the variable conditions of a real browsing session.