What Is Cumulative Layout Shift (CLS): How To Measure

0
105

Has it ever happened to you that you have opened a website from Google’s SERP and when you are reading that article, suddenly some changes are made in the article without warning or the images and videos in the content start moving from their place or you click on a button and reach on a different link? If this happened then it must have been very annoying for you! And in some cases, they can actually cause harm.

All these things happen in the website when the page is loaded with DOM elements or resources asynchronously on top of the existing content in the post. Apart from this, images and videos have been used without compressing or such third-party ads have been installed which automatically change the size.

What Is Cumulative Layout Shift (CLS): How To Measure

You can use Cumulative Layout Shift (CLS) to check the visual stability of your page. If you want to know What Is Cumulative Layout Shift (CLS): How To Measure it then this article till the end. This article is going to be very useful for you.

What is Cumulative Layout Shift (CLS)?

Cumulative Layout Shift is one of the 3 important metrics offered by Google in the year 2021. Google is going to use CLS as its new ranking signal. The CLS will measure the visual stability of the pages of the website. CLS will inform Google what experience the users are getting from the page of which website. 

Apart from this, CLS, in the viewport, also finds out how many elements and layouts have been shifted in the content.

CLS is a part of Core Web Vitals. CLS is very useful for both website owners and Google. 

What is a good Cumulative Layout Shift score?

CLS Score

If users are getting good experience from your website then only your website will get a good Cumulative Layout Shift score.

But this will be possible only when the visual stability of your website is 0.1 or less. These scores are as follows:

  • Good – 0.1 or less
  • Needs Improvement – Between 0.1 and 0.25
  • Poor – more than 0.25

All this category depends on the layout and elements of your website. Along with this Google also says that it is 75th percentile of the page load to measure, which is divided into desktop and mobile devices. If users get a good experience from your website then only then your website ranks on the first page of Google’s SERP, so you have to work carefully on the score of CLS. 

Why is CLS important?

For your information, let me tell Google that the main objective is to give a good experience to its users. Therefore, Google only places those websites in the first page of its SERP, from which its users get absolutely related information.

Google uses different ranking factors to know the experience of its users. At the same time, Google also keeps making changes to its algorithm. This time Google is going to change the page experience of the search console.

Google is about to roll out new metrics in mid-June 2021. The name of these new metrics is Core Web Vitals. Measures the loading speed and interaction of the pages of the Core Web Vitals website. Here CLS works to measure the layout shift of the pages.

In short, these metrics of Core Web Vitals help developers and SEO to understand websites. 

How to measure Cumulative Layout Shift (CLS)?

Now you know what CLS is and why it is important. Now I will tell you how to measure CLS.

You can measure CLS in 2 ways, first through the field and second by lab.

You can access the field and lab data of the CLS through the performance tools mentioned below. Their names are as follows:

Field tools

  • PageSpeed Insights
  • JavaScript Library
  • Chrome User Experience Report
  • Search Console (Core Web Vitals)

Lab tools

  • Web Page Test
  • Lighthouse
  • Chorme DevTools

Measure Cumulative Layout Shift in JavaScript

You can use the Layout Instability for measuring CLS in JavaScript. You can easily create PerformanceObserver in JavaScript. Here PerformanceObserver’s work is to listen to unexpected layout-shift entries, store them, and log them into the console.

What causes CLS?

There are many reasons for Cumulative Layout Shift, but I have provided information about some important reasons below. which is like this:

1. Video and Image without dimensions

Developers stopped paying attention to the length and width dimensions of videos and images after responsive web design was introduced. Instead, they started using CSS to change the size of videos and images.

Due to which a new problem has arisen that until the images and videos are downloaded, the page space cannot be allocated.

This means that when a user clicks on these videos and images, then they will not work properly because it is necessary to give a shape to any video or image in the viewport then only, it works properly. 

2. Embeds, ads, and iframes without dimensions

When ads are placed in the content, then they increase the CTR of the web page, but as well as, it also significantly disbalances the visible content in the pages.

This happens when the website’s owner uses low-quality ads. These ads without dimension push down the content of the page. Due to which the quality of the page is also greatly affected.

So whenever you use Ads in your content, make sure to compress it.

