Comulative 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.

Conclusion

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!