What is the Cumulative Layout Shift (CLS)?

 What is the Cumulative Layout Shift (CLS)?

The Cumulative Layout Shift (CLS), “unexpected content movement” in Spanish, is a user-centered metric for measuring visual stability, which helps to quantify the frequency with which users experience unexpected design changes; a low CLS helps ensure that your website has smooth, natural changes.Have you ever been reading an article when suddenly something changes on the page? Without warning, the text moves and you lose where you were. Or even worse: you're about to hit a link or button, but the instant before your finger drops, WOW !, the link moves and you end up clicking something else. Watch the following video that illustrates how to design instability can negatively affect the user when making a purchase in an online store:

Chiyana already brings us closer to this problem in her post 3 Common Mistakes in Designing for Mobile Websites. Unexpected movement of page content usually occurs because resources are loaded asynchronously or DOM elements are dynamically added to the page on top of existing content.

The blame for these reactions on a website can be an image or video with unknown dimensions, a font that gets bigger or smaller, or especially the most common are a third-party ad or widget that is dynamically resized.

What is CLS?

Cumulative Layout Shift (CLS) is a Google metric for evaluating layout changes, unexpected movements in content. With CLS you can evaluate this problem by measuring the frequency with which these actions occur to your users.
CLS measures the sum total of all the initial design change scores of your website for each unexpected change that occurs during the entire lifetime of the page visit. A layout change occurs every time a visible element changes its position.

What is a good CLS score?

To provide a good user experience, websites should strive to have a CLS score of 0.1 or less, normally static websites. The lower your score, the more stable your design will be.

The official CLS scores used by Google's performance tools are as follows

• Good - CLS below 0.1.
• Can be improved - CLS between 0.1 and 0.25.
• Needs Improvement - CLS above 0.25

.Google recommends that you keep the CLS score below 0.1 to provide a good user experience.

To measure the CLS of your website, you have the following Google tools:

• https://developers.google.com/speed/pagespeed/insights/
• https://support.google.com/webmasters/answer/9205520
• https://developers.google.com/web/tools/chrome-user-experience-report

Why is CLS so important on your website? 

Every day there are several micro-updates in the Google algorithm that determines the

 positioning of web pages in search engines. We are talking about between 500 and 600 updates per year,

 of which most go unnoticed. Google Search does not stop refining and redefining the machinery to

 offer us increasingly precise search results. A couple of times a year and especially at the end of the 

year, Google releases a big update, the kind that makes SEO professionals nervous. These big updates 

are known as Core Updates. CLS was consequently one of the great updates in Google's algorithm at 

the end of 2020, that is why you must be aligned with the new definitions to help position your website

 against that of your competition.

Conclusion

CLS is a Google metric that detects unexpected movements within your website content, measures 

the sum total of all individual design change scores for each unexpected design change that occurs 

throughout the life of your page. This metric is part of the Google search algorithm, so your website

 must be up to par for proper SEO.