What is Cumulative Layout Shift (CLS) and How to Improve it?

The CLS, or Cumulative Layout Shift, is a web usability factor that was introduced by Google at the end of 2020.

As one of the three metrics included in the Core Web Vitals. 

While the rest of the factors measure issues related to page load speed (LCP) or web interactivity (FID).

The CLS deals with evaluating the visual stability of a URL. 

Let’s explain it with an example. 

Surely you have ever reached a web page through Google results and, when you were starting to read the text.

Suddenly you see that it scrolls down because an image or ad is loaded above that text. 

You would surely feel frustrated and you might even inadvertently click in the wrong place. 

The CLS scores these position changes, as we will see below.

What is CLS and Why Does it Matter in SEO?

The CLS is the Cumulative Layout Shift, that is, the “Cumulative Design Change”.

A Google metric that evaluates the unexpected changes in the design that occur during the loading process of a URL.

Within the Core Web Vitals, the CLS is the most abstract as it measures design changes on the web. 

If the text or other elements scroll during loading at the top of the page.

Those changes are cumulative and those that occur in a 5-second window are added together. 

The total CLS is the sum of all of them.

The CLS affects the experience that the user receives and can increase the bounce rate and result in a rejection of the brand. 

Core Web Vitals

For SEOCore Web Vitals like this one are essential.

Since they are part of the positioning factors and most web searches are carried out from mobile devices, more demanding than a desktop version. 

Core Web Vitals are measured from the user’s perspective and allow us to identify areas for improvement. 

In the latest version of Lighthouse, the importance of the different techniques is classified into the following percentages:

  • TBT (Total Blocking Time): 30%
  • LCP (Large Contentful Paint): 25% how long it takes to load the largest visible element that includes the web, it can be an image or a CSS element from the time the request is made to the server until the data begins to be displayed on the screen. 
  • CLS (Cumulative Layout Shift): 15%
  • FCP (First Contentful Paint): 10% First Content Print
  • YES (Speed ​​Index): 10%
  • TTI (Time To Interactive): 10%

Smartphones with 3G or 4G networks have a slower charge than a computer with a fiber connection. 

In addition, the technical characteristics of the device can slow down charging. 

On the one hand,

We must take into account that page speed problems can be due to both server performance and website configuration. 

We must ensure that all resources are adequate. 

Don’t know what your website’s speed metrics are? 

How is the CLS Calculated?

Google has its own scoring system and a mark of 0.1 is the maximum allowed to pass the CLS. 

With such a low number, we must try to achieve total stability of the URL in question.

The formula that Google uses takes into account the impact fraction and the distance fraction:

  • The impact fraction measures the amount of space an unstable element occupies in the window area between two frames. 
  • The distance fraction is the largest distance of any unstable element that has been displaced in the frame (both horizontally and vertically). 

CLS = impact fraction x distance fraction

As we can see in the following image, Google values ​​positively that the CLS is less than or equal to 0.1.

Considers a score equal to or greater than 0.25 very bad, and it needs improvements in the intermediate range.

The CLS is closely related to the user experience (UX) since a bad result can generate frustration in each of the visits. 

This metric does not measure time but the changes in the positions of the elements. 

The more design changes are made to the navigation, the more likely it is that the user will leave and go to another website. 

How to Improve the CLS?

As in all SEO work, it is important to measure, analyze and draw up a strategy to improve. 

In the case of the CLS, we have to make sure that all the images are dimensioned to the maximum size that the frame allows. 

The main cases that generate a poor CLS are:

  • Images without specified dimensions.
  • Embedded ads and iframes without set dimensions.
  • Dynamically injected content.
  • Fonts that cause FOIT and/or FOUT.
  • Actions of the server that sends new DOM requests.

How to Improve the CLS in the Images?

In both images and videos, we must include the size attributes <width> and <height>. 

When we have doubts about whether an image is well delimited.

We can review it with the browser inspector to check what code accompanies a certain image.

These established dimensions will be the reservation of space that Google respects for uploading images and prevent the CLS from negatively impacting our project. 

When we mark a space reservation, we are ensuring that the content does not scroll down if the page takes time to load. 

The more stable the content, the fewer cumulative changes.

If the image is responsive, you can use the srcset attribute with different images and use a “set” of images of different sizes. 

Another option is using CSS to use the aspect ratio (1:1, 16:9).

So that the browser is in charge of calculating the space necessary to display the image, thus avoiding any unexpected movement. 

In the case of ads,

You can choose only ads of a certain size (thus limiting the possibility of obtaining the highest bids) or set the maximum image size of the ad. 

In this way, we will allow all types of ads and if the ad that is displayed is smaller in size, there will simply be white space around it. 

This decision should be made based on the project’s dependence on advertising revenue. 

If our website has dynamic content.

It is advisable to show it with a preview to comply with the Core Web Vitals.

How do the Sources that Cause FOIT/FOUT Affect the CLS?

Sometimes CLS problems are caused by the fonts used on the website. 

When a font takes time to load, it can cause two problems:

  • FOIT (Flashes of Invisible Text) leaves the white space and until you load the font it will not show the text. This error can cause a strong rejection in the user since they may have the feeling that the web is broken and abandoned.
  • FOUT (Flashes of Text without Style). The system font may be different from the one chosen as the main font. FOUT occurs when the site displays a default font until it can be prevented by preloading the resource to override it. Using CSS you can create a rule so that if it takes more than 100 milliseconds to load the font, leave the default font “font-display: optional;”.

The CLS and Core Web Vitals in Semrush

Thanks to Semrush we can audit all the factors that affect SEO from a single place. 

From Site Audit

We can check the Core Web Vitals both on mobile and desktop thanks to the connection with Lighthouse.

Semrush’s Site Audit tool makes it easy to set priorities for technical website improvements. 

The panel shows the severity of the errors in a very intuitive way so that we can make the changes ourselves

Or export them so that the development team can deal with solving them. 

In addition, from Semrush you can schedule a periodic audit of the site to see the impact of the changes.

And that the site is moving towards compliance with Google’s requirements. 

Keep in mind that the data shown in the crUX reports are based on real users of the site in the last 28 days.

So the changes we make will not be reflected at the moment. 

The free version of Semrush also allows a web audit of up to 100 URLs.

In this way, you will obtain a general score for your website.

And you will be able to detect the main deficiencies with the recommendations and solutions to implement for each case.

In summary, we will say that we must maintain Core Web Vitals as optimized as possible. 

To try to keep the CLS as close to zero as possible.

We must reserve a space for each ad unit or image, and preloading the fonts can help us to improve the performance of the website. 

Thanks for Reading.

Leave a Comment