It’s happened to us all – we click on a button or an option on a website, and just before the moment you’re about to depress your mouse button, the page jumps about erratically like an AWOL bouncy ball, causing us to click on something we didn’t mean to.
This website behavior is far from what is deemed as a good user experience. In fact, quite the opposite – when this happens it hampers the user experience and leaves users feeling frustrated. It’s no wonder site experience has become a more central focus with the release of Google’s Core Web Vitals.
And a key metric that formulates part of Core Web Vitals is a little something called Cumulative Layout Shift. Let’s take a look at what it is and why it’s so important.
What is Cumulative Layout Shift?
Cumulative Layout Shift (CLS) measures the instability of content on a webpage by summing all layout shifts that are not caused by user interaction.
For example, if a user is reading a piece of content on a loaded webpage, an advertising banner pops up and the page suddenly jumps down; this will be constituted as a high CLS score – something you don’t want.
What Causes Cumulative Layout Shift?
Cumulative Layout Shift occurs when the content on a page loads at different speeds. This causes the layout to change and skews what the user is looking at. The main potential causes of CLS are:
- Images without dimensions
- Slow loading advertisements
- Dynamically injected content
- Iframes and embeds without dimensions
- Videos of unknown size suddenly appearing
How Is CLS Score Calculated?
When it comes to Cumulative Layout Shift, there are two factors that go into it: impact fraction and distance fraction.
To be able to calculate the impact fraction, you first need to calculate the impact region.
This defines the area that is affected by the layout shift. Impact region is usually a rectangle but when you have multiple layout shifts, the shape ends up being more complex.
Google generally identifies all affected elements and combines the original area with the shifted version, thus defining the impact region.
To define impact fraction, you need to divide the area of impact region by the area of the viewport:
Area of impact region / area of viewport = impact fraction
To be able to calculate distance fraction, you need to calculate move distance first.
Move distance is the distance before and after the layout shift; how far did the shifted element move?
To calculate distance fraction, divide the max move distance by the viewport height:
Max move distance / viewport height = distance fraction
Now that we’ve calculated the impact fraction and distance fraction, we can move on to the calculation of CLS.
The current formula for calculating a page’s layout shift is:
Impact fraction x distance fraction = layout shift score for a single animation frame
Previously, to calculate the cumulative of layout shifts you would take layout shift score 1 + layout shift score 2 +… = CLS
But Google has created a better solution where they implemented a mechanism of grouping layout shifts in session windows. Obviously next to no one will use the long-hand method to calculate CLS as there are an array of tools that exist to do such, but it’s interesting to know how it’s calculated behind the scenes.
Why Is CLS Important?
CLS is important for two things: your user’s experience and search engine rankings.
We live in an era where users have preset expectations about site performance. If your site doesn’t at least meet those expectations, your user will leave and find their answers elsewhere.
User experience aside, page performance is a Google ranking factor, the better your page performance, the better your chances of ranking.
Paying attention to CLS is crucial – It’s win-win situation where optimised CLS provides a better user experience and boosts your search result rankings.