Cumulative Layout Shift (CLS) score is a page speed metric for websites. It is used to measure the cumulative shift of content on a website within 500ms of the user interaction with the page.
It can be defined as:
The unexpected change of all individual elements of a website which occurs within 500ms of a user’s interaction with the page.
The CLS score is usually between 0 to 0.3 and it plays a crucial role in website speed and performance.
The purpose behind the CLS score is to discourage websites from changing the layout of the webpage when it is loading on a browser. If you are someone who is managing a website, you must have seen that most pages load text first and then images later.
Although this is done to improve page speed score, Google says that layout change shouldn’t occur on the page even if the text is loaded first. Because when the image is loaded, later on, it will change the design of the page. Here is an example of how a CLS score can negatively impact the user experience.
In the example above, the screen on the left side is loaded first. And then, the click me banner appears in the middle of the text and it shifts the text in the green block below. This is called CLS or Cumulative Layout Shift. If a reader had started reading the page, and then the text shifted below, he/she would feel frustrated. This is also a practice observed on many news websites like CNN, BBC, and other news websites. They insert ads in between text and when the user scrolls over it, the banner ad appears shifting the text below. This is irritating for the users as it is directly intercepting their user experience.
How Cumulative Layout Shift is Calculated
Cumulative Layout Shift is the shift in the layout of the page without user input. It is calculated by multiplying the following:
Cumulative Layout Shift (CLS) = Impact Fraction x Distance Fraction
When calculating the CLS score, the browser takes a reference to the viewport size and the movement of the unstable element in-between two rendered frames in the viewport.
The layout shift score is the result of the measure of the movement i.e. impact fraction, and the distance.
In layman’s terms, the CLS score is calculated by the browser when an object impacts the standard layout of the page. A good example of the CLS score can be observed in this video.
Why might CLS numbers be different on Speed Testing Tools?
There are multiple reasons why CLS score numbers are different on each testing tool.
- Different Browsers
In most cases, each testing tool has a different browser for testing CLS numbers. If one testing tool is using Chrome and another is using Canary, both the browsers will load the page differently. That’s why the numbers on each testing tool are different.
- Different Locations
Similarly, servers load pages at varying speeds depending on their proximity to the user’s location. If one test is being conducted from servers in Canada, and another being conducted from servers in Australia, the results are going to be drastically different.
What is a good CLS Score for Websites?
Before we can discuss more CLS scores, it is important to understand what is a good CLS score for websites.
A good CLS score is usually under 0.1. While a bad CLS score is anything above 0.2.
To measure the CLS score, make sure that you test your website performance on at least 3 testing tools. Some of the best CLS testing tools you can use are GTMetrix, Google Page Speed Tool, and WebPageTest.org.
What Causes CLS Issues on Websites?
Here is a list of reasons that can cause high CLS scores on websites.
- 1. Images and Videos without dimensions
If the website has images available but they load after the other content on the website has loaded, then this would directly impact the CLS score.
In the above example, the CLS score of the website drops significantly when the banner loads on the top of the fold. The user was trying to click on the web page, when the banner loads, they accidentally click on it. This leads to a bad user experience. There are even chances that the user will simply hit the back button resulting in a higher bounce rate.
- 2. Ads, embeds, and iframes without dimensions
Another reason why the CLS of a website increases is because of the ad popups, and undefined embeds that emerge when a user is interacting with the page. These intrusive ads not only degrade the user experience but they also lead to bad page score for the website.
- 3. Dynamically injected content
Dynamically injected content on a website is the content that changes based on user preferences. Most websites are running A/B tests based on visitor demographics. The content, therefore, changes when they visit a page. For example, a website owner decides to show a discount offer to people visiting from the US alone. In such a case, they might place the discount offer on a fold between the content page.
This would lead to a shift in the content layout. Google considers this a high CLS score as it can lead to a user experience failure.
- 4. Web Fonts Causing FOIT/FOUT Issues
Another reason behind a bad CLS score is the font website owners use. If the font is rendered from a third party, it can lead to either FOIT or FOUT errors. FOIT means Flash of Invisible Text. This usually occurs during page load when the website is loading the desired font. In the image below, the website shows a blank page at 217ms and a filled page with a font size of 369ms.
The second reason for font leading to CLS issues is FOUT. FOUT means Flash of Unstyled Text. In this case, the font style is changed after a few seconds because the new font is getting loaded on the browser. This can also cause CLS errors because of different page layouts (shifting of page elements).
- 5. Actions waiting for a network response before updating DOM
Sometimes the CLS issue can also occur because of a network error. If the website is waiting for some resources to be loaded and the network is not responding to those requests, the website will keep waiting. Now, when the network responds to those requests, the website will start showing the new information in the designated folds. This can lead to a higher CLS score and it directly impacts user ratings.
- 6. Can Ads Cause CLS Issue for Websites?
Yes! Ads can also cause CLS issues for websites because they load after the whole page has loaded completely. You must have seen on many websites where the ads load when you browse (take mouse pointer) in a certain area on the web page. The reason for ads loading at that time is to capture user attention. However, Google now considers this as a manipulative practice. According to Google, the best way to show ads is to add a placeholder saying ‘This is an Ad space’ or something similar to let the users know that an ad could appear in that place.
These are some of the ways that can lead to higher CLS scores for websites. A higher CLS score means a bad user experience. So, are there any ways to solve this issue? Let’s discuss some of them in detail.
How To Optimize CLS Score for Website?
Here are some of the best ways to optimize the CLS score and bring it down to 0.1
- 1. Embed and iFrames
As we have already discussed, embeds and iFrames can cause layout shifts and therefore a change in the CLS score of a website. The workaround is to create a designated area for the iframe that keeps the layout still when the page is loading. This would make users know that a certain element will appear in a particular area on the page.
- 2. Reserve space for SVGs and Images
Similar to iFrames, SVGs and images can also impact the CLS score of a website when they appear unexpectedly. That’s why Google encourages developers to use CSS aspect ratio for adding the height and width of images within the context of the page layout. This will ensure that users know that an image or a banner will appear in the designated area.
- 3. Show Placeholder for Ads
We have already discussed how Ads can impact the layout shift score. The best way to solve this issue is by adding placeholders where ads will appear on the page.
Even if the page doesn’t load an ad, or the ad is taking too long to display, the user will see the placeholder text and know that this is where an ad will appear. Hence, it won’t disrupt his/her experience of using the website.
- 4. Show Dynamic Content Below the Fold
According to research, users mostly see the first three folds when they load a page. The rest of the page loads afterward. This means they start interacting with that section. Now if something appears in that area after the user starts interacting with it, it will impact the CLS score. The solution to this problem? Simply place the dynamic content below the fold.
Now when a user tries to interact with the page, they won’t be impacted due to the appearance of dynamic content.
- 5. Focus on Speed
Speed has always remained of utmost importance for the users. As internet speeds increase, people are likely to visit websites faster and they are likely to abandon a website even faster. On average, they give each website 3 seconds to judge its appearance. If they see that the website is relevant to their intent, they stay. Otherwise, they leave. So, the website should load completely within the first three seconds otherwise almost 40 percent of visitors will leave it.
When the website loads within 3 seconds, the whole of the content including dynamic content, images, and iframes also loads properly. This means that CLS impact is minimum on user experience.
- 6. Define Animations Size
Often animations also play a crucial role in impacting site performance. When animations are loaded while the user is interacting with a web page, it can disrupt the CLS score. Therefore, developers should define the size of animation within the content to make sure that it stands out separately.
In this image, the animation ‘Click Me’ appears later within the content. This is a bad example of a CLS shift. To fix this problem, users need to add blank space that will be replaced with the button animation when it loads on the browser.
Does Your CLS Score Affect SEO Score?
Many people often ask the question ‘does CLS score impact SEO score’? The simple answer is: Google has added core web vitals as an indicator of search rankings. Therefore, speed and CLS score directly impact SEO score.
Now, how do they impact the CLS score? Here is a small mind map indicating how search rankings are impacted by site speed.
Read on to know how that happens.
- 1. Leads to Bad User Experience
CLS score leads to a bad user experience of a website because it disrupts user actions. If the user was trying to click on one button, due to the accidental appearance of an element on the page, the user clicks another button on the page.
- 2. Disrupts Conversion Funnel
When the user experience is disrupted, the user won’t complete the marketing funnel and simply hit the back button. This means that the conversion point will never be achieved. No matter how great a marketing funnel is designed, and how many touchpoints it includes, if the CLS score is bad, the website will perform badly. A point will come within the marketing funnel where users will stop moving forward and simply hit the back button on the site. Unless the CLS score is fixed, this will lead to disruption of the conversion funnel. So, this will lead to a failure of the whole marketing funnel in essence.
- 3. Leads to Low Avg Page Time
When the user hits the back button, it leads to a lower average page time of the website. Google and other search engines give special importance to metrics like Bounce Rate and AVG Page Time. They use these metrics to identify which websites are meeting user intent. So, if a website has a lower average page time, it automatically means that the website is of low quality. Even if the low average page time is because of the CLS score, it still means that Google doesn’t consider it in good books.
- 4. Leads to Higher Bounce Rate
CLS score is a major factor in increasing the bounce rate because it directly leads to a bad user experience. And, when websites have a higher bounce rate, they are less likely to appear in search rankings.
- 5. The decline in SERPs & Impact on SEO Score
When a website has a lower average page time, and higher bounce rate, it directly results in a decline in search rankings for already ranked keywords, lack of keywords’ growth on search engines, and low traffic volume on website pages.
- 6. Negatively Impacts PPC Score Indirectly
Another thing to note here is that the CLS score doesn’t only impact the SEO score of a website, it also impacts the PPC page score. If the webpage is on the Google ads platform and more people are leaving it due to CLS issues, Google will give it a low page score. The best way to improve the page score is to improve the CLS score itself.
You may ask, what will happen when the website has a low page score? The answer is: The page will not appear on the top slots because the site has a lower page score. Moreover, Google will charge more cost per click for listing it on the search engine.
Can CLS Score Help Site Conversions?
Definitely! CLS Score is not only a ranking metric. It directly impacts website conversions. So, if a website is not loading properly, is not ranking on search engines, then it directly translates to bad site conversions.
People will simply not order a product from a website with a high CLS score, they won’t read stories on websites that have intrusive ads, and they won’t sign-up on websites that have a bad user experience. Unless the site administrators fix the CLS score, the site conversions will never increase.
So, yes, the CLS score directly impacts site conversions.
Conclusion
We hope that you are now aware of the CLS score and how it directly impacts user experience, SEO score, Google ads score – which all combinedly impact the website conversion ratio.
We have also added ways to fix the CLS score of a website such as adding CSS aspect ratio, designating size for images, SVGs, and animations, and placing placeholder text for ads on various web pages of the site.
Feel free to reach out if you have any further questions about CLS.
Let us manage your WordPress Website and attain true peace of mind.
Scale your business today.
Sign up
