How do I avoid CLS (cumulative layout shift) with Google Adsense "Let Google optimize the size of your mobile ads" enabled?

Question

I am not using responsive ads due to the willing of getting a better Web Vitals score.

However, with the Let Google optimize the size of your mobile ads checked, it seems Google will still change/update its ad size in a min-height defined container by modifying the CSS property to this:

height: auto !important;
min-height: 0px !important;

Is there any way can fix it?

I don't want to uncheck it because the revenue would drop.

Fivestar

Answer 1

Here are a couple of great references on how to reduce CLS with Google Adsense (ref1 and ref2):

The best method is to add a min-height value to a wrapper around each of your ad units. However, using a class to target this CSS property isn’t enough – you will need to use an ID to target this wrapper. For some unknown reason, Google AdSense’s Javascript strips out min-height directives on any parent objects. However, they do not strip this out if you use an ID to do the CSS targeting.

So the trick is to add an id to target your container's CSS, and that should bring down your CLS to 0!

Kaila

Unfortunately this doesnt work in 2023 – Gloomy

Answer 2

The min-height in a div with an id [see answer #1 or here: https://mediarealm.com.au/articles/google-adsense-reducing-cls-cumulative-layout-shift/ ] helps... but still has difficulty with responsive layouts in Bootstrap.

If you use Adsense auto-ads Adsense will insert ads whereever it thinks is best and that means altering the height of these elements:

<div class="row">  

which Adsense changes to

<div class="row" style="height: auto !important;">

and pagespeed also complains about CLS with

<div class="alert">

It may be possible to apply the unique ID approach to the row and alert divs in Bootstrap, (without setting a min height, since on most websites every page is different) but even if that works, that would cut into ad revenues. It seems this is Catch-22 - you can have great core vitals OR great adsense optimization, but not both. It's up to Adsense to find a solution, presumably by predicting optimal ad positions, layouts and sizes prior to rendering the page, so thereis no CLS.

Marchese