Cumulative layout shift
Rajendra Zadpe
Cumulative layout shift (CLS) is a measure of how much content shifts on a page and is one of Google’s Core Web Vitals metrics, so there has been a lot of attention on it lately. It will soon be used as a signal in Google’s search engine optimization (SEO) rankings, meaning lower CLS scores may give higher search rankings.
As of September 2020, cumulative layout shift is part of a draft specification of the Web Platform Incubator Community Group (WICG), and not yet a part of the W3C Standards track. It's only supported in Blink-based browsers (Chrome, Opera, Edge) at the moment.
Layout shifts occur when page content moves after being presented to the user. These unexpected shifts in content can be caused by heavy content, incorrect formatting, asynchronous rendering, and varying device types.
Importantly, just like any performance metric, cumulative layout shift is a distribution of values across your entire site. While individual synthetic tests (like WebPagetest or Lighthouse) may only measure a single (or few) test runs, when looking at your CLS scores from the wild in RUM data, you may have thousands or millions of individual data points. CLS will be different for different page types, visitors, devices, and screens.
CLS deteriorates user experience - and SEO
These layout shifts lead to a frustrating visual user experience resulting in misplaced clicks or rendered content being scrolled out of view. Trying to read or interact with a page that has a high CLS can lead to higher bounce rates, low session length, higher page load times, and rage clicks. In some ways, cumulative layout shift is more of a user experience/web design metric than a web performance metric. It measures what the user sees, not how long something takes.
A bad (high) CLS score may indicate that users are seeing content shift and flow around as they’re trying to interact with your site, which can be frustrating. Users who get frustrated may leave your site, and never come back!
Some of those frustrating experiences may be reading an article and having the content jump down below the viewport, causing the visitor to lose their place, mis-clicking, or clicking the wrong button.
It’s good for the websites to move away from just measuring network- and DOM-based metrics and towards measuring more of the overall user experience. We need to understand what delights and frustrates our users.CLS is also one of Google’s Core Web Vitals metrics, so there has been a lot of attention on it lately. It will soon be used as a signal in Google’s Search Engine Optimization (SEO) rankings - meaning a lower CLS score may result in higher search rankings.
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.”
FINAL THOUGHTS
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 Doographics, 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 blog page below.