CLS: Solving for Cumulative Layout Shift

using a computer

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.

What is Cumulative Layout Shift (CLS) and why should you care?

  • Cumulative Layout Shift has to do with objects loading at different times, causing content to bounce around, impacting user experience.
  • We care, in short, because Google does. It’s a new metric they’re measuring via their Core Web Vitals.
  • Check Google Search Console and Google PageSpeed Insights to help measure and test your Core Web Vitals, or use a Chrome Extension to see CLS issues in realtime.
  • Lazy loading and/or deferred loading can cause CLS issues and Mediavine engineers have been working for months behind the scenes to resolve.
  • You can help by opting into one or many PSA campaigns in your Dashboard today.
hands typing on keyboard

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.

man and woman on laptops

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.

Google Search Console screenshot with arrow pointing to core web vitals tab.

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.

screenshot of page speed insights with arrow pointing to Cumulative Layout Shift chart

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.

Woman blogging on a desktop computer

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.

woman in a cafe with a cup of coffee and using a tablet

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. More on that later.

Mediavine Ads

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.

We’ve already made numerous tweaks in the past few months since Page Experience was announced, like loading placeholders for ads as early as possible, limiting the size of ads in refreshes and more.

However, there’s still something we need you to do.

PSAs to the rescue

We don’t run 100% fill rate ads here. We charge a minimum to protect the value of your ad inventory.

If there’s no ad? We collapse the space, and collapsing can potentially cause CLS. However, if you opt in to our numerous PSA campaigns such as COVID-19 Resources, We Stand With You, Cookies for Kids’ Cancer, Operation Gratitude and more to come, we’ll always have an “ad” to show!

That’s right, PSAs do more than just promote the good in this world, they also help publishers solve CLS issues!

psa opt-in settings in the dashboard

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.

Related Posts