Comulative Layout Shift

« Back to Glossary Index
cumulative layout shift

Isn't it annoying when you accidentally click on the wrong element on a web page because the elements on the page suddenly shifted while loading?

Layout shifts make for a poor user experience, but still occur frequently, especially on mobile devices where the Viewport is limited by smaller screen sizes and resolutions.

Google wants publishers to pay attention to this on-page behavior and reduce it. To achieve this, Google has developed a metric called Cumulative Layout Shift (CLS), which publishers can objectively measure and optimize.

In this article, we'll learn what the CLS score means, why it's important, how it's measured, what factors lead to a poor CLS score, and finally, some best practices to improve the score.

What is the CLS value?

CLS measures how much the content of a web page shifts throughout the rendering cycle - or in other words, it measures the visual stability of the web page.

As an Internet user, you've probably experienced the frustration of having web page content shift in the middle of an interaction, such as when you try to click on a menu item but accidentally click on an ad that then takes you to a third-party website. Besides being annoying to users, layout shifts can also lead to major problems for web publishers, such as high bounce rates and ad policy violations due to accidental clicks.

Since Google CLS is among the three "Core Web Vitals," a low CLS score can drag down the overall CWV score and result in a poor grade. Recent updates to Google's search algorithm favor websites that achieve a good score on the CWV assessment.

To summarize: Improving CLS ratings not only leads to a better user experience, but potentially to better search results and more organic Traffic from Google.

How is the CLS measured?

Whenever an element that is used in the Viewport is visible, changes its starting position, the shift is recorded and the element is classified as unstable. It is important to note that a layout shift is only recorded when visible elements change their starting position on the page, not when a new element is added to the DOM or an existing element changes its size.

The CLS score is composed of two different measures that capture layout shifts: the impact fraction and the distance fraction. The impact fraction measures how unstable elements are to the Viewport between two frames by measuring the sum of the original element and the displacement as a ratio of the total visible area. The distance fraction is the largest distance an unstable element has shifted in relation to the viewport (either horizontally or vertically).

Cumulative layout displacement = impact fraction * distance fraction

What is a good CLS value?

The CLS value grows proportionally to the displacement caused by unstable elements on the page. The lower the CLS value, the better for usability.

  • Very good: Less than 0.1
  • Needs improvement: Between 0.1 and 0.25
  • Bad: More than 0.25

Factors contributing to a poor CLS rating.

A bad CLS rating can be really annoying for your visitors. Imagine you're about to click a button and suddenly all the content slides down because an image was reloaded. Not cool, right? Here are some factors that can contribute to a bad CLS rating:

Unreserved space for media elements

If you include images, videos, or other media elements in your website without reserving the space for them in advance, it can move the content around after the fact. For example, you can use CSS to set the size in advance:

