What is CLS and How to Fix Cumulative Layout Shift?

Team TypeStack
Team TypeStack ...
Dec 07, 2022  . 8 min read
shareshareshare
share
How to fix cumulative layout shift (cls) - TypeStack
How to fix cumulative layout shift (cls) - TypeStack
Table of Content

It’s important to learn how to fix the cumulative layout shift as it may severely impact your search engine optimization and overall user experience. A cumulative layout shift is one of the important metrics under Core Web Vitals and essential for your search engine optimization.

It’s true that several elements can negatively impact your website’s health and user experience. But a low cumulative layout shift score can also affect your search engine optimization results negatively. Therefore, it is important to understand the cumulative layout shift to improve the overall performance of your website.

In this guide, we will tell you about — what is cumulative layout shift (CLS), how to fix cumulative layout shift, and the reasons it is important for your website score. Let’s first get started with its definition before we learn the reasons to fix it.

What is Cumulative Layout Shift (CLS)?

What is cumulative layout shift (CLS) - TypeStack
What is cumulative layout shift (CLS) - TypeStack

Cumulative Layout Shift (CLS) is a core web vital metric that helps in measuring how much your website’s different pages start shifting unexpectedly. It simply helps in measuring the way your website’s content has moved around after it is rendered. These layout shifts occur on web pages unexpectedly without any prior user input.

For example, let’s say you are on a certain web page. After clicking the mouse button, the page suddenly shifts because you clicked something else unintentionally. This is known as the cumulative layout shift.

It is important to reduce your Cumulative Layout Shift in order to improve your user experience and the performance of your website. For this, you need to have a good CLS score. So what is a good CLS score? Let’s understand it further in detail.

What is a Good CLS Score?

What is a good CLS score - TypeStack
What is a good CLS score - TypeStack

If you want to reduce your cumulative layout shift, then you need to have a good cls score. The CLS score can be divided into the following stages:

  • Good (Green color) - This stage indicates that your CLS score is good and below 0.1.
  • Needs Improvement (Orange color) - This stage indicates that your CLS score is between 0.1 to 0.25 and needs improvement.
  • Poor (Red color) - This stage indicates that your CLS score is above 0.25 and can severely damage your website’s search result rankings.

Getting a good CLS score is important as it may impact your SEO. So, let’s learn how to measure your cumulative layout shift score.

How to Measure Your Cumulative Layout Shift Score?

How to measure CLS - TypeStack
How to measure CLS - TypeStack

There are two ways to measure your cumulative layout shift score — Lab and Field.

The Lab method tends to stimulate the user’s experience in a controlled environment. Whereas, the Field method is based on real user interaction.

Lab method example using Google Chrome’s Developer Tools — Under this, you can press Ctrl + Shift + I and select the performance panel. Moving forward, go to the Web Vitals option and either click on the reload button to record the page load or click on the record button to start a new recording. Finally, you can go to the Layout Shift tab and see the Cumulative Layout Shift Score under the summary section

Field method example using PageSpeed Insights Tool — First, enter the web page URL you want to run the test on and check the performance score. This tool allows you to see if a particular web page meets Google’s standards or not.

Apart from PageSpeed Insights, you can even use different tools like BigQuery and Data Studio to measure Cumulative Layout Shifts using the Field method.

Although you know the ways to measure the CLS score, it is important to learn — How to Find Which Element is Causing a Poor CLS Score? These elements can cause those unnecessary layout shifts. Therefore, it is advised to identify the elements in order to improve the website's performance.

How to Find Which Element is Causing a Poor CLS Score?

How to Find Which Element is Causing a Poor CLS Score - TypeStack
How to Find Which Element is Causing a Poor CLS Score - TypeStack

The CLS issue can adversely impact your search engine optimization strategy and lower your search rankings. Before we learn the ways to find elements that lead to poor CLS scores, here is the list of the main elements that can cause this.

  • Images and videos with unspecified dimensions or sizes on the website.
  • Fonts that lead to a change in the rendering behavior or cause flashes of unstyled text.
  • Using banner ads and embeds without any reserved space.

These are the top 3 elements you need to watch out for whenever you have a poor CLS score.

There are various tools that can help you in measuring the CLS score. And these tools can even help you in fixing the CLS issue by identifying the elements that are causing the problem.

For example, in the PageSpeed Insights Tools, you can go to the Diagnostics section and view the elements that are causing unexpected layout shifts. This will help you in fixing the elements and improve your site’s health.

How to Improve Your Cumulative Layout Shift Score?

If you want to know how to fix the cumulative layout shift, then it’s important to improve your CLS score. And here’s how you can do it!

Reserve Appropriate Space for Banner Ads & Embeds

Reserve appropriate space for banner ads & and embeds to improve cumulative layout shift score - TypeStack
Reserve appropriate space for banner ads & and embeds to improve cumulative layout shift score - TypeStack

Banner ads surely help your website reach a wider target audience; however, if you don’t have a reserved space for these banners, they will tend to cause unexpected layout shifts. Thus, it is better to reserve space for ads in advance and ensure that the ad container is styled properly.

Similarly, you need to reserve space for embeds too as they can cause layout shifts too. You can use browser developer tools to check the sizes of embeds and avoid poor CLS scores.

Set Width and Height for Images & Videos

You can use aspect ratio for images and videos to match the specified dimensions. Using images and videos without any specific dimensions can cause layout shifts and affect your website.

In case you are unable to use aspect ratio or add dimensions to page HTML, then you can use CSS property for a viable solution.

Preload web fonts

While fixing elements like videos, images, banners, and embeds can positively impact your CLS score, there is another factor you need to majorly focus on. And it is preloading the web fonts. It is one of the most widely recommended methods when it comes to addressing our key question- how to fix the cumulative layout shift.

Google says that using the preloaded web fonts can easily prevent any unexpected layout shifting and lead to cause in the first paint. By using tools like Font Loading API, you can reduce the web font loading time and ensure that you have a good CLS score.

After understanding the vital aspects of how to improve your cumulative layout shift score, let’s move further to understand the impact of CLS on SEO.

Impact of CLS on SEO

The cumulative layout shift significantly impacts your SEO. It is because CLS is one of the important ranking factors on search engines like Google.

A poor CLS score can negatively affect your website’s performance. A poor website will lower your chances to rank higher on the search results. Whereas, a good CLS score of 0.1 or less indicates a good website. The better the website performance, the higher are your chances to rank on Google and other search engines.

Remember, that a website with a good CLS score always has great website visibility on search results and tends to improve your search engine optimization strategy.

Furthermore, it is important for you to avoid large layout shifts. Because they can cause a bad user experience and make your page visually jarring. This is caused solely because of the web page’s elements that start moving around unexpectedly and highly affect user interaction.

Well, no visitors would want to experience large layout shifts on the web pages they visit to get some solutions for their queries. A large layout shift will only lead the users to click the wrong button and unintentionally open a wrong link. This will frustrate the users and persuade them to leave your site.

The more visitors leave your site, the higher the bounce rate. A higher bounce rate is not a good factor for your SEO because a higher bounce rate percentage will negatively affect your website’s health, and performance, and push you down on the search results.

Therefore, it is better to avoid large layout shifts if you want to rank better on search engines like Google. Make sure you follow all the practices to have a good CLS score.

Final Thoughts

Now that you know how to fix the cumulative layout shift, make sure you follow the practices effectively to fix the CLS issue and improve the score simultaneously. Analyze both field and lab data to identify the elements that are causing problems and quickly take the action to fix the issue.

Make sure you never forget to check the unexpected layout shifts while checking other issues too. It often goes unnoticed and can affect your CLS score.

success