Definition: Cumulative Layout Shift [CLS]


Cumulative Layout Shift is one of Google’s Core Web Vital metrics, which is to be used as a ranking factor for Google search.

CLS measures how much content unexpectedly moves after a webpage loads. This is one of the most annoying problems on the internet, and is explained by this gif from Google:

 

A gif showing a user asked if they want to confirm their order. The movement of their mouse makes it clear they intend to press a "No, go back" button, but at the last moment something loads above the buttons and moves the page. The user accidentally then confirms the order instead of cancelling it.

Source: web.dev/cls

 

Cumulative Layout Shift is the easiest to understand out of Google’s Core Web Vitals. However, there are some nuances in how it is measured. Google’s guide on CLS can be found here.

 

Cumulative Layout Shift Definition

CLS measures the unexpected movement of content after a page begins to load. The key point here is that the movement has to be unexpected. Animations and smooth transitions are not counted by this metric.

If a piece of content loads, and then is moved from its initial position by another piece of content loading, then this counts towards CLS. In order to quantify this, Google combines two other metrics: Impact Fraction and Distance Fraction.

Here is the formula for Cumulative Layout Shift:

The equation for Cumulative Layout Shift (Layout Shift Score = Impact Fraction x Distance Fraction)Click to enlarge

Layout Shift Score = Impact Fraction x Distance Fraction

 

Impact Fraction Definition

Impact Fraction measures the percentage of a page which is affected by the layout shift. This image from Google explains how it works:

 

An image from Google demonstrating the metric 'Impact Fraction'. A piece of content is moved down the screen by something else loading. The impact fraction is where the content originally was, plus where the content moves to. A red dotted line shows this.

Source: web.dev/cls

 

In the image, the piece of content on the left is moved down the screen by something else loading. The Impact Fraction is where the content originally was, plus where the content moves to.

The red dotted line shows this. The impact fraction is the percentage of the screen (expressed as a decimal) within the red dotted line. In this case, 75% of the screen is affected, so the Impact Fraction is 0.75.

 

Distance Fraction Definition

Distance Fraction is how far content is shifted (from where it first appears) by other content. The distance is measured as the percentage of the screen which the content moves from when it first loads. Again, here is an image from Google explaining it:

 

An image from Google explaining the metric "Distance Fraction". A piece of content loads in the left image, and then in the right image it has been shifted down the screen by other content loading. An arrow shows how far the content has been shifted down.

Source: web.dev/cls

 

In this image, a piece of content loads and then is shifted down the screen by other content loading. The arrow in the right image shows how far the content has been shifted down – and this is the Distance Fraction.

In this example, the content has moved 25% down the screen, so the Distance Fraction is 0.25.

Google originally only used Impact Fraction for CLS, but added distance fraction to take into account large piece of content moving only a small amount.

 

Levels of CLS Performance

As with all Core Web Vitals, Google has created three tiers of performance for this metric:

 

 

  • Good = Up to 0.1
  • Needs Improvement = Over 0.1 and up to 0.25
  • Poor = Over 0.25

Google categories performance by considering what occurs for the 75th percentile of users.

 

Technical Information

Outside of the equation for CLS, it is a fairly straightforward concept – don’t let things move after they load. This can most easily be achieved by setting <div> or <span> containers with the specified height of items that load late. It should also be noted that:

  • Items that change size or load late but which do not move other pieces of content do not contribute to your CLS score
  • Using the ‘transform’ CSS property will exclude items from being counted as part of a CLS score
  • CLS is about unexpected shifts in content. To this end, shifts that occur with 500 milliseconds of user input do not count. That is to say if someone clicks on something and it expands then that is fine!

 

Top Tip

Take this seriously! Content moving after a page loads is a serious blight on the internet. We have all read articles that keep flicking up or down as ads appear in content off-screen, so you should know how annoying this is. Annoying websites drive away visitors.

 

Summary

A blue rectangular card with the definition for Cumulative Layout Shift, which reads "AKA CLS. "Core Web Vital" metric for stability. CLS measures how much visible elements on a page unexpectedly (and annoyingly) move after the page starts to load." In the bottom right corner it says theonlineadvertisingguide.com

Glossary Index