What is Cumulative Layout Shift CLS? And how to fix it?

The Cumulative Layout Shift denotes instability in the Layout of a website, where a lower score means higher stability and vice versa. This article will explain how to fix the CLS issue on your website and improve the ranking of your website in Google results.

Google now considers core web vitals as a ranking factor, and CLS is a part of it. Hence, stabling the Layout will not only increase PageSpeed Insights score but also be beneficial for the SEO of the website.

An unstable website spoils the user experience, and to tackle this, the Core Web Vitals of Google came into the game. The core web vitals are a combination of matrices used to enhance the user experience, and CLS is a part of it. From mid-June 2021, core web vitals will also be a factor for search results. From that, we can say the CLS is also essential for the SEO of the website.

This tutorial article will talk about what this CLS is and how it impacts the user experience. We will also discuss how to eliminate CLS.

What is Cumulative Layout Shift?

The cumulative Layout Shift score denotes the stability of a website. You can calculate the CLS score using PageSpeed Insights from Google. The tool will display the CLS score, where Zero scores indicate a highly stable website and a higher score denotes higher instability.

To address an issue, we’ve to understand the actual problems. As the name suggests, Layout Shift means something is shifting. The Layout of a website doesn’t behave as expected by the user.

As you already know, Google’s focus is always the user experience. That’s why Google will punish high CLS score websites through this core web vitals update.

In the above image, you can see the change in layout behavior in its lifespan. Initially, the content WordPress appeared near the top, and later it shifted to the bottom.

This layout change may result from ads or images not being declared correctly in the web page’s CSS file. First, we have to inspect the elements that cause the CLS issue to solve this issue.

Inspect elements that are causing the CLS issue.

To inspect the elements causing the CLS issue, we’ve to perform a PageSpeed Insights test of the webpage. And the test results will look similar to the following.

In the above results, you can filter the results for the CLS issue and then find the large layout shifts option. Here you can see elements causing the CLS issue on the webpage. You can try defining block sizes using CSS.

How to Improve the Cumulative Layout Shift Score?

CLS score can be as low as 0 and can be very high. A website CLS can be checked by performing Google Pagespeed Insights Test. The CLS score is further divided according to its score.

• Best Practice – CLS score 0 to 0.1,
• Needs improvement – Score between 0.1 and 0.25,
• Poor – CLS above 0.25.

So let’s understand how we can achieve a very low or zero CLS score for our website.

Declare the height and width of each media item.

There may be images or other media available on your website that may be culprits for the high CLS score of the website. To avoid this, you can declare the height and width of each media item used on the website. This will reserve a block for that media item and doesn’t cause any shift in the total LaLayoutf the website.

E.g.

<img src="/image-url.png" alt="alternative text for image" title="title of the image" width="960px" height="360px" />

The above example tells you how to load an image on the webpage by reserving its block of 960x360px. Hence there will be no shift in the website layout structure.

Google Adsense Ads Causing High CLS score?

Dynamically injected content can significantly shift the web page’s initially loaded content. For example, the Google Adsense ads unit above the fold section causes a CLS issue because the Adsense ad unit injects dynamic content and causes a massive shift in the Layout, increasing the CLS score of the website.

You have two options to solve this issue, first is very simple to avoid the dynamic content like the Adsense Ads unit above the fold section. And the second is to reserve a block space using CSS. Try using the following structure for the ad unit.

<style>
.sn_responsive_1 { width: 320px; height: 250px;}
@media(min-width:400px) {.sn_responsive_1 {width: 336px; height: 280px;}}
@media(min-width:1100px) {.sn_responsive_1 {width: 728px;height: 90px;}}
</style>

<script async src='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'></script>
<ins class="adsbygoogle sn_responsive_1" style="display:inline-block" data-ad-client="ca-pub-XXXXXXXXXXX" data-ad-slot="XXXXXX"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

You can replace the above code with the existing Adsense ads unit. This method follows the Adsense policy; therefore, you can implement it. For detailed guided, read responsive Adsense ads unit using this method.

If your website has more than 10k sessions per month, then there is a must-try opportunity for you of Ezoic. It can boost Adsense earnings by 150 to 300%. Adsense has a monopoly over the ads. Ezoic will make a completion and boost Adsense earnings.

Google Adsense also slows down your website and can cause LCP issues, follow this method to speed up the website even after using Adsense.

Web Fonts causing a delay in page visibility

A website that uses a lot of font style will always get a high CLS score. This is due to the font load time from the cloud server. To avoid this, one can use the font: display in CSS for the fonts.

You can use the rel=preload in the website’s header section to load the font while connecting to the server so that the loaded fonts can paint the text without any delay.

Suppose you’re using the Roboto family of Google fonts on your website. You can use

<link rel="preconnect" href="https://fonts.gstatic.com">

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOkCnqEu92Fr1MmgVxFIzIFKw.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

This will enable the browser to paint the Layout of the page as soon as possible.

Final Words

This article discussed Google CLS, how different elements cause CLS issues, and solutions. The above solution will help you in getting a zero CLS score. Follow all steps correctly, and you’ll not need to follow any other trick.

If you’ve any feedback, doubt, or query, please ask in the comment section provided below. Thank You!