The Cumulative Layout Shift is a ranking factor that Google attaches more and more value to. This factor indicates how often the content on your website shifts, for example while scrolling. In an ideal world, the content should be completely ‘still’. If this is not the case on your website, this is detrimental to the Cumulative Layout Shift of your website. And therefore for the ranking of your website.
CLS: Cumulative Layout Shift
In 2021, Google suddenly came up with a revolutionary tool; Core Web Vitals. This is a group of factors that influence the page experience of your website. By optimizing these factors, you optimize the experience for your visitors.
Within these factors, the Cumulative Layout Shift plays an important role. As stated above, this factor indicates visual stability. As soon as a visitor starts scrolling on your website, all content blocks and other blocks should be ‘stationary’. However, it happens on many websites that the blocks shift.
Very undesirable as far as Google is concerned. Google indicates that shifting content causes (or can cause) irritations for the visitor. The shifting blocks are a disruption of the website. This also causes a disruption to the experience of your visitor.
Have you ever visited a website where just a button shifted? Because of that shift, you may have clicked on an advertisement, which suddenly leads you to another website. Chances are that you do not want this and that this causes irritations. This is not only the case with yourself, but also with your visitors. You must therefore ensure that all elements on your website are as ‘fixed’ as possible.
The CLS is indicated by a score of 2 decimal places after the dot:
- Prima CLS: a website with a fine CLS has a score of 0.1 or lower. This indicates that in 75% of the page visits the CLS is fine.
- Moderate CLS: A website with a moderate CLS has a score between 0.1 and 0.25. With such a website, there is still some room for improvement in terms of visual stability.
- Bad CLS: A website with a bad CLS has a score of more than 0.25. Such a website is particularly irritating to visit and use.
How can you measure and optimize the Cumulative Layout Shift?
With various tools you can measure the CLS of your website. You can do this, for example, with PageSpeed Insights, with Lighthouse, with Google Search Console and with Chrome DevTools. If the CLS is not to your liking, you can optimize it in several ways.
One of the best ways to optimize the CLS is to customize your images. Experience shows that images generally require the most loading time. Because of that, it is also more likely that the images will shift or cause a shift. By optimizing your images, you significantly improve the visual stability of your website.
You do this, among other things, by giving your images fixed sizes. In addition, make sure that there is enough space in your layout for the images. The more space, the smaller the chance of shifts.
It is also important to focus your arrows very much on your mobile website. The screen of a smartphone is a lot smaller, making the shifts even more annoying. Therefore, try to use as few images as possible on your mobile website.
Furthermore, you should get on with dynamic content. Such content is very nice, but is dynamic. Because of this dynamic, such content is often the cause of shifts. Finally, we advise you to be careful with the fonts on your website. For example, if you use fonts effects, this can also affect the CLS score.
Other Core Vitals
The Google Web Core Vitals consist of three factors. The CLS is one of the factors in this. We’ll tell you a little more about the other two factors below:
- LCP: The Largest Contentful Paint displays the loading speed of the largest element on the web page. For example, this is the largest text box or the largest image. The faster this part loads, the better the page experience is according to Google.
- FID: The First Input Delay indicates the reaction speed. The better this score is, the faster the page responds to the visitor’s input. According to Google, this is also important; no visitor wants to wait for an action that he / she performs himself / herself. Remember that the current internet user is very critical.
Conclusion
Do you want to score with your website? Then get serious about the Google Core Web Vitals. Within these Vitals, the Cumulative Layout Shift plays a crucial role. If you want to improve the CLS of your website, then you have come to the right place. We are happy to optimize the CLS for you, so that the experience of your website is (further) improved. Feel free to contact us to discuss all the possibilities!
