AdSense Lazy Load with Auto Ads ON

Lots of talk about the Adsense performance, or the lack of it. So I was skeptical when I saw this free Wordpress Plugin - it got a +30 points pagespeed mobile use though.

Looking closer at the Wordpress plugin and putting it into Hugo as:

In config.toml:

[params]
AdsenseId = "ca-pub-00000000000000000"

Then a /partials/footer-code.html just before the </body> tag:

<script>
        !function(){const e=document.createElement("script");e.async=!0,e.setAttribute("crossorigin","anonymous"),e.src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client={{ .Site.Params.AdsenseId }}";let t=0;document.addEventListener("mousemove",function(){1==++t&&document.getElementsByTagName("HEAD").item(0).appendChild(e)}),window.onscroll=function(n){1==++t&&document.getElementsByTagName("HEAD").item(0).appendChild(e)},setTimeout(function(){0===t&&(t++,document.getElementsByTagName("HEAD").item(0).appendChild(e))},5e3)}();
</script>

This seems to work with Auto Ads ON, and I get a much higher Pagespeed index.

Maybe some others can test it and give feedback.

3 Likes

I resign from AdSense mostly because of a performance hit. I have been using Auto Ads at the time. After some time I finally understand why they have such hit. It is because of the way how they are loaded - along with the website. They affect DOM and loading before the page finishes loading, this is why on pagespeed will be hit severely.

The code that you put is very similar to the described approach to delaying javascript and cookie consent banner which I very nice, as finally, you can fire the script after page load.

Of course, you will annoy users, as after page load, when script fires, as they will experience CLS, however, you will not annoy Google and their robots measuring CLS and Core Web Vitals.

I could try this, but I learned when resigned from ads, that my readers and the engagement with my text are more important for me than the really small profit offered from ads. But at least there is a solution to use.

I think for now this as good as it gets if you want to use AdSense. Having no ads in the header (or viewport) helps too.

For avoiding layout shift I use this css:

  ins.adsbygoogle[data-ad-status="unfilled"] {
    display: none !important;
}
1 Like