Blog

Cumulative Layout Shift in the Real World

November 9, 2020 · by Nic Jansma ·
Categories:

In this blog, I'll review what cumulative layout shift is and why it matters. 

CLS

What is CLS and why does it occur?

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.

Learn more about cumulative layout shift

With cumulative layout shift (CLS) being such a novel metric, there is plenty more to understand about how to avoid CLS and what the effects of CLS are. You can measure CLS using synthetic monitoring and real-world monitoring (RUM) to get deeper insights into your website or app performance. 

To learn more about CLS, you can dive into Nic Jansma’s excellent - and ever expanding - research on the topic. He provides real-world examples using mPulse RUM data, new findings, and best practices.

About the Author

Nic Jansma is a software developer at Akamai building high-performance websites, apps, and open-source tools.