Your Ultimate Guide to Cumulative Layout Shift (CLS)

Have you ever been scrolling through a site’s list of products only to be disrupted by an ad loading and pushing the whole page downward? Suffice it to say that it’s a frustrating experience, and depending on the situation, can result in a misclick that takes precious time to reverse.

If this has ever happened to you, then you already know what it’s like to encounter Cumulative Layout Shift (CLS) as a user. But what exactly is CLS, why does it matter from an SEO perspective, how can you measure it, and what can you do to improve yours? Read on to find out and start optimizing your site’s CLS.

What Is Cumulative Layout Shift?

We’ve been anticipating Google’s page experience update for many months, and it finally started rolling out in July 2021. In an effort to encourage sites to provide the most exceptional user experience possible, the update introduced a range of new signals for Google’s algorithms to consider.

Among those is Core Web Vitals, a trio of signals that’s used to gauge how quick and responsive a page truly is. These three signals include:

Largest Contentful Paint (LCP), which measures how long it takes for a page’s largest contentful element to load;
First Input Delay (FID), which measures the time it takes for a page to respond to a user’s first interaction; and
Cumulative Layout Shift (CLS), which measures visual stability.

But what does visual stability mean, exactly? To understand, think back to the last time you were scrolling through a page only to lose your place when the whole layout snapped upward or downward. Perhaps this has even caused you to click a different button than you meant to or frustrated you so much that you left the page altogether.

This type of scenario is known as layout instability or layout shift, and it’s one of many page elements that can create an unsatisfactory user experience. So when we say CLS measures visual stability, we mean that it tells you just how unstable your page’s layout is. As such, the lower your CLS score, the better your user experience.

More specifically, Google recommends that sites aim for a CLS score of 0.1 or less:

A score of 0.1–0.25 is okay but should be further improved, while a score of 0.25 or more is considered substandard and should be fixed as soon as possible.

How Important Is Cumulative Layout Shift?

In light of the recent page experience update, it’s clear that Cumulative Layout Shift matters. But just how crucial is it?

Google itself has classified CLS (and the other two Core Web Vitals) as “an important, user-centric metric.” In other words, whether or not your site achieves good scores across all three Core Web Vitals will directly affect its search engine rankings. As such, it’s essential to maintain a low CLS score in the interest of improving your site’s SERP positions.

But CLS is important from a purely user-centric perspective, too. You don’t have to take our word for it—Akamai software developer Nic Jansma found that as a site’s CLS score increases, so too does its bounce rate:

In other words, the higher your Cumulative Layout Shift score, the more likely visitors are to click the back button and navigate to a competitor’s site instead.

So a low CLS score won’t just help attract users to your site by boosting its rankings—it will make those users more likely to stick around too. Knowing that, it’s easy to see why CLS is so important both on paper and in practice.

How to Measure Cumulative Layout Shift

If you want to discover how your own site’s CLS measures up, you can do so by looking at either lab data (i.e., data generated via automated tests) or field data (i.e., data gathered from real users). Neither type of data is objectively better than the other, but it’s best to use both lab and field data in order to gain a comprehensive understanding of your CLS.

For lab data, you can use:

Chrome DevTools, which is accessible from directly within the Chrome browser;
Google’s Lighthouse, which can be accessed in Chrome DevTools, the command line, or as a Node module, depending on your preference; or
Catchpoint’s WebPageTest, which is accessible from any web browser.

For instance, here’s what it looks like when you use WebPageTest to analyze the CLS of a site as it appears on mobile devices—here, we can see that iloveseo.com has a CLS score of zero:

For field data, you can use:

Chrome User Experience Report (CrUX), which is accessible via Google BigQuery;
Search Console’s Core Web Vitals report, which you can use from within your browser of choice;
PageSpeed Insights, which can also be used from your browser; or
the web-vitals JavaScript library, which you can install either from npm or your content delivery network (CDN).

For example, here’s what PageSpeed Insights has to say about CNN’s CLS and other Core Web Vitals:

What Causes Cumulative Layout Shift?

Layout instability is often caused by slow-loading content such as third-party ads, as this GIF from Advanced Ads so perfectly demonstrates:

But that’s not the only potential culprit—a high CLS score can also be caused by:

unspecified image dimensions;
unspecified ad, embed, and iframe dimensions;
unstable web fonts; and
dynamic content.

If your site is experiencing high CLS, you’ll need to do a little sleuthing to find out what exactly is causing it. But the good news is that once you do, there are clear steps you can take to remedy the situation and ensure your user experience is the best it can be.

How to Improve Cumulative Layout Shift

Depending on the specific cause of your site’s high CLS score, any or all of the following tactics can help get it on track.

Specify Image Dimensions

Specifying the exact dimensions of a site’s images isn’t just important for image optimization and page speed purposes—it can also help keep CLS to a minimum.

If you’re working from directly within a site’s HTML code, all you need to do is add simple attributes as shown in W3Schools’ example:

You can also add dimensions from within WordPress, or use a plugin to speed up the process.

Specify Ad, Embed, and IFrame Dimensions

Images aren’t the only type of content you should specify the dimensions of—the same also applies to ads, embeds, and iframes.

For ads, follow Google’s ad size guidelines to implement either fixed-size or multi-size ads (just be sure to stay away from fluid-size ads).
For embeds, use the HTML width and height attributes within the embed tag.
For iframes, use HTML width and height attributes within the iframe tag.

For example, here’s what it looks like when you specify the size of a fixed-size ad as per Google’s instructions:

Minimize Font Instability

It turns out that not all fonts are created equal: there are desktop fonts (i.e., those that are installed directly on your computer and used within programs such as Word), and then there are web fonts (i.e., those that are specially designed to be used and displayed on websites via CSS).

While the type of font your site uses may seem inconsequential, the truth is that if it includes web fonts then they may be causing layout hiccups and disrupting the user experience.

To avoid this issue, you can use the font-display descriptor in your site’s CSS, adopt Google’s Font Loading application programing interface (API), add the preload HTML value, add the optional value to the font-display descriptor, or even refrain from using web fonts altogether.

Use Dynamic Content Carefully

It’s not hard to see why you might want to use dynamic content, also known as adaptive content. Because it changes based on users’ behavior, it can provide an exceptionally engaging experience that’s tailored to each individual visitor. For instance, dynamic content can display different messages based on a user’s location:

But it’s dynamic content’s ability to change that makes it a threat to CLS. For example, if users are halfway down the page when a piece of dynamic content is loaded (such as a reminder of the items still in their cart), the page’s layout may abruptly shift.

One possible solution is to set aside space for dynamic content instead of letting it load willy-nilly. Another option is to let users instigate the loading process (such as by clicking “load more”), which will put them in control of any layout changes.

Reduce CLS to Boost the User Experience

When it comes to Cumulative Layout Shift, less is definitely more. Fortunately, lowering it isn’t rocket science—using any of the straightforward methods we’ve discussed here, you can significantly change your site’s user experience for the better.

In the end, you (and your rankings) are sure to benefit from the CLS-reducing efforts you implement today. That’s true regardless of whether Google uses Cumulative Layout Shift as a ranking factor or not.

Image credits

Screenshots by author / September 2021
Advanced Ads / December 2020
Nic Jansma / October 2020
Cloudflare / August 2021