Cumulative layout shift which is also called as CLS it’s the one of the core web vitals next to LCP and FID.
We know that LCP used to measure loading performance, FID used to measure interactions and responsiveness in the same way CLS used to measure visual stability.
Cumulative layout shift is a metric that measures the visual stability of the page.
Example while searching for something we have come across many experiences like moving or shifting of blocks like those things, but actually they are the elements moving without stability. unexpected moving of an element in a web page that is loading continuously. Elements like forms, images, videos, and click buttons etc.,
Why is CLS important? How does it affect?
CLS is important because it helps to bring a good Google User experience in a website and also improves the search engine rankings which gives the better user experience on the page but if the score is high then it drastically affects the Google rankings in the search engine and also gives a user a bad experience on the site.
What are the reasons for CLS?
Five reasons for CLS happening in your site explained by google.
- No dimensions in images
- No dimensions in Ads, embeds, iframes
- Dynamically inserted contents
- Caused by webfonts
- Before updating DOM actions waiting for a network response.
What is the good CLS score?
For a good User experience site should have a CLS score less than or equal to 0.1.
If the score is equal to 0.25 are greater than 0.25 which is said to be a poor score.
In between that is from 0.1 to 0.25 needs an improvement
How CLS is calculated?
The calculation involves two stages: impact fraction and distant fraction.
By multiplying the impacts fraction and distance fraction you can get the cumulative layout shift score.
Let us see in detail about the two metrics
Impact fraction
Impact fraction is used to measure the total space that is used by the elements that takes place while viewing on the mobile screen.
Example: if the elements occupied 50% of the mobile screen view and drop by 25% both added together 75%. This value is known as impact fraction and shown as the score of 0.75.
Distant fraction
The second metric is called a distant fraction. This is the space of the element which moves from its original place to its final position as mentioned in above example, the elements in the page moved 25% so CLS is calculated now by multiplying the both.
Impacts fractions x distance fraction = cumulative layout shift score
0.75 x 0.25 = 0.1875.
How to measure CLS?
There are two ways to measure CLS. Google calls it a lab and field.
Lab: Simulating web page downloads of actual user
simulating Moto G4 for generating the CLS score within the lab
Lab tools best for understanding the layout performance before going to the user’s. it opportunitise the publisher to test and solve the layout issue
Some of lap tools are
- Chrome Dev tools
- lighthouse
- Web page test
Some of Field tools are
- Chrome User experience report
- Page speed insights
- search console
- JavaScript library
Hope you guys you all understand about Cumulative layout shift.
