Cumulative Layout Shift? What it is and how to fix it!

We never get tired of talking about the essential metrics for a website! And today it's the Cumulative Layout Shift's turn. 

We will explain that phenomenon that almost always happens when you access a website and all the content that appears on your screen moves or is deconfigured, it's happened to you more than once, right? 

And beyond explaining why, the Cumulative Layout Shift is an essential metric to better analyze the core web vitals of your website. 

We want you to leave here with all your questions answered, so let's talk about Cumulative Layout Shift. 

What is the Cumulative Layout Shift?

Chances are that you've already heard us talking about Core Web Vitals. And the fact is that we have touched the subject with a lot of effort, so yes, it is related to these essential metrics since they are the ones that Google takes into account to classify and promote the pages in its search engine.

So the three metrics that the Core Web Vitals have, are related to the evaluation of the site in terms of usability that users can have, and their experience, of course. 

And what factors are taken into account in the Core Web Vitals? The Largest Contentful Paint or LCP, the First Input Delay or FID and the Cumulative Layout Shift CLS. 

The last metric in this analysis has to do with Cumulative Layout Shift. 

It tends to generate user confusion as it is the only one that does not measure its results based on load time but rather measures the visual stability of the site. 

The most common error that is directly related to the Cumulative Layout Shift is when, for example, you access a website and click on a link or menu button and it moves and ends up accessing another link that you didn't want. 

Has this happened to you? It usually happens on websites that aren't fully optimized. 

This error usually appears in elements such as images, videos, buttons and especially contact forms because they tend to weigh much more than the web is able to support; that is the reason why they take longer to load sometimes.  

How to calculate the Cumulative Layout Shift? 

If you want to get the exact result of the CLS, you have to know that Google measures it through the history of design changes that the web has undergone throughout its history. 

This is how, through rendered frames, Google evaluates the window and its elements that may be unstable. 

The result of the Cumulative Layout Shift is equal to the distance fraction and the impact of the displacement:

• Distance fraction : is the factor that measures the displacement distance of an element from its initial position to its final position. This happens in a matter of milliseconds, if in one second, the frame has moved by 10% in any direction, then the distance fraction will be 0.10. 

• Impact fraction : this is the value that measures how the element in instability impacts the viewing window. If for example, in the first frame the object is in the middle of the window and in the second frame it has moved 10%, for Google the value of the impact fraction will be 0.60. 

Then, the final result of the CLS would be the multiplication of the distance fraction by the impact fraction.

How to improve the Cumulative Layout Shift of your website? 

Take note of the following recommendations to improve the Cumulative Layout Shift of your website and as a consequence optimize your site for SEO:

• Include tools that can measure the user experience. We've already mentioned that it isn't necessary to install a thousand plugins on the same website, but you can use the metrics that appear in LightHouse or Page Speed Insights. As a last resort, you could install between one or two web performance analysis plugins.

• If you have ads on your website, check how they're performing. Usually, they're the main cause of a high score in the Cumulative Layout Shift. So our recommendation in that case, is that you choose to place static ads without any kind of movement. 

• Optimize the images and videos of the web, so that they have a standard size and that the weight is the one that corresponds to the capacity of your website. We recommend that you upload images that don't exceed one megabyte in weight, as this will make them load faster. 

• Be careful with the text fonts that you download from the internet and upload to the theme or template of the site. In general, the vast majority of templates or visual layouts give you the possibility to choose from thousands of fonts. So our recommendation is to use any of those, unless you have a style manual already defined that you must follow to the letter. In that case, make sure you install each font and style correctly. Take a look at Google Fonts! There you will be able to see and test an infinite number of fonts that you can easily add to your website and that are guaranteed not to generate invisible text flash. 

Website improvements are gradual, but it is essential that you avoid neglecting the optimization of every detail or metric. 

A website that has a stable health is very attractive to search engines, so it will be key that you improve the Cumulative Layout Shift. 

Remember that the user experience is also an essential factor for Google to raise your website to the top of the ranking, so ensure that the passage through it is positive for those who visit you. 

Let us know in the comments if you have any questions about the Cumulative Layout Shift.