AdSense Lazy Load with Auto Ads ON

tips & tricks
1

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.

7 Likes
2

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.

3

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
4

Hello @baker since last response, have you implemented this of your Hugo websites? Just wonder how this impact performance and if you can share some links where you got this working.

1 Like
5

This appears to be working extremely well for me with cloudflare pages. I needed to add the data-cfasync=“false” attribute to the script tag to exclude it from rocket loader. I now get a Pagespeed performance score of 98. Thanks! Here is the result so you can check what’s going on as I arrived at this by trial and error / accident: https://pagespeed.web.dev/analysis/https-www-caminosantiagocompostela-com/x2i3sex5jm?form_factor=mobile

1 Like
6

Hi All,
I finally implemented this on my website and tested over months.

I used modified approach for in-article ads. You can read about it here if you are interested:

3 Likes