Core Web Vitals - CLS - Cumulative Layout Shift
Cumulative Layout Shift is probably the most important core web vital from a user experience point of view. What is it and what causes CLS? Let's have a closer look.
You open a page and it seems like the content has loaded, and there is this button you want to click. Then, just the moment you press it, another element is rendered and your click goes into the void, or even worse, is handled by a totally different element. I bet you also had this experience.
This is exactly where Cumulative Layout Shift (CLS) comes in.
What is CLS?
CLS is one of the three core web vitals, it is a metric that describes the visual stability of a page during load. In simple terms, CLS tells you how bad unexpected shifting of web elements is for a certain page.
Why is CLS relevant?
As you can already guess from the intro and probably from your own experience, CLS can range from mild annoyance to extremely disturbing by triggering unwanted actions like navigations, purchases, and ad clicks.
In my personal opinion, this might actually be the most important web vital to get right from a user experience perspective.
But even if we completely ignore those unwanted clicks, watching a page load with shifting elements is really not a great user experience. It is actually very disorienting and makes it not only impossible to interact with elements but also very difficult to read something or have a closer look at graphics.
How is CLS measured?
Well, I don't want to bore you too much with the details and we certainly won't go into any complicated maths here. Basically, each shift created by elements increases your CLS score. How much one shift changes this score depends on two factors. The impact fraction, which is the relative size of the element that's moving, and the distance fraction, the distance of the shift.
Layout Shift Score (LSS) = impact fraction * distance fraction CLS = LSS by element 1 + ... + LSS by element n
For us, this means that we want this score to be as low as possible, and typically, depending on how our website is built, it should be possible to reach the perfect score of 0.
A score below 0.15 is good,
the range between 0.15 and 0.25 needs improvement
and anything above that is just terrible.
What causes CLS?
Well, let's start off with what doesn't cause CLS!
CSS transform changes, shifts after input by our users, and shifts below the fold don't count.
With that out of the way, there are some elements that are typically responsible for CLS.
Images: Images are very common on web pages, yet, due to their size, they're typically some of the slowest elements to load. If images do not have fixed a fixed space on the site, they produce significant CLS.
Fonts: Some pages manage to load fonts before the first render, but those that don't will experience CLS score changes due to font loads if the dimensions of elements change because of the new font.
Ads: Very similar to images, a dynamic insertion of ads, without well-defined and reserved space they are put into, results in a late and significant shift on the site. This can be especially annoying for users, as they would accidentally click on an ad.
Videos: Are basically a slower version of the case of images.
Visual Content inserted via JavaScript: This is something we commonly see with page builders and Plugins that modify the Website via JavaScript after the initial render.
How can we measure CLS?
Luckily CLS can be lab-tested, so we have a few, easy possibilities there.
The two most convenient ones are Google's page speed testing site and Google's Lighthouse, which is baked directly into the Chrome browser.
Summary
We have seen that CLS describes the visual stability of a website, by measuring how much of a shift occurs when we load a page. CLS is user-centric and a bad score can be extremely frustrating for visitors. A bad CLS score is typically caused by a load of media objects without defined bounds on a page.
If you enjoyed this article, you might also want to check out some of my other blog posts on Core Web Vitals:
Core Web Vitals - LCP - Largest Contentful Paint
Core Web Vitals - FID - First Input Delay
Core Web Vitals - E-commerce
Sources:
Cumulative Layout Shift (CLS) on web.dev
Lighthouse: Cumulative Layout Shift
Cumulative Layout Shift – Overview of 2021 Google Ranking Factor
What is Cumulative Layout Shift (CLS), And How To Optimize It
