How to Setup Lazy Load for Google AdSense Ad units?

Google AdSense is a monetization program run by Google. It still the most reliable way to make money online for many publishers. One common problem publishers often face that Google AdSense affect our original blog speed. Due to not have control for optimizing resources, we just end up with feeling sad.

Like YouTube video thumbnail, they should be using WebP for ad units images. It’s ironic, that sometimes they do not bother to serve with GZIP compression, or keep resources minified. The massive resources and extra loads of many DNS lookup, kill our page speed like hell.

A few months ago, when I tweeted Ad unit speed problem, I didn’t get any satisfactory response. I am back myself with a solution that will prevent AdSense from slowing down loading of your original content.

Honestly, I am not personally a huge fan of the lazy load even for images. But still, I just want to share an option. If you like, you may try once if you are highly concerned with serving primary content first, before Ad Units.

Instruction for Setup Lazy Loading for AdSense

Naturally, this is how an original ad unit code look.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- leaderboard -->
<ins class="adsbygoogle"
 style="display:inline-block;width:728px;height:90px"
 data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
 data-ad-slot="1234567890"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Technical details: Basically what happens that it load in asynchronous form, means browser continue downloading adsbygoogle.js script without blocking the HTML parsing.

But here, in the lazy loading method I am going to change the ASYNC method to real DEFER. The AdSense script will start downloading in browser, only once window will complete loading the main web page. In this way, visitor don’t have to wait for seeing whole page quickly for the AdSense.

For this purpose, you don’t need to make any big changes in your ad unit. Simply we will alter the style of loading adsbygoogle.js that will do all the magic.

All you need to follow below two Steps

First of all, remove below script from all existing ad units.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

Now it will appear like this

<ins class="adsbygoogle"
 style="display:inline-block;width:728px;height:90px"
 data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
 data-ad-slot="1234567890"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

After then, add below JavaScript code in your Theme Footer, possibly just before the body tag.

Method 1. onload event

Hint: Noptimize tag is present to make compatible with Autoptimize. It will prevent aggregating AdSense lazy loader inline JS.

<!--noptimize-->
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
<!--/noptimize-->
  1. Above code, you may use via Theme option if available for adding custom script
  2. For Genesis, make use via Genesis Simple Hooks plugin with option genesis_after
  3. or Header and Footer plugin for any other theme.

What does this script exactly do?

This script will ensure that your AdSense Ad unit will start loading and become visible after finishing the complete loading of your main web page. That’s why I named it, Lazy Loading for Google AdSense.

Method 2. onscroll event

This approach will load ad unit once user scroll your web page.

<script type='text/javascript'>
//<![CDATA[
var la=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===la||0!=document.body.scrollTop&&!1===la)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),la=!0)},!0);
//]]>
</script>

I hope this help you in improving performance of your site.

Any question? Please ask at Gulshan Forum.

63 thoughts on “How to Setup Lazy Load for Google AdSense Ad units?”

  1. Thanks a lot, but this is not lazy loading. This is just deferring the loading.
    Definitely not the same thing…

Comments are closed.