Tutorial

What is Cumulative Layout Shift CLS? And how to Fix?

The core web vitals are the matrix used to enhance the user experience of a website. Cumulative Layout Shift or CLS is also one of them that indicates the shift in content. 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.

Cumulative Layout Shift
Cumulative Layout Shift

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

What is Cumulative Layout Shift?

To address an issue, we’ve to understand what the actual problem is. As the name suggests Layout Shift, means something is shifting.

As you already know, Google’s focus is always the user experience. That’s why if elements are shifting in the page layout and spoiling the user experience. Google will punish such websites through this core web vitals update.

Before and After CLS
Before and After CLS

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 be due to ads or images not declared correctly in the web page’s CSS file. To solve this issue, first, we have to inspect the elements that causing the CLS 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 that are causing the CLS issue on the webpage. You can try defining block sizes using CSS.

How it impacts Search Engine Optimization?

Cumulative Layout Shift disturbs the user experience that may lead to an increased bounce rate or pogo-sticking.

Also, the Google search console calculates the total CLS of the webpage during its lifetime. These web vitals directly impact page SEO from mid-June 2021. Timing for bringing page experience to Google Search.

The core web vitals consists largest contentful paint, First Input Delay, Cumulative Layout Shift (CLS). All these factors will be enforced as search engine ranking factors from mid-June2021.

As you already know, the best user experience is one of the significant parts of web page SEO.

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 zero (0) CLS score means that the site is stable. This score must be near 0. If the score increases, stability decreases. Google categories this score into

Cumulative Layout Shift
  • 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 layout of 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 or other Dynamically Injected content

Dynamically injected content can make an extensive shift in the already loaded content of the webpage. 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 that increases 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, 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 property for the fonts CSS.

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 in 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

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!

Ashok Kumar

Ashok Kumar working in the Search Engine Optimization field since 2015. And worked on many successful projects since then. He shares the real-life experience of best SEO practices with his followers on seoneurons.com. You also can learn Advance level SEO for WordPress, Blogger, or any other blogging platform. Stay tuned.

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *