“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.
And in a few months, CLS (along with LCP and FID) will be a direct ranking factor.
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)?
The CLS metric 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.
For a deep dive into all the details of how Google computes your CLS score, check out the webinar below:
Now that you know what a layout shift is, it’s time to tackle the “unexpected” part.
Expected vs. 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 August 2021, CLS makes up 15% of your overall score.
And if you saw only this picture, you might be tempted to discard CLS altogether.
But this 15% 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 them 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”
The Core Web Vitals are now a part of Google’s ranking algorithm. 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. Currently, it also directly affects organic rankings.
Not much to think about here.
Optimizing your CLS score is a must. Regardless of the 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.
Source: forbes.com
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.
How to Fix Your CLS Score
There are three main optimizations you should implement to fix or avoid potential CLS problems:
1. Add width and height descriptors to images and videos
2. Reserve enough space for ads, embeds, iFrames and dynamic content
3. Optimize font delivery to avoid FOUT and FOIT
For more information, check out our article on fixing CLS problems.
Final Thoughts
CLS will affect your organic rankings in May 2021.
The other two Core Web Vitals 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.
You should make sure your website covers all of them before they become ranking factors.
