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.

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

  1. Yes, this would be helpful for improving page load time. I’d like to know how this performs for you.
    Thanks

  2. Yes, this would be helpful for improving page load time. I’d like to know how this performs for you.
    Thanks

  3. Great Now My site works really awesome fast. i am also like to know How to do Https for my website using cloudfare ? Can you guide me.

    One more doubt : How to use cloudfare ssl for normal html websites ?

    Thank you

  4. Fabulous! 245 ms load time. How cloudflare is caching HTML content? Part of their paid plan?
    “cf-cache-status” shows HIT, which I never get for any HTML content. I always get very long wait time with CF, around 0.5 to 1 Sec every time.

    On the server side, using Key-CDN cache enabler, and Autoptimize, there’s only Two CSS and one JS file, excluding adsense scripts.

  5. Fabulous! 245 ms load time. How cloudflare is caching HTML content? Part of their paid plan?
    “cf-cache-status” shows HIT, which I never get for any HTML content. I always get very long wait time with CF, around 0.5 to 1 Sec every time.

    On the server side, using Key-CDN cache enabler, and Autoptimize, there’s only Two CSS and one JS file, excluding adsense scripts.

  6. Thanks for the feedback.

    Lazy load is not harming anything of Google AdSense or their Advertiser, so it’s fair use in my opinion.

  7. Thanks for the feedback.

    Lazy load is not harming anything of Google AdSense or their Advertiser, so it’s fair use in my opinion.

  8. Just Now I removed the lazy load Adsense option on my website,

    Once you add the script for lazy load, site loading is very fast, but the main problem is if your having more than 3 ads means sometimes ads not showing, it shows blank space, once refresh only ads came, I recently found out this problem.

    Then only i remove the script, normally my side load time is 5 secs, while using lazy load 2 secs only.

  9. Great share Gulshan. Personally, I’m not a big fan of Google AdSense and prefer to stay away since it slows down the website and distracts the users.

    I don’t want my readers to click on the ad and leave my site while reading an article where I could have gotten a chance to make an affiliate sale. Also, Google pays peanuts, which is another sad truth.

    Lazy load can reduce the server load and improve the site speed by a good margin. Thanks for sharing the script.

  10. Great share Gulshan. Personally, I’m not a big fan of Google AdSense and prefer to stay away since it slows down the website and distracts the users.

    I don’t want my readers to click on the ad and leave my site while reading an article where I could have gotten a chance to make an affiliate sale. Also, Google pays peanuts, which is another sad truth.

    Lazy load can reduce the server load and improve the site speed by a good margin. Thanks for sharing the script.

  11. Thanks really helpful will use it in my website..hope there is a similar guide for other ads as well nice website keep it up

  12. Thanks really helpful will use it in my website..hope there is a similar guide for other ads as well nice website keep it up

  13. You must execute for every ad after load the script:

    (adsbygoogle = window.adsbygoogle || []).push({});

    so if you have 3 ads you must execute this code 3 times πŸ˜‰

  14. You must execute for every ad after load the script:

    (adsbygoogle = window.adsbygoogle || []).push({});

    so if you have 3 ads you must execute this code 3 times πŸ˜‰

  15. Gulshan, I want to know, will this accept Google Adsense policy? Becuase they are very strict when comes to modification of their ad code.

  16. Gulshan, I want to know, will this accept Google Adsense policy? Becuase they are very strict when comes to modification of their ad code.

  17. Hi,
    Great question!

    We are not modifying heavily like modifications. We are just adjusting same script in a way to load after finishing page load. From async to defer. So, I don’t think it’s a violation.

  18. Hi,
    Great question!

    We are not modifying heavily like modifications. We are just adjusting same script in a way to load after finishing page load. From async to defer. So, I don’t think it’s a violation.

  19. As I said in my post above, I do not use it because I believe it may affect revenue due to less ad impressions.

  20. As I said in my post above, I do not use it because I believe it may affect revenue due to less ad impressions.

  21. I would try this, but I am worried that I would get banned from adsense. What do you think?

  22. I would try this, but I am worried that I would get banned from adsense. What do you think?

  23. Actually this is not lazy load, this is defer load, there is a different between lazy loading and defer loading.

  24. Hi, I just wanted to implement your code but then I wasn’t able to see your code, already tried opening it in Chrome and Firefox but where the code is supposed to be there is just a grey box unfortunately…

  25. Based on this “Update 12/09/2017: I have removed this method from my blog since I found that it reduces Ad impressions. So, please implement at your own responsibility.”

    Can anyone confirm if this method still affects impressions?

  26. Gulshan,

    Which of the both methods are you seeing an effective balance between load speed and the revenue?

    In the comments you said, you haven’t using the lazy load.

    Can we able to add an array tags to the JS code, so that it applies to only that ads code? We can easily add a comment to the adsense code if they are below the fold.

    That should help in even fine tune the code.

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

Leave a Comment

Do NOT follow this link or you will be banned from the site! css.php