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.
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.
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.
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.
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.
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.
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.
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.
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.
Stay up to date with the latest from Mediavine
Heather Tullos
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 …
Created in 2004, but running ad management services since 2015, Mediavine is the largest display ad management company in the world, working with nearly 9,000 independent lifestyle website publishers, helping …
It’s been more than a year since Mediavine publisher Laurence Norah inspired us to launch our first PSA campaign and we’re moving full steam ahead with the growth of these …
