Learn about what Cumulative Layout Shift is, how it affects your website & how to fix it.
Cumulative layout shift is an important metric of core web vitals. Like First Input Delay, CLS also measures and understands user experience. It is an important optimization and ranking factor for Google. CLS is a part of Google's Core Web Vitals which ensures a good web performance.
It is a part of technical SEO. It can be solved by the coders who handle the back-end of a website. Moreover, search engine optimization is an essential part of digital marketing. It can generate a lot of business through the website if done correctly.
Let us learn & understand about the Cumulative Layout shift, what causes the shift, & what are the ways to fix it.
What is Cumulative Layout Shift?
Have you ever encountered a sudden change in the website layout? Some elements suddenly appear and change the whole layout of the website. It is because of cumulative layout shift (CLS).
CLS refers to the unpredicted shifting of webpage elements when the page is yet downloaded. The elements that can shift are fonts, videos, images, buttons, inquiry forms, etc.
It is important to optimize CLS and get a good CLS score. Having poor CLS can be a bad experience for a user. Imagine your website throwing elements all over. That will not contribute to a good user experience. It indicates that some coding issues need to be resolved.
Cumulative layout shift (CLS) is a metric that measures visual stability. It helps web developers understand how often users experience sudden shifts in the page content. This can be frustrating for users, especially when they are trying to click on a button or link.
What Causes CLS?
According to Google, 5 primary reasons contribute to poor cumulative layout shift scores. These are:
- Images without any dimensions
- Dynamically injected content
- Embedding Ads & iframes without dimensions
- Web fonts causing FOIT / FOUT
- Actions waiting for a network response before updating DOM.
It is important to notice that CLS is calculated for only visible media. Anything that is not visible on the page, does not contribute to this core web vital.
CLS happens because browsers like DuckDuckGo, Brave, and even Chrome tend to load the web page at different times. The browser gets incomplete information about the dimensions of the media or content on the web page. It doesn't know how much space a media will utilise. Hence, causing a layout shift & a bad user experience.
Embedding ads can also cause layout shifts. When you add the code for an ad and the dimensions are not mentioned, there will be a layout shift. It can be a bad web page element. An ad can cause all the other web page elements to shift. Overall, it can contribute to a bad user experience.
What is a CLS Score?
CLS score is the metric that gives us a number about the amount of layout shift happening on the page. A good CLS score is anywhere between 0 to 0.1.
You can achieve a moderate score if your CLS score lies between 0.1 & 0.25. You need to improve your Cumulative Layout Shift Score when the score is between 0.1 & 0.25.
A poor CLS score includes any score of more than 0.25. It means that the layout shifts happening on the page are heavy and the user experience is bad.
A CLS score is calculated with a formula.
CLS Score Formula
Cumulative Layout Shift = Impact Fraction X Distance Fraction
Now, what are these two unknown terms?
Impact Fraction
The impact fraction is how much the unstable elements have impacted the main elements. In other words, it is the area of the layout shift caused because of the unstable element.
For example, in the above image, the main element covers up to half of the page, which means 50%. An unstable element appears, & the main element has to shift down by 25% of the frame. Hence, the total impact is 75% (50% + 25%) of the frame. Therefore, the fraction of impact is 0.75.
Distance Fraction
Distance fraction is the measurement of the distance by which the unstable elements have moved the main elements. In other words, it is the fraction of the distance the elements have shifted on a frame.
In the above example, the distance caused by the unstable element is 25%. Hence, the distance fraction is 0.25.
As a result, layout shift score = 0.75 X 0.25 = 0.1875
The shifts are calculated only in the frame wherever the unstable element occurs.
How to measure CLS?
You can achieve your CLS score, you can use the following tools:
- PageSpeed Insights
- Google Search Console
- Google Lighthouse
- Web Vitals Tester
- Cumulative Layout Shift Debugger
- Web Extensions
- Chrome Dev Tools
- Chrome User Experience report
How to Fix CLS?
CLS is primarily caused because the media misses dimension sizes in codes. Hence, it is always good to add codes in the dimensions. Moreover, it will ensure that the content or media stays in order and does not move from its place.
If you have ads on your website, you must choose the proper ad partner for your website. A well-reputed ad partner with no malware will provide perfect ads on your website, without any layout shifts. Having an ad slot, where only the ads appear, can also be helpful for a good CLS score.
For web-based font causing FOIT (flash of invisible text) & FOUT (flash of unstyled text), you can use rel=" preload" in the link to download the web font.
On some web hosting sites, like WordPress & Shopify, you can add dynamic content. You can directly embed the dynamic content, like YouTube videos, on the web page. It can cause layout shifts in the page and deteriorate the page experience.
You can have specified dimensions for your web page for this dynamic content to avoid unexpected layout shifts. You can also, upload the media on the content hosting sites and then add it to your website. Make sure that the content hosting site is reputed enough.
A problem with CLS is that it is cumulative, meaning that even if a page only shifts a little bit each time it is loaded, the total shift can add up over time. As a result, it can be hard for users to find content on a page, and it can also lead to them clicking on the wrong thing.
Fortunately, there are ways to reduce CLS. One is to avoid using large images or videos without warning the user first. Another way is, by making sure that all buttons and links are sized correctly and placed in the same spot each time the page is loaded.
By taking these precautions, web developers can help make their pages more user-friendly and prevent frustrated users from going elsewhere.
Final words
Cumulative Layout Shift can be a significant metric for any website as when a user is on your, you don't want them to have a bad experience. Moreover, an unexpected layout shift can make a bad impression on any website.
Imagine being on a website, and everything is shifting below as the page loads. It can increase your frustration and you wouldn't want to be on that website.
Having a good CLS score can ensure that your website layout is good. Moreover, it can help in increasing your ranking as it is a ranking factor.
It is a significant part of technical SEO. In search engine optimization, you can get the best results if you optimize wherever it is possible. That is all from our side. We hope this helps!
Also read: What is First Input Delay - Understanding in Simple Terms
