Guide to Cumulative Layout Shift (CLS) in 2021 – What & How to fix it?

What is Cumulative Layout Shift and How to Improve it

Have you ever happened to be reading an article online and suddenly something changes on the page without you clicking on anything? Or, be about to click on a link that moves, totally unexpectedly, and you end up clicking something else?

This has to do with the stability of the page and, for the most part, these types of experiences are just annoying. However, it is important to be aware, as these changes can cause real damage in some cases.

To monitor events like this on your website, there is the Cumulative Layout Shift (CLS). It is a user-centric metric and serves to measure the visual stability of a page. CLS also helps to quantify how often users experience unexpected layout changes.

A good CLS score helps to ensure that the page is pleasant.

Cumulative Layout Shift is metric of Core Web Vitals. Don’t know about Core Web Vitals? Read our detailed article on Core Web Vitals.

What are Core Web Vitals?

Core Web Vitals is a set of metrics related to SpeedInteractivity, and Visual Stability.

Google has defined the following as Core Web Vitals:

  • Largest Content Paint (LCP). The amount of time it takes to load the main content of the page. The ideal LCP should occur within 2.4 seconds of the time the page first starts loading.
  • First Input Delay (FID). The amount of time it takes for the page to become interactive. A perfect measurement is less than 100 milliseconds.
  • Cumulative Layout Shift (CLS). The amount of unexpected layout shifting of visual page content. That’s the ideal Cumulative Layout Shift score is less than or equal to 0.1.

This set of metrics is designed to help us measure the user experience in terms of page load speed, interactivity, and visual stability. Site owners and SEO experts can focus on these metrics to provide a better user experience and improve SEO.

Will it Affect the Ranking?

Yes. If Google determines that a page provides a high-quality user experience based on signals of its page experience, the page will likely rank higher in search engines.

However, content relevance is still an important factor when it comes to ranking. Pages with content highly relevant to the query can rank well even if they have low page experience signals.

Ideally, this should accomplish both: provide highly relevant content and signal high page experience.

What is Cumulative Layout Shift (CLS)?

Cumulative Layout Shift (LS) is a layout shift while the page is loading. For example, when we open a page and are engrossed in reading the text suddenly shifts or the image shifts down or up without being asked. Pretty annoying, right?

In some cases This can be very annoying, for example, we accidentally click on an ad or a link to an unwanted place.

This layout shift can be the result of images, text/fonts, videos, and other web elements that are not fully loaded. Google thinks this could break the Page Experience.

Whereas CLS is the accumulated result of LS, meaning that each element that causes a layout shift that occurs is calculated accumulatively and represented as a total number.

What would be a Good CLS Score?

The lower your score on this metric, the more stable your layout will be and the better the experience offered to the user.

To provide a satisfactory user experience, it is recommended that sites have a CLS score of less than 0.1.

Things That Can Improve Cumulative Layout Shifts:

  • Dimensional images
  • Dimensional ads, embeds, and iframes
  • Dynamically injected content
  • Web fonts cause FOIT / FOUT
  • The act of waiting for a network response before updating the DOM

How Does Google Calculate CLS? 

As we have already seen, the CLS is the sum of all the movements of a page layout that are not the result of user interaction.

The bots Google come to this metric by an equation that relates the ratio of the display window impacted by these layout changes, and the distance that these elements are moved. 

What Could be Causing my Pages to be Visually Unstable? 

The visual instability of a website is most commonly related to problems with scaling elements such as images, GIFs, and other content on the page, as well as the poor implementation of ad formats in advertising spaces.

The most common reasons of a poor CLS score are:

  • Images without dimensions
  • Ads, embeds, and iframes without dimensions
  • Dynamically injected content
  • Web Fonts causing FOIT/FOUT
  • Actions waiting for a network response before updating DOM

Why do these Unexpected Movements Happen?

These unexpected movements of the page content usually occur because the page elements are loaded asynchronously, or are added dynamically on the pages above the content that already exists.

The causes can be from a source with strange behavior, which ends up being loaded higher than normal, or third-party ads, which dynamically resize, overlapping the other elements of the page.

So, so that this problem does not go unnoticed by the website development team, it is important to make use of the CLS metric. By measuring the frequency of this situation, it is possible to resolve it quickly, preventing this from happening to real users.

How to improve CLS?

Now it’s time to know how to improve CLS? For most sites, it is possible to improve CLS score and avoid unexpected layout changes by following some steps.

