On This Page: [hide]
What is Cumulative Layout Shift?
Cumulative Layout Shift or CLS is a movement of a webpage on the screen of the user’s browser. One good example to this explain this performance metric is if you visit a website and you about to click on an object like a link or a button and then suddenly your page moves up or down, and an ad suddenly appears, making you click on the ad instead. This movement making the ad appear in the viewport of the user is called CLS.
In this post, we aim to explain to you how you can work with this metric, also known as CLS, towards improving your website.
Generally, Google aims to prioritize websites that are well optimized with a good layout that is strongly oriented towards improving the user experience. The main point of this is the latest trends in focusing on how the user interacts with websites. This user experience priority brings us to Cumulative Layout Shift, which is a Google performance metric that is part of the Core Web Vitals metrics. This is done in order to improve the analysis of how a user interacts with a given website.
And with many websites now focusing on improving and stabilizing their pages and filling their content with multiple different types of pop-ups and other ads that are sometimes a nightmare for user experience, Google has placed the user as a priority.
How Does Cumulative Layout Shift Work?
Since it is a Google performance metric, it is responsible for measuring how stable your content is, visually-wise. One exciting activity it is responsible for is to track how a web page of your site changes from the point it has been created. A very crucial aspect of knowing how “good” its value is.
What Is CLS Score and How Does It Work?
CLS scoring is part of the functions of this Google metric and it ranges from 0 to a higher number as more moving elements of your web page are added throughout your website lifecycle. Someone could say that the lower the value on your web pages, the better the stability of your page layout would be. Google classifies those scores as Poor, Needing Improvement and Good and they look like this:
- Lower than 0.1 – Good CLS Score.
- Between 0.1 and 0.25 – You should improve it.
- Everything above 0.25 – Bad score.
One detail you have to take in mind is that this is not directly responsible for your website rank position in Google, but its main idea is to be a part of the Google Core Web Vitals – a set for measuring performance, meaning that it could suddenly become essential as Google rolls new updates in the future. So keep in mind that it could be important in the months to come.
And since a high result of these values is basically a bad experience for your site users, our recommendations are to try and improve it (lower it).
How to Calculate Your CLS Score?
There can be negative effects on your websites of small and also big impact. A stray ad could lead your customer into purchasing the wrong product, which basically means that you should be careful with how you place your animations and try to keep them at a minimum. But to know exactly how to improve these objects, you need to know how to calculate your CLS score.
To measure what your value for this Google metric, you need to take into consideration the following elements:
- Moving distance.
- Impact region.
- Viewport height.
There are two main factors of measuring this metric:
- Impact Fraction.
- Distance Fraction.
To measure the Impact, you should calculate your Impact Region, which is the area that has been affected by a certain animation or object. It’s usually several familiar frame shapes, like a square or a rectangle, but it could also be more complicated, depending on how you made it.
For the calculation of your Impact, apply the following formula:
area of impact region (frames) / area of viewport = impact fraction
To measure the Distance, you will need to know what it is first. Google only later added distance and it is related to the moving distance of your element before the shift and after it. So to know what it is you need to use this formula:
max move distance / viewport height = distance fraction
So to calculate the overall result for a given element, you have to use Impact Fraction and Distance Fraction, and this will give you the values for one animation on your site:
impact fraction * distance fraction = CLS score for 1 element
The total results can be calculated by simply adding up all of the scores of the different elements.
What Can Increase Cumulative Layout Shift Score?
Google has outlined that the main reasons for high results can end up being:
- Dynamic content.
- Pictures without any specified dimensions.
- Fonts that are causing the so-called Flash of Invisible Text
- Fonts causing Flash of Unstyled Text.t
Activities set to wait for a response from the network before updating DOM (Document Object Mode).
How to Make Cumulative Layout Shift Better?
You can perform the following activities in order to improve it and make it better in Google’s eyes:
1 – Stay away from fonts that are hosted online or if they are hosted online, you should use values for font display like fallback, block, swap, optional or auto. You can also preload some of the font files using link rel = preload for the specific fonts. The last one is basically preloading the fonts as a priority which we would highly reccomend.
2 – Use aspect ratio for resizing images, for example 4:3 or 16:9 instead of image size in pizels, like 800×600 and so on. This will help minimize your risk of increasing its total because it gives your browser the ability to calculate space that is required to show a photo.
3 – Stay away from implementing content that is dynamic and especially over another object on your page that is already active.
If you are interested in learning more about this Cumulative Layout Shift and how to optimize it, we suggest that you check out Google’s extended knowledgebase on Optimizing CLS.
For now, CLS is only directly related to how a user perceives your site, which makes it essential. We believe that given Google’s higher focus on the user interaction insights and overall experience on your website it could become a significant factor in the near future, so if you want to stay on top of things, we suggest that you keep a close eye on it.
If you have any further questions concerning CLS and how it works, do not hesitate to leave us a comment. Our Howtohosting.guide team always aims to answer swiftly and help you out.