Adsense "Auto Ads" force CLS Layout Shift

Question

we use the Adsense "Auto Ads" and are generally very happy with it. Unfortunately we have a problem with the CLS (Cummulative Layout Shift) on our mobile (!) site. We have now tested this out and the problems are definitely triggered by the Auto Ads. After further testing, we were able to determine that it is specifically the sticky anchor ads in the header area of the page that trigger the CLS. Important: the shift does not happen when loading the page, but when scrolling down and up after the anchor ad has appeared at the top. At this point Adsense add some style attributes to all elements on our page, eg. "height: auto !important;" Does anyone also have this problem? What can we do? We would not like to go on without the sticky anchor ads. Important: Problem is mobile only! Is Google Adsense working on this? Thank you!

Answer 1

as google ads (especially the top anchor one) is ANIMATING the PADDING on BODY after you scroll down the page, the ad appears, and you scroll up, there is no way to avoid the CLS, only to create fixed

<style>
   body {
     padding: 120px 0px 0px !important;
   }
</style>

so the once the ad appends its "style" with padding to body and starts to change it, nothing will happend due to "!important" tag in our style ... you can make an IF statement to use this only if your page is displayed on mobile (not sure this happens on wide PC anchors as well, have to test it, but I see my CLS going down on PC as well, so might be)

Answer 2

As there is no real way to "force" the size of auto ads in adsense

Set max height of Adsense responsive ad unit

for me i found out google allways delivers 300px high ads on mobile phones while 280px on tablets and desktop so i "reserve" this space in my responsive layout above the fold

with CSS as described here https://support.google.com/adsense/answer/9183363?hl=de here https://support.google.com/adsense/answer/9467650?hl=en-GB and here https://support.google.com/adsense/forum/AAAAKDuOfxQTiihLH_gMnw/?hl=en&gpf=%23!topic%2Fadsense%2FTiihLH_gMnw

 .werbung { height: 300px; }
 @media (min-width:800px) { .werbung { height: 280px; } }
 @media (min-width:500px) { .werbung { height: 280px; } }

example:

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-#####"
 crossorigin="anonymous"></script>

<div class="werbung">

<ins class="adsbygoogle werbung"
 style="display:block"
 data-ad-client="ca-pub-#####"
 data-ad-slot="#####"
 data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

</div>