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:
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:
Click to enlargeLayout 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:
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:
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:
Source: web.dev/vitals
- 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
