Optimize Ads for CLS: Prepare for Google’s Page Experience Algorithm in May

woman using a laptop by a window

With Google’s upcoming Page Experience algorithm change in May, the company finally defined the pagespeed metrics publishers must hit in the form of Core Web Vitals.

These scores are measured in the real world via actual users running Google Chrome using CRUX.

The three scores, which you’ve probably heard us discuss by now, are Largest Contentful Paint (LCP), First Input Delay (FID) and Cumulative Layout Shift (CLS).

Today, we’re focusing on CLS — specifically how you can Optimize Ads for CLS with Mediavine.

Leif Lessons

  • Coming in May, Google’s Page Experience algorithm shift and their Core Web Vitals are a definition of pagespeed metric goals for publishers.
  • The three Core Web Vitals scores are Largest Contentful Paint (LCP), First Input Delay (FID) and Cumulative Layout Shift (CLS).
  • Ads are one of the biggest offenders when it comes to CLS because when they load they cause content to shift. Today we’re proud to announce two new settings that mitigate the impact of ads for Mediavine publishers: Optimize Ads for CLS and Optimize Sticky Sidebar for Non-Trellis Sites.
  • These settings are not meant to solve for all Core Web Vitals or even all CLS issues. They’re specifically designed to address issues caused by ads. Chances are, you’ve got additional site work to do in order to be ready for May.
  • Both optional settings are available now in the Mediavine Dashboard and could result in a small decline in overall revenue.
  • Remember, this is only the first version of our optimize features. We will continue improving performance in the coming weeks and months, staying ahead of any changes Google makes.

What is Cumulative Layout Shift? What is the goal?

Cumulative Layout Shift happens when your website content shifts, either at time of initial page load or as a reader uses the site. We highly recommend that you read our full blog post on Cumulative Layout Shift and make sure you’ve done everything you can to optimize your site for this.

Optimize Ads for CLS

When we introduced Optimize Ads for PageSpeed in 2018, Mediavine revolutionized the way ads load on webpages. Now we’re doing the same with settings that Optimize Ads for CLS.

The ability of Optimize Ads for CLS to do what its name suggests will mean significant changes to the way Mediavine displays ads on your website, which is why it’s optional to enable.

Below, we’ll discuss these changes, how to enable them and whether you should.

1. The Ad Box

Around each in-content ad and the top sidebar ad, you’ll now notice a light grey placeholder box where the ad will load.

When the ad loads, it will likely appear smaller than the box and centered inside it. This prevents larger ads from moving the content and causing a layout shift or a smaller ad from doing the same during a refresh.

All ad types from outstream and native to multi-size banner ads will now take up the same amount of space within your content, preventing any of them from causing layout shift.

example of the ad box on a website

2. Ad Refreshes

When you enable this feature, in addition to the in-content / feed / top sidebar ads receiving the Ad Box treatment, your ads will be optimized for CLS during refresh.

Unfortunately, even an ad that takes up the same space as the previous one, e.g. two 300x250s refreshing in the same spot, can cause CLS issues. This happens because when one ad disappears and the other appears, there can be a momentary flash to the browser.

Mediavine has solved for this potential problem by properly monitoring for refreshes and only revealing a new ad once it’s fully ready to display.

3. Optimize Sticky Sidebar CLS (for Non-Trellis Sites)

Unfortunately, due to a bug in the way Chrome calculates CLS when an object first goes “position: fixed,” the sticky sidebar ad can also cause CLS issues when it first becomes sticky.

The only way to solve this was to move to the “position: sticky” CSS property.

That comes with some requirements — namely you can’t have “overflow: hidden” on any parent elements.

The good news is that for sites using Trellis, we already build the sticky sidebar with this in mind and you don’t even need this setting.

On non-Trellis sites, for this feature to work, the Script Wrapper may have to make changes to your site — but don’t worry, clicking the box does it automatically for you.

If you didn’t follow all (or any) of that, here’s a translation:

Turning on Optimize Sticky Sidebar CLS will fix your CLS problems with the sticky sidebar with a simple toggle.

How Do You Enable This?

As we said, both of these experiences will change how ads load on your site. As a result, we’ve made both of the Optimize for CLS fixes optional.

The good news is both are incredibly easy to enable, if you’re so inclined.

Log into your Dashboard and under Ad Settings you should see both of these options in the “Optimize for Core Web Vitals” section at the very top.

Simply enable and save.

Optimize for core web vitals in dashboard

Should Everyone Opt in Then?

That’s the big question, to which we’ll give the eternal non-answer of it depends.

If your site is well optimized for CLS as it is, you’re hitting the other core web vitals (FID and LCP) and Google Search / organic traffic is an important part of your strategy, this may be worth it.

It’s important to note that whenever you add “white space” or padding between ads and the content with which your readers are engaged, ad performance will decrease slightly.

Unfortunately, these CLS fixes require that by nature. You could potentially see a slight revenue decrease.

We should also note again the Sticky Sidebar fixes do require us to make some changes to your site’s HTML and styles, such as removing “overflow: hidden.”

If that breaks your theme, you’ll have to disable this feature.

But as we always say, everything is a balance. Is a hypothetical, small drop in revenue worth the long-term organic search growth you’d see as a result?

That is a decision you’ll have to make, but personally, we are (virtually) sprinting to enable this on The Hollywood Gossip, which gets significant search traffic and is already optimized for LCP, FID and CLS outside of ads.

On the flip side, publishers who aren’t optimized for Core Web Vitals or who don’t see significant search traffic may want to focus on other aspects of their sites before enabling this feature.

Core web vitals

Will This Solve All CLS Issues?

Remember the title of this post and the settings themselves: Optimize Ads for CLS. What we’re discussing above only applies to optimizing ads to improve CLS scores.

Chances are you have some work to do on your site in general to make sure you’re prepared for CLS and its fellow Core Web Vitals this spring.

It’s also important to note that this is the first version of our optimizations for CLS. If you have these enabled, our goal is to improve them in the coming weeks, months and years.

Like all things pagespeed, technology is rapidly changing. We expect the CLS requirements and optimizations to be the same and are fully prepared to meet that challenge, now and in the future.

What You Need To Do

  • Google’s Page Experience algorithm change is coming in May 2021!
  • Determine if a potential, small ad revenue loss is worth it for you right now, in the name of passing CLS scores WITH ads.
  • If you have Trellis: Go to your Mediavine Dashboard, look under Ad Settings and toggle on “Optimize Ads for CLS”.
  • If you do not have Trellis: Go to your Mediavine Dashboard, look under Ad Settings and toggle on “Optimize Ads for CLS” and “Optimize Sticky Sidebar CLS.”

Related Posts

Goodbye Autoplay, Hello Universal Player

Goodbye Autoplay, Hello Universal Player

6 min read

Video ads are an important part of the monetization strategy for your website, but the options can be endless, and some options can completely destroy your user’s experience. So what’s …

Read More