What exactly is Cumulative Layout Shift (CLS)?

Isn’t it annoying when you accidentally click on the wrong item on a webpage because the elements on the page suddenly moved during loading?

Layout shifts perpetuate bad user experience but are nevertheless quite common, especially on mobile devices where the viewport is limited by smaller screen sizes and resolutions.

Google wants publishers to become more mindful of this on-page behavior and reduce its instances. To help make this happen, Google created a metric called the Cumulative Layout Shift (CLS) score, which publishers can objectively measure and optimize.

In this article, we’ll talk about what a CLS score means, why it matters, how it is measured, factors that lead to poor CLS score, and finally, a few best practices that can help improve the score.

What is Cumulative Layout Shift?

CLS measures how much the content on a webpage shifts or moves during the entire lifecycle of page rendering—or in other words—it measures the visual stability of the webpage.

As a web user, you’ve probably witnessed firsthand how frustrating it is when the content on a webpage shifts in the middle of an interaction, like when you’re trying to click a menu item but accidentally end up clicking on an ad, which then takes you to a third-party website. Aside from being an annoyance to users, layout shifts can also lead to larger problems for web publishers, such as high bounce rates and ad policy violations due to accidental clicks.

Moreover, since Google counts CLS among the three “Core Web Vitals”, a low CLS score can drag down the total CWV score and lead to a failing grade. Recent updates to Google’s search algorithm preferentially rank sites that achieve a passing grade on the CWV assessment.

To sum it up: Improving the CLS score not only leads to a better overall user experience but potentially also better search rankings and more organic traffic from Google.

How is Cumulative Layout Shift measured?

Whenever an element that is visible in the viewport changes its start position, the shift is recorded and the element is considered to be unstable. It’s important to note that a layout shift is only recorded if something causes visible elements to change their start position on the page, and not if a new element is added to the DOM or an existing element changes its size.

The CLS score is a product of two distinct measures that track layout shifts: the impact fraction and the distance fraction. The impact fraction measures how unstable elements impact the viewport between two frames by measuring the union of the original element and the shift as a ratio of the total visible area. The distance fraction is the greatest distance that any unstable element has moved in relation to the viewport (either horizontally or vertically).

Cumulative layout shift = impact fraction * distance fraction

What is a good CLS score?

The CLS score grows in proportion to the displacement contributed by unstable elements on the page. Therefore from a UX standpoint, the lower the CLS score, the better.

• Great: Less than 0.1
• Needs improvement: Between 0.1 and 0.25
• Poor: More than 0.25

Factors that contribute to a poor CLS score

• Not specifying width and height for images
• Ads, iFrames, and embedded elements with no size specified
• Injecting dynamic content on the page
• Web fonts causing flash of unstyled text (FOUT) and/or flash of invisible text (FOIT)
• Actions waiting for a network response before updating the DOM

How can you improve your CLS score?

Here are a few recommendations to reduce unstable elements/shifting behavior:

• Depending on how your site is structured, different webpages may receive different CLS scores. For instance, your article pages may have a better CLS score than the homepage. Start by measuring the CLS score of all major page templates on your site.
• Always define width and height size attributes for images and videos. Define aspect ratios for responsive images. Alternatively, reserve the required space for the elements using CSS aspect ratio boxes. Doing this ensures that the browser can allocate the correct amount of space in the document while the assets load.
• Ad serving can be a significant contributor to layout shift if placements are not properly optimized. Start by statically reserving space for ad slots and avoid collapsing this reserved space by using a placeholder if no ad is returned. Also, take care when placing non-sticky ads at the top of the viewport, as these can push content down.
• Avoid injecting dynamic content above content that has already been loaded, unless in response to a user interaction—in which case the layout shift will be expected.
• Optimize web fonts by setting font:display values, preloading, or using the Font Loading API.
• When using animations, prefer transformation over types that may trigger layout changes.

Depending on how many of these best practices are already being followed, you may have a lot of changes to make for reducing layout shifts. Instead of trying to do everything in one go, it’s a good idea to break it down and measure the incremental effect of rolling out each optimization.

Learn more

• Cumulative Layout Shift (CLS), web.dev
• Optimize Cumulative Layout Shift, web.dev
• Core Web Vitals: Google’s new signals for ranking pages