img {
aspect ratio: 16/9;
width: 100%;

Web fonts

Web fonts can also be a problem, especially if they load late and shift the text that is already displayed. Solution: font-display: swap in the CSS.

Dynamic content

When reloading ads or other content, the space on the page can suddenly shift for these new elements. This often happens with poorly integrated ad slots.

Modal windows or pop-ups

If a pop-up or modal window appears and moves the main content, it will negatively affect the CLS.

Multiple actions per page

For example, an Accordion menu that unfolds and moves the rest of the content. While this can be useful, it should be designed so that it does not negatively affect the CLS value.

Buttons or links that are added afterwards

For example, if you reload a "Buy Now" button and it pushes the content away, that's also a factor that can degrade your CLS rating.

JavaScript that moves layout

Sometimes it is the JavaScript on the page, which moves elements around after loading. You need to be especially careful here if you use things like AJAX or dynamic content.

There are many other factors, but these are the most common culprits. The best thing to do is to regularly check your site with tools like Google's Lighthouse or PageSpeed Insights and pay special attention to the CLS values.

How can you improve your CLS score?

A good CLS rating is worth its weight in gold, not only for the Rankingbut also for the user experience. Here are a few tips on how to improve the CLS value of your website:

Use "font-display: swap"

Reserve space for media elements

Make sure you reserve the space for images and videos in advance. By specifying width and height in the HTML or CSS, the Browser Know how much space needs to be reserved. Example:

<img src="bild.jpg" width="300" height="200" alt="Example image">

or in CSS:

img {
  aspect-ratio: 16/9;
  width: 100%;

This tells the Browserthat it should use a replacement font until the web font is loaded. This avoids the text jumping back and forth.

Avoid unexpected pop-ups

If you use modal windows or Pop-ups try to make them so that they don't move the content. Often it's better to display them above the content instead of moving the page below it.

Optimize dynamic content

If you are reloading content such as advertisements or forum posts, reserve space for these as well. This prevents the rest of the content from slipping. Advertising slots should always have a fixed size.

Use CSS Transitions

A smooth transition can sometimes help as well. For example, you could smoothly slide a menu or sidebar in and out instead of doing it abruptly.

Reduce the number of interactive elements

The more things that move on the page, the more opportunities there are for layout shifts. Sure, interaction is important, but everything in moderation.

Avoid JavaScript that moves the layout

This is a big issue and it depends a lot on the individual code. Basic rule: JavaScript should not change or add elements in such a way that it moves the content.

Overall, it's important to regularly check your website with tools like Google's Lighthouse or PageSpeed Insights test. Pay attention to the CLS values and then adjust the above-mentioned settings to improve the rating.


The CLS value (Cumulative Layout Shift) is not only an SEO metric, but it also has a massive impact on the user experience. If your page is fidgeting like a bouncy ball, users will bounce faster than you can say "bounce rate". And if they bounce, that can also have a negative impact on your SEO. So it's a vicious cycle.

Remember that annoying example where you're about to click "Buy" and then suddenly an ad reloads and you click "Sign up for our newsletter" instead. Super frustrating, right? That's exactly the kind of experience the CLS score measures.

So, in the SEO world, the lower the CLS, the better. You should make sure that all images and media elements have a fixed size, Pop-ups and modal windows move content as little as possible and text doesn't jump because a web font is suddenly loaded. Use techniques like font-display: swap in CSS or reserve space for reloaded content like ads and social media feeds.

Overall, the more stable and predictable your site's layout is, the better for everyone: the users, the search engines, and ultimately for you, because satisfied visitors are more likely to convert or come back. So, grab tools like Google's Lighthouse and start optimizing your CLS score. It's worth it!

Hopefully the conclusion helps you to better understand the importance and measures for a good CLS value. If you have any further questions, please feel free to ask!

« Back to Glossary Index


What is Cumulative Layout Shift? arrow icon in accordion
Cumulative Layout Shift (CLS) is a metric used to evaluate the user experience on web pages. It measures how often elements on the page are shifted while the user is browsing the page. This can happen due to technical issues, poor design, or poor performance.
How is CLS measured? arrow icon in accordion
CLS is measured using the PageSpeed Insights metrics tool. It calculates the area or weight of each element on the page that moves as the user navigates the page. The higher the measurement number, the worse the CLS score.
Why is a high CLS rating bad? arrow icon in accordion
A high CLS rating means that many elements on the page move around during navigation. This can be frustrating for the user, as they may not be able to find the element they are looking for. Also, the user experience is affected by long loading, jerkiness, and constant changes in layout arrangement.
Are there limits for the CLS rating? arrow icon in accordion
Yes, the limits for CLS rating are recommended by Google. If the CLS rating is less than 0.1, it is considered acceptable. Anything above 0.25 is considered insufficient.
How to improve the CLS rating? arrow icon in accordion
To improve the CLS rating, you need to solve the technical problems on the website that cause elements to be moved. This includes poor performance and poor design. One should also place elements such as images, text and videos in the same place and create the layout so that it remains stable and predictable.
What happens if the CLS rating is too high? arrow icon in accordion
If the CLS score is too high, the user experience will be affected. Google doesn't rank a web page based on the CLS score alone, but a high score can cause the page to slide in search results.
How does a good CLS rating affect SEO? arrow icon in accordion
A good CLS rating is an indication that the page offers a good user experience. This is taken into account by Google when evaluating the page and can lead to the page being ranked higher in the search results.
How can CLS be taken into account in the design? arrow icon in accordion
To improve the CLS rating, you should make sure that elements are placed in the same place during design. You should also avoid moving elements during navigation. If the navigation adds an element, the element should appear in the same place to ensure a consistent layout.
What technologies can help improve CLS assessment? arrow icon in accordion
There are some technologies that can help improve the CLS rating. These include lazy loading images, an optimized caching strategy, a fast network, and avoiding redundant code.
Is CLS still important? arrow icon in accordion
Yes, CLS is an important part of user experience and is an important factor for SEO. It's important to optimize the CLS rating so that users have the best possible experience on your website.

With top positions to the new sales channel.

Let Google work for you, because visitors become customers.

About the author

Social Media & Links:

Your free gift!
Our SEO strategy

You want more visitors and better Google rankings?

Watch our free SEO strategy webinar now and understand where your SEO levers are and how to tackle them head on.