Load Google Ads after entire page has loaded

Question

Without Google Ads, my HTTPS webpage loads in about 500ms. With Google Ads, the same webpage takes 2-5 seconds to load. I have two banner ads (one at the top and one at the

Answer 1

I put

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

just before closing the body tag and removed it from every adsense ad.

Ads show fine and the page loads very fast.

---

After many tests I found that sometimes ads don't show in safari.

Answer 2

This is my ultimate Vanilla JS solution:

<script async defer src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
    (adsbygoogle = window.adsbygoogle || []).onload = function () {
        [].forEach.call(document.getElementsByClassName('adsbygoogle'), function () {
            adsbygoogle.push({})
        })
    }
</script>

Answer 3

No matter how many google ads you have on the page, put ONE copy of the external js within the head of your page ... it's OK at the top since it's async.

Put the ins supplied by google where the ad is to appear.

At the bottom of your page, just before the end body tag, put the script to push the ad.

Now the ad will load after your page is complete !

If you want to add a second adsense ad on the page, do not repeat the adsbygoogle.js (one copy is enough) ... put the second where it is to be displayed ... add another push at the bottom of your page so it looks like this:

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

Answer 4

(This solution requires jQuery)

Remove the <script> tag from your code and add this to your javascript:

$(function() {
  $.getScript("//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js");
});

This will do an AJAX call to get the script, rather than using the async browser method. This should result in not having the loading indicator.

ref: http://api.jquery.com/jquery.getscript/

Answer 5

A Vanilla solution is to leave all your ad code as is, except to remove the script tag, and then add to your javascript

function loadGoogleAds() {
    var scriptTag = document.createElement('script');
    scriptTag.setAttribute('src', '//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js');
    scriptTag.setAttribute('type', 'text/javascript');
    scriptTag.setAttribute('async', 'async');
    document.body.appendChild(scriptTag);
}
window.addEventListener("load", loadGoogleAds);

Disclaimer: as with the other answers to this question it is assumed that Google does not disapprove of methods to improve page performance

Answer 6

Try this article.

The trick is to put your ad initializing and loading logic in window's onload event:

<script>
   window.onload = function(){
       ...
   };
</script>