Below, we have mentioned 5 ways to improve Cumulative Layout Shift (CLS) score score significantly.

1. Add Dimensions for Image and Video Elements

In general, Layout Shift occurs due to a shift in the layout caused by the image that is not declared in height and width. When rendering the page, the browser will wait until the image is fully loaded then the browser knows the dimensions of the image.

The solution is to apply the height and width of the image from the start of the page loading, this will eliminate shifting of the content layout underneath.

An example of declaring the height and width of an image if the image on the page is 1200 pixels x 600 pixels wide:

<img src="food.png" alt="food" style="width:1200px;height:600px;">

It is important to remember, the specified image size in HTML documents is pixels (px). So, even if you don’t specify the units in the Width and Height attributes, the browser will still display the image in pixels.

Always include size attributes on images and video elements, or provide the necessary space with a CSS aspect ratio box. This is to ensure that the browser can allocate the correct amount of space in the page while the image is loading.

2. Reduce Image Size

Normally, images represent the majority of bytes transferred on a website page, in addition to occupying a large visual space. Therefore, they can directly impact the load time of the site.

So, for there to be problems due to loading and the like, it is very important that the images have the correct size, according to the space they occupy on their respective pages. When inserting them, you must always treat them properly for display on the web.

3. Web fonts causing FOUT/FOIT

Web fonts can cause unexpected layout shifts. There are two types of layout shifts that can happen:

  • FOUT (Flash Of Unstyled Text): is the amount of time the text is invisible before the browser downloads a font from the web.
  • FOIT (Flash Of Invisible Text): is the length of time that the text is rendered in a fallback font before the browser has downloaded a web font.

Preload your font files and optimize your upload strategy for maximum speed and minimum FOUT.

Here’s how to Preload font files to Improve CLS:

To minimize the FOIT/FOUT period, we want to load our source files from the web as soon as possible. Using <link rel=”preload”> in our HTML <head>.

We can tell the browser to start searching for our sources sooner. Add the following tag at the top of your <head> (before any CSS), setting the href attribute to the URL of your source file:

<link rel="preload" href="/typefesse.woff2" as="font" type="font/woff2" crossorigin>

By adding this tag, we are telling the browser to start loading our font file immediately, whereas it would normally not start until a reference to the specific font was found in your CSS  and found a gift element that uses it.

Browsers are often smart enough to download fonts only if they are needed on the current page. Usage preload replaces this behavior, forcing the browser to download a font, even if it is not used. For this reason, always preload a single format for each source (woff2 if you have one).

4. Dynamically Injected Content

Dynamic content or Adaptive Content refers to website content that is always changing. Therefore, this content is called ‘dynamic’. This ensures any layout shifts that occur are expected.

Content changes will always be based on the behavior, preferences, and needs of site users. 

However, dynamic content is not only found on a website, you can also find examples in email marketing strategies.

This happens because of Popups and banners that shift the rest of the page’s content:

  • Email Pop-ups/ Pop-ups for offers and deals
  • GDPR Notice
  • Text and display ads

If it’s necessary for you to use Dynamic Content, reserve enough space in advance according to the size of that Dynamic Content in the viewport. So that when it loads, it does not cause Cumulative Layout Shift.

5. Resource Preloading (Javascript, CSS, and so on)

The loading time of a page is defined by several factors, including the resources requested by browsers, such as JavaScript, CSS, and the like. They are usually ordered in a queue, almost one by one.

By performing this preload adjustment, we were able to make the browser request some resources at the same time and, thus, it will process the resource together with other elements critical to the page load.

6. Serve Images in WebP Format

WebP is an image format that has superior quality and compression characteristics compared to its older counterparts: JPEG and PNG.

Encoding the images in the WebP format means that they will load faster and consume less mobile data, which results in satisfactory performance of the site, including on mobile.

Conclusion!

We have discussed many effective ways like to improve Cumulative Layout Shift (CLS).

Cumulative Layout Shift is a factor of Core Web Vitals if you need help with this, the team here at WebVitalsDev is more than happy to help you. You can either drop us a message through the email or contact form.

We have a development team that fixes CWV (Core Web Vitals) errors for our clients. So drop us a message or see our Pricing if you’re struggling with Core Web Vitals stuff, and we’ll fix all Core Web Vitals errors for you.

If you enjoyed this article, Don’t forget to share!

Leave a Comment

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