How To Fix CLS Shifting When Using Google AdSense

I'm not sure about you, but I'm an actual lunatic for website speed. I have no patience when I visit sites that load slow, are buggy, or have tons of videos plastered across the homepage. I always revisit my sites to make sure things don't fall into any of these categories.

I've been running Ads on Gold Penguin (this exact website) for a few months now and only recently began to notice Google Adsense destroying my CLS – which is kind of funny since they build the platform and own the same system that tells you it's wrong!

I did quite a bit of research trying to figure out how to optimize Core Web Vitals and realized the culprit happened to be when I started showing ads (about a week after launching them).

Banner ads (and top navigation ones) are pretty devastating to your page layout if you don't create a placeholder element for them to sit in. This basically means ads are auto-inserting into your page while the page is loading, shifting the layout (this is bad).

The more elements/ads you have doing this, the greater CLS you'll experience – and that's not good. Google takes page speed and core website vitals into account when ranking your website so it's extremely important to fix this as soon as you identify a problem.

What is Cumulative Layout Shift (CLS)

If you've ever been on a website where elements keep moving around as the page loads, that's exactly what CLS measures. It's all about the stability of your webpage while it's being loaded.

A high CLS can be quite frustrating for your readers, making them less likely to stick around and engage with your content. Nobody likes a jumpy webpage, right?

How is CLS Measured?

CLS is measured by calculating the total unexpected layout shifts that occur during the lifespan of a webpage. To do this, it takes into account two key factors: the impact fraction and the distance fraction. The impact fraction represents the visible area of the viewport that's affected by the layout shift, while the distance fraction measures how far the unstable elements have moved relative to the viewport.

To compute the CLS, you'll multiply the impact fraction by the distance fraction for each layout shift that occurs and then sum up these values. Google evaluates CLS by providing a fractional score that ranges from 0 to 1.

A score of 0.1 or lower is deemed excellent, as it indicates minimal layout shifts and a stable browsing experience. If the CLS score falls between 0.1 and 0.25, it signifies that the website's layout stability could benefit from some improvements. On the other hand, a score of 0.25 or higher suggests that the layout is quite unstable and needs immediate attention and remediation to enhance the user experience.

A lower CLS score means a better user experience. Google recommends aiming for a CLS score of 0.1 or lower to ensure a pleasant browsing experience for your visitors. You don't have to calculate the store manually, you could use Google Pagespeed Insights (test in your browser if you use Chrome) or check it from your search console if you're having any issues:

Fixing Core Web Vitals CLS Increase with Google AdSense

There's a few ways to fix this, one requires a bit more technical knowledge than the other, but doesn't result in any ad loss. Here's how:

Manually Create Ad Placement Elements

When dealing with vertical layout shifts, a practical solution involves fixing the height of the parent div that contains the ad. To achieve this, determine the typical height of the ads you expect to display, say 300px, and then set the parent div's height to that value using CSS.

By doing this, the div will be rendered with the specified height, even when there's no ad present. This approach helps to reduce layout shifts as it reserves space for ads beforehand.

However, if the ad ends up having a different height, like 250px, you might notice some whitespace beneath it. To address this, you can center the ad vertically within the parent div by using CSS flexbox properties. This will not only improve the visual appearance of the ad but also enhance the overall browsing experience for your users. With these simple adjustments, you can minimize layout shifts and keep your website looking polished and professional.

Exclude Ads in Initial Frame

This method doesn't require any technical shifting but you'd be losing out on any potential revenue from banner ads (which are normally the highest on a page).

To do so, go to the Google AdSense ad settings preview (AdSense -> Ads -> By Site) and select your ads. While the mobile version is selected, you'll see a bunch of blue lines on the screen showing where ads might pop up. Click each blue line that you don't want and you'll see it turn red & have "excluded" across the page. I'd recommend doing this for most things by the top of the page.

Final Thoughts

After applying these fixes, you should no longer have this issue! It might take a few days to update in Google Search Console, and you might have to request a validation fix if Google has explicitly told you there's a problem. This issue was really annoying me & I'm glad I figured something out. Ideally, Google Adsense is not the way to go if you're trying to monetize your site, but sometimes you have to make due! It's best to optimize what you have no matter what stage of blogging or content growth you're at.

Did this fix your issue? Do you have any other suggestions? Drop us a comment below!