Cumulative Layout Shift (CLS): what it is and how to fix it

Have you ever heard of Cumulative Layout Shift? Maybe just CLS? If you haven’t, it’s probably time to learn all about it.

We say that because even if you don’t know it yet, a lot of users may be getting their experiences impaired on your website and CLS can be the answer to solving that out for them — and for you.

You already know that user experience is the most important thing to focus on when developing a website. Imagine if that is ruined in a second because the page did something unexpected, like moving the content because it’s not done loading yet. Not so good to keep people engaged, right?

When that happens, it means there is a layout shift. It can go from just annoying the reader of a content a little bit to actually provoking damage, such as when it causes people to click on the wrong link.

This post will help you understand why that happens and how you can make sure it’s not occurring to your users. Keep reading to know all about CLS! This is what you will find:

• Why does layout shift happen?
• What is Cumulative Layout Shift and why it matters?
• What is a good CLS score?
• How to fix Cumulative Layout Shift?

Why does layout shift happen?

There are a few reasons why these problems occur frequently. It all comes down to the elements you have on the page and the way they were put there. Actually, shifts by themselves are not necessarily bad.

If you click on a search bar, for example, and it opens up for you to type, a layout shift happened right before your eyes — but you were expecting it. In fact, you demanded it. It’s very different from when you neither expected nor wanted things to move around.

Therefore, keep in mind we are only talking about the second option here. The bad shifting can be caused by elements such as:

• images with poor or no dimensions;
• wrong use of fonts causing Flash Of Invisible Text (FOIT) or Flash Of Unstyled Text (FOUT);
• embeds, ads, and iframes with no dimensions;
• actions designed to update only when there is a network response;
• content that was injected dynamically.

What is Cumulative Layout Shift and why it matters?

CLS is not the issue but rather a way to work out the solution. Cumulative Layout Shift is a web performance metric. It’s used to identify and measure how many of the shifting on a page’s lifespan is unexpected, therefore, unwanted.

The math is kind of simple: it’s the sum of the total of individual layout shift scores for each of the unexpected ones. It’s important to note that this is user-focused and it has to be like that because the way things are in a developer’s screen is not the same as it is shown on users’ devices.

And why does it matter so much to keep a good CLS score? For two main reasons. One is the user experience we mentioned before. That can mean the difference between a dropout and a qualified lead.

But the other reason is more recent and getting a lot of attention lately: Google wants a good score just as much as the users. The company already announced that this very metric will be a top-ranking factor by 2021. You probably want to keep your organic ranking in good shoes, right?

Whats is a good CLS score?

So now you know why to have a good score but what is a good score, for that matter? In numbers, all you have to remember is that less is more. You are on the green list if your CLS score is less than 0.1.

There are a lot of other parts of this equation happening to analyze the page. It measures impact fraction and distant fraction, for instance, which means CLS can tell how much a shift changed things visually and how much distance was placed after the unstable element moved. Basically, how bad it was. The equation is as follows:

layout shift score = impact friction * distance fraction

So, as long as you keep the score at 0.1 or less, you know this problem is not only rarely occurring but when it does, it’s not the worst experience for the user. Now, you have to figure out how to reduce Cumulative Layout Shift.

How to fix Cumulative Layout Shift?

Element changes are necessary to fix the issue. Of course, you need to identify which elements should change, first. DevTools for Chrome is a way to do that, although it won’t exactly tell you if the shift it’s indicating is either good or bad.

However, there is an easier way to check the most important pages on your website, at least. Simply open them one by one and navigate as a user. You could be surprised by how many things can be perceived just by a different perspective.

You may notice that a particular bad shifting is happening because of an ad, or an image, or something else. It is definitely worth checking to get rid of those specific big troubles.

But there is also more that you can do to your website in general, not just by viewing it page by page. Speed is key to keep the loading to a minimum. And it’s a whole metric by itself, also considered by Google in organic rankings (and they also made a tool to evaluate that).

Your website speed makes a lot of difference on how to improve Cumulative Layout Shift, user experience, performance, and even your company’s sales, when it comes down to it.

Do you want to understand more about how the speed can impact your website so much? Check out this infographic we prepared for you!

<!–[if lte IE 8]>

<![endif]–> hbspt.cta.load(355484, ’47f60a2c-ba01-437b-a5b5-dff3a81a6f58′, {});