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

Viewed 864

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.

enter image description here

Google Adsense - Let Google optimize the size of your mobile ads

1 Answers

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!

Related