Core Web Vitals: Cumulative Layout Shift (CLS)

Cumulative Layout Shift, or CLS, is one of Google’s Core Web Vitals—new metrics that are a part of the May 2021 page experience ranking update. There are three Core Web Vitals, and we’re diving into each of them individually to help you prepare your site.

What is CLS?

Cumulative Layout Shift is the sum total of all individual layout shift scores for every unexpected layout shift (the abrupt movement of content on a page) that occurs during the entire lifespan of the page (the period of time the page is kept open). This is commonly due to something like an image or video with unknown dimensions, a font that renders differently than its fallback, or a third-party ad or widget that resizes itself.

Why is it important?

The importance of CLS comes down to the user interface and the user experience your website provides. Many people have firsthand experience with frustrating changes to a website’s content layout, without warning. This can cause users to lose their place, have a hard time finding what they are looking for, lose trust in the website, or worse, cause misclicks and unintended user interaction. This is best illustrated by Google’s CLS article demonstrating how layout instability can negatively affect users.

It is important to note that not all layout shifts are bad, as long as they are intended and expected from the user. Often, these fall under two categories.

User-initiated layout shifts

User-initiated layout shifts are generally experienced when interacting with a form input or navigation. As users interact with a page, more or less content and elements may be revealed.

Animations and transitions

Animations and transitions are usually a part of user-initiated layout shifts, where the interaction goes through an animation and transition to give the user feedback and illustrate the change they initiated. These may also be a part of the element and not require user interaction, such as the change between images in a carousel gallery.

How is CLS measured?

To measure CLS, each layout shift that occurs during the lifespan of a page is assigned a score. Those scores are then summed together. The lower the score, the better. The layout shift score is calculated using two measures of movement: the impact fraction and the distance fraction.

Impact fraction

The impact fraction measures how much space the elements impact the viewport area between two frames. To better understand, if you had an image that took up 50% of the screen and it shifted down 25%, it will have affected 75% of the space in the viewport. This is illustrated in Google’s CLS article, in the impact fraction section.

Distance fraction

The distance fraction measures the greatest distance that elements have moved, relative to the total visible area or viewport. To better understand, if you had an image that shifted down 25%, its distance fraction would be 25%. This is illustrated in Google’s CLS article, in the distance fraction section.

In our two examples above:

layout shift score = impact fraction * distance fraction
0.1875 = 0.75 * 0.25

Your website should aim to have a CLS score of less than 0.1. In our example, this is well above the limit, and seeing as the CLS is a cumulative score, this web page would need improvement. Anything above 0.25 is considered poor and should be addressed as soon as possible.

CLS can be measured with lab or field data. The following tools can be used to calculate these scoring metrics.

Field tools

Lab tools

How to improve CLS

CLS is one of the simpler Core Web Vitals to test for, as it can be experienced just by loading the page. However, the tools above can give you a much more accurate picture of what is attributing to your website’s score.

The most common causes of poor CLS are:

  • Images, videos, or other media without dimensions
  • Dynamically added content
  • Flash of Invisible Text (FOIT) or Flash of Unstyled Text (FOUT) when loading web fonts
  • Waiting for a network response from ads or embeds before updating the web page

To avoid most unexpected layout shifts, consider these three general rules:

  1. Always include height and width attributes, along with setting a CSS aspect ratio on your images, video, and media elements to reserve the required space in the browser.
  2. Prioritize loading elements from top to bottom. Inserting content above already existing rendered content will hurt your CLS score, except in response to a user interaction.
  3. Perform animations and transitions only in response to user interaction or in a way that provides context and continuity for the element.

For a more in-depth look into improving the CLS score, Google has released an Optimize CLS article on the web.dev site.

This concludes our series on Google’s Core Web Vitals. The full series can be found here:

See how Hall can help increase your demand.