What is Cumulative Layout Shift (CLS)? [New Performance Metric]
“Let me just click the Complete Order button...aaand it’s gone.”
It’s a different level of annoyance when a button you wanted to click vanishes only to be replaced by an ad or pop-up window.
Unfortunately, this happens way too often.
Good news is, Google is moving in against this issue. And the Cumulative Layout Shift (CLS) metric is part of the solution.
CLS represents one of the three Core Web Vitals - Visual Stability.
As part of the Core Web Vitals program, CLS gives Google a better understanding of the user experience on a page.
So, if you care about SEO and user experience, you must improve your CLS score.
But first, you must understand what this metric measures.
Let’s get into that.
What is Cumulative Layout Shift (CLS)?
CLS is a web performance metric. It measures the significance of unexpected layout shifts on a page. Unexpected layout shifts occur when content on the page moves around without user input or prior notification.
A CLS score below 0.1 means a page is visually stable.
Source: web.dev - https://web.dev/cls/
But how does Google compute this score?
By calculating the impact fraction and distance fraction for each unexpected layout shift. These fractions answer two key questions:
- How much of the viewport did the shift affect?
- How far did the elements move during the shift compared to the viewport?
As the impact and distance fractions grow, the CLS score gets worse.
Put simply, the CLS score is the sum total of all individual layout shift scores for each unexpected layout shift.
Check out this webinar by Annie Sullivan if you want a technical deep dive into all the details.
Now that you know what a layout shift is, it’s time to tackle the “unexpected” part.
The Difference Between Expected and Unexpected Layout Shifts
An expected layout shift is just what it sounds like.
You click on something that should change the layout of the page. And it does.
For example, say you’re on your favorite blog. You’re looking for a specific article, so you click the search icon. A search bar opens up.
We’ve been conditioned to expect this result. Search icons look similar and clicking them has the same effect every time.
Now, imagine you open a page and see a video. It has a clickworthy title and one of those shocking thumbnails. You try to click on it but it disappears.
Actually, it didn’t disappear. It moved a few pixels down because an ad popped up. And you clicked on the ad instead of the video.
These are two examples of a layout shift. One is good and the other isn’t. You probably get which is which.
The point is: not all layout shifts are the same.
Some are awesome. When you click a button and it does what you expect, everything goes smoothly. A search bar appears, a new menu opens or a loading animation tells you to wait for a second. These are all expected or user-initiated changes.
On the other hand, some unexpected layout shifts can be awful. Poorly placed ads, pop-ups and weird animations can ruin the user experience on your site. And visitors likely won’t return after a bad impression.
Google also differentiates between user-initiated and unexpected layout shifts.
They flag shifts that occur within 500ms of user interactions with a hadRecentInput attribute. These layout shifts don’t count towards your CLS score.
Now that you know what this new metric is, it’s fair to ask: Does the CLS score really matter?
Is CLS Really That Important?
As of May 2020, CLS doesn’t contribute much to your overall PSI score.
Source: web.dev - “What's New in Lighthouse 6.0”
And if you saw only this picture, you might be tempted to discard CLS all together.
But this 5% doesn't tell the whole story.
On one hand, CLS is an entirely new metric. Google still has to gather real-world data about it. It’ll take a while before we know how important it really is.
On the other hand, CLS is unique. It’s the first PageSpeed Insights metric that doesn’t report the speed of something. You can find it in the PSI report, but it has nothing to do with speed. It measures the user experience more than anything else.
Which brings me to my next point.
CLS is a user-centric metric. Everyone's been going on and on and user-centric design and metrics. Google’s been talking about it for at least 10 years. And the addition of Largest Contentful Paint (LCP) and Total Blocking Time (TBT), along with CLS clearly indicates that user-centric metrics are here to stay.
Finally, CLS is part of Google’s Core Web Vitals program.
Source: Chromium Blog - “Introducing Web Vitals: essential metrics for a healthy site”
These Core Web Vitals - LCP, FID and CLS - will become a part of Google’s ranking algorithm sometime in 2021. If organic traffic is important to your website, you better start learning about them now.
So, you have a new and unique metric that’s part of the modern way of thinking about website performance. In a few months, it will also directly affect organic rankings.
Not much to think about here.
Optimizing your CLS score is a must. Regardless of the small weight it carries right now.
How You Can Check For Layout Shifts
It’s common sense to check your website’s layout shifts.
And you don’t need fancy tools to do it.
Go to a few key pages - the home page, checkouts, ad landing pages - and ask yourself:
- Does this button do what I think it should do?
- Is this ad getting in the way of me clicking a button?
- Are these pop-up windows helping me achieve my goal on the page?
You don’t have to be a UX pro to answer these questions. You just have to put yourself in the shoes of the user.
Which is what the CLS metric tries to do anyway.
You can also ask someone who’s never visited your site to browse it. It’s amazing how much you can learn from watching other people.
You can also use Chrome's DevTools to check Layout Shift Regions.
Right-click on a page you want to analyze and select “Inspect.”
Go to “More Tools” and select “Rendering.”
At the bottom, you’ll see a “Layout Shift Regions” option with a checkbox next to it. Select it.
Now every time a layout shift occurs, the shifted area will be highlighted.
This won’t tell you if a layout shift is “good” or “bad”. But it will help you find a few shifts you might’ve missed otherwise.
Besides ads, you can look for slow loading fonts and animations as a potential source of unexpected layout shifts.
CLS will affect your organic rankings somewhere in early 2021.
The other two Core Web Vitals - Loading and Interactivity - will also join the ranking factors around the same time. So you better learn about Largest Contentful Paint (LCP) and First Input Delay (FID) soon.
All these metrics are now part of your PSI score.
You can (and should) check if your website covers all of them before they become ranking factors.
At NitroPack, we’re running thousands of tests to learn more about the effects of these new metrics. We’re going to publish our findings soon.
If you want to get everything as soon as we're done writing it, subscribe to our newsletter below.