Cumulative Layout Shift is a Google metric that forms part of the Core Web Vitals. As part of the Page Experience Algorithm Update, this is likely to become a ranking factor later in 2021.
Definition of Cumulative Layout Shift
CLS is a calculation of how many unique and unexpected layouts shift on the page upon load. This is important because having pages elements change while a user is trying to interact with it is a bad user experience.
A good Cumulative Layout Shift is zero, which means no shifting on the page, and the larger the CLS score, the more movement there is on the page. You may also see an Agg. CLS score (aggregated CLS) in the Page Speed Insights report; this is the lowest typical CLS score for 75% of visits to a group of URLs.
According to Google, to calculate this score, they use “the browser looks at the viewport size and the movement of unstable elements in the viewport between two rendered frames. The layout shift score is a product of two measures of that movement: the impact fraction and the distance fraction”.
This gives the following formula:
layout shift score = impact fraction * distance fraction
In short, a cumulative layout shift is when you’re about to click on a link or a button and then the layout shifts just as you’re about to click, and you end up clicking on a different link instead. Another example is when you’re reading a blog post and an ad or a video loads, and you lose your place. Both of these are frustrating for the user and create a bad experience. Bad UX is what this metric is designed to help resolve.
Why the CLS Matters
Cumulative Layout shift matters because users do not like it when layout shifts happen. A study from SpeedCurve shows that:
- The conversion rate drops as the CLS score increases,
- There is a correlation between bounce rate and CLS score changes.
It is predicted that this metric will have the most significant impact of the three when the Page Experience Google algorithm update rolls out.
How to Optimise for Cumulative Layout Shift
To begin, you can probably get rid of your carousel.
Images can be a big problem with CLS, and we know the importance of high-quality images, but you should do this using the max-image-preview:large setting and compress your images before upload. Remember also to use optimised file names and appropriate alt text. I would also recommend using the width and height size attributes and consider the aspect ratio CSS attribute to save space.
Consider pre-loading to speed up loading, and avoid unexpected actions; users should know what will happen on the page when they begin to interact with it. It is also recommended not to insert content above existing content, except if it responds to an action a user has taken on a page. This goes back to the previous point of ensuring any layout shifts that do happen are expected by the user, and therefore do not cause frustration.
Tools for Measuring Cumulative Layout Shift
Google lists the following as field tools for measuring Cumulative Layout Shift:
Google lists the following as lab tools (with simulated data) for measuring Cumulative Layout Shift:
