CLS: Solving for Cumulative Layout Shift

Cumulative Layout Shift is a pagespeed metric of Google’s Core Web Vitals. In today’s post, learn how to solve for CLS to make your pages faster.

The announcement of Google’s new Page Experience algorithm brings us a series of new Web Vitals, or metrics regarding the pagespeed and experience of your website.

Of these new Web Vitals, perhaps the most radically different metric from previous pagespeed measuring tools is the new Cumulative Layout Shift (CLS).

What is the new CLS, and how do you optimize for it?

What is Cumulative Layout Shift?

First, what is Cumulative Layout Shift (CLS)?

CLS measures how much your page content shifts as a page loads, or as the user scrolls, given variables such as DOM elements loading.

[Crickets.] Okay, let’s try again in human terms:

Ironically, due to an almost-universal obsession with pagespeed, we’ve all embraced lazy, asynchronous and deferred loading.

While all of these tactics are great for making sure your pages load quicker for the user, there are side-effects: Some parts of the page load out of order, causing the content to bounce around, so to speak.

You’ve likely experienced this when browsing the web, on your own site or other websites.

The first, and most obvious, example of this is when you see a website start to load for the first time and the first screen view begins to bounce around as various objects start to load at different times.

CLS doesn’t end in the first screen view, either. Imagine you’re scrolling and reading the content, only for an image, video or advertisement from above to load, pushing the section you’re reading down further.

Worse yet, imagine there was a button you were trying to press at that very moment, or you were attempting to scroll down the page and you ended up clicking on the wrong thing.

Maybe you clicked on an ad by mistake (don’t you hate online advertising?) or a link that took you to another page.

Whatever the case, it’s not a great experience and there’s a reason Google is pushing us all to fix it by making it part of their Page Experience algorithm next year.

How do you measure CLS?

There are several tools offered by Google that can help measure the CLS of your site. Chances are if you’re here, it’s because you know of the most obvious one: Google Search Console.

If you have your site registered with Google Search Console, it will alert you under Core Web Vitals if any of your pages are failing or have a warning for CLS. This is a great place to get a list of pages that are failing CLS.

To actually test a page for CLS, you still have a few more tools.

The next one we’ll be talking about is PageSpeed Insights (or you can use Lighthouse, the underlying tool that powers PageSpeed Insights).

PageSpeed Insights measures what it calls a “Lab” result, or when PSI itself visits your page and whether it observes any CLS.

This typically measures only the first screen view, so it may not be the most useful when it comes to fully debugging your CLS.

Within PageSpeed Insights, however, you’ll also notice “Field Data” and “Origin Summary” results if you have enough visitors to your page.

This data illustrates how real world users are experiencing CLS and other Web Vital metrics in the real world, using CrUX.

At the end of the day, that’s the more important number because it’s what Google is measuring in the real world.

So how do you emulate that?

Google offers a Chrome Extension that helps you measure CLS as you browse your website.

As you scroll, you can test things at various speeds and using various connections to see if you can replicate any CLS issues.

How do you fix CLS issues?

Now that you can see how CLS is measured on your page, and hopefully the objects causing it, how do you fix these issues?

While a lot of this requires some technical knowledge, there are some common causes you can keep an eye out for.

Third-Party JavaScript

It’s important to note the common causes of CLS. If you’re running third-party JavaScript, it may render things such as related content, share buttons, etc. and you’ll likely see these cause CLS as they load.

This is because, as we mentioned earlier, JavaScript can load in various orders. Components adding visual elements to your page are likely to do so after other aspects of your page have loaded.

Given that this code is, by definition, beyond your control, the best thing you can do is push third-party JavaScript visual elements below the first screen view, similar to how Mediavine handles ads.

The further down the page an element is, the more time it has to load before a user gets there, thus avoiding a potential layout shift.

Another solution is to pre-define the height of objects before JavaScript runs, keeping in mind that this will most likely entail reaching out to the third party running the JavaScript to help you fix it.

Lazy or Deferred Loading

Another common cause is lazy loading or defer loading. Again, the irony of Google encouraging this practice to solve pagespeed issues is not lost on us — but it can cause objects to load after page load, causing a noticeable shift.

The key to solving these? Making sure whatever plugin you’re using for lazy loading or deferring is defining a placeholder to replace when it loads.

Asynchronous CSS and Fonts

A big trick WordPress optimization plugins use is to asynchronously load your CSS after the page loads.

This removes what’s called render blocking, or things preventing your site from loading but will cause things to flash when they load.

Again, this is a case of Google giving you things to balance: PageSpeed vs CLS. Can you solve it all?

You’ll likely have to work with your optimization plugins … or consider Trellis, which is now available to the public.

Optimize Ads for CLS

With Mediavine, especially if you run our Optimize for PageSpeed modes, your ads are already pushed below the first screen view.

This means that the lab shouldn’t find any CLS issues related to Mediavine. However, due to the fact that CLS is measured throughout the experience, there are potential issues that ads can cause.

This is why we recommend you enable our new Optimize Ads for CLS feature in your Mediavine Dashboard. This setting will create create placeholders, or dedicate space for where ads will load. This will avoid causing any shifts as ads lazy load in.

Additionally, Optimize Ads for CLS has plenty of other tricks up its sleeve, including solving for CLS due to ad refresh and much more.

If you’re running Optimize Ads for CLS, we also strongly recommend you opt-in for a few Mediavine PSAs, to make sure that you don’t end up with blank spaces due to the placeholders that the setting brings.

Trellis, Create and Grow

We’ve already worked with Trellis beta testers to resolve issues related to CLS by refining the way we lazy load images with placeholders, generate CSS, handle fonts and more.

In short, Trellis and the Mediavine Trellis child themes will be ready for CLS when Google launches this new algorithm.

Create and Grow? Rest assured, both Mediavine products are being developed with CLS concern in mind.