3. Dynamically allocated content

When bloggers add their YouTube videos and Google Maps to the content, they should not use those videos without resizing them. Because of how much all these dynamic contents will affect the post and how it will affect it, it’s difficult to guess. 

4. Web fonts disbalance by FOIT / FOUT (Flash of Invisible Text and Flash of Unstyled Text)

Layout shifts occur only when web fonts are downloaded or when the fallback font is replaced with a new font (FOUT) or placed in invisible text (FOIT) until the new font is displayed. So always use custom fonts only. 

How to calculate CLS?

 It is very important to know about its fraction before calculating CLS. Here you will see two types of fractions below: first impact fraction and second distance fraction

1. Impact Fraction

Impact fraction measures the ustable elemants affecting the viewport area between two frames. Let me explain it to you through a formula.

Area of ​​Effect / Area of ​​Viewport = Impact fraction

When you open a page of such a website, after clicking on the link, the font elements of the content of that post first appear in a proper manner, shortly after that they are pushed down 25% of the elemants viewport. When elements move so much, it is considered to be 75% of the total viewport. It can be called 0.7 impact fraction in another way.

2. Distance Fraction

Distance Fraction measures the distance moved by unstable elemants relative to the viewport area.

The distance fraction is the largest distance that is divided into the largest dimensions (length and width) of the viewport. You can use the formula given below to calculate distance fraction.

Maximum width / height of viewport = distance fraction

3. Calulate layout shift

In this step the layout shift score will be calculated. The effect fraction will be multiplied by the distance fraction to calculate the single animation frame of the Layout Shift score. The formula;

impact fraction x distance fraction = layout shift score 

All these formulas are very important to calculate CLS.

How to Optimize CLS?

When you learn how to calculate CLS, you must optimize the page of your website. One thing you alway keep in mind is that whenever you add image and videos elements in the post,or you include size the attributes of those elements in the images, or you reserve those elements with the required space with the ratio box of CLS. 

By doing this you will benefit that when the image and video elements are loaded then they will be loaded in the right place in the right amount in the browser documents.

The second thing you have to do is to never add excessive content to the existing content, except for user interaction in the post. Prioritize animation quality images in Layout. 

Conclusion

If there is any type of problem in the layouts of your website, you can find it by looking in the cumulative layout score (CLS)  and then you can solve that problem. You will find CLS in the core web vitals which will be present in the page experience of the search console.

One thing you always have to keep in mind is that you will be able to rank on the first page of your website SERP only when you give a good experience to your visitors.

For this, you have to focus on the largest contentful paint (LCP), first input delay (FID), and cumulative layout shift. And for these three also you have to optimize your article. In the coming time, through these three, Google will find out in detail which websites are getting good experience from the users and will then rank the websites according to the same results.

With this, I hope that my article (What Is Cumulative Layout Shift (CLS): How To Measure) will prove useful for you.

FAQ: What is Cumulative Layout Shift (CLS)?

I notice that many bloggers are still confused about CLS. Because of this, he is also searching a lot of questions related to CLS on the internet. But they are unable to get answers to their questions. So in this article, I will answer the 3 important questions asked by him.

Q1. How can you reduce Cumulative Layout Shift in WordPress?

Ans. Most bloggers use WordPress for their articles, so I chose this as the first question in my article. To reduce Cumulative Layout Shift in WordPress, you have to host fonts locally, resize and use images and videos elements and also focus on FOIT. Apart from this, avoid heavy animation in content and also reduce the optimized CSS in WP Rocket.

Q2. How can you view CLS in Chrome?

Ans. You can use the Lighthouse inside the Google Dev Tool to view your CLS score in Chrome. For this, you have to first open Google dev tools by pressing CTRL + SHIFT + I (Windows) or CMD + Option + I (Mac) buttons and then go to the Lighthouse button at the top. In this, you have to hit Generate Report and you can check CLS performance as well.

Q3. How can you check your CLS issues?

Ans. To check your CLS issues, you can take help of your Google search console and PageSpeed ​​Insight. Apart from this, you can also use Chrome Extension. One reason for having CLS issues can be lazy loading or deferred loading.

Leave a reply

Please enter your comment!
Please enter your name here