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 bottom). Yes, it renders the entire page before the ads, but I still think it's clunky to have the browser spinning while it waits for the ads to finish.

Is there any way with Javascript to finish page loading before the ads, and then just load the ads in the background? Basically, trick it into thinking the entire page is already loaded?

Current code:

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

Looking at the waterfall for my site, it doesn't look like the adsbygoogle.js is causing the load indicator. Instead, it's the actual ad content itself. For example, this object (the banner ad) doesn't even start loading until 1.8 seconds (long after my entire page has already loaded): tpc.googlesyndication.com/simgad/AdID

Thanks!

http://www.aaronpeters.nl/blog/non-blocking-google-adsense-ads-improve-page-speed — Christina, Sep 16 '14 at 20:11

score 13 · Accepted Answer · edited Jan 25 '22 at 06:57

13

Try this article.

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

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

edited Jan 25 '22 at 06:57

Kos

4,890
9
38
42

answered Sep 16 '14 at 20:56

Maksim Vi.

9,107
12
59
85

2

Hi @Maksim Vi., I believe this issue was fixed when Google introduced async javascript (which we use). The problem doesn't seem to be render-blocking javascript, but rather the slow loading of the ad content itself. – PF Billing Sep 16 '14 at 21:04
@PFBilling, try to only put `(adsbygoogle = window.adsbygoogle || []).push({});` inside `window.onload` event then. I'm not sure what it does, but it looks like it's being evaluated before the page is loaded at the moment or it may be something that's inside `adsbygoogle.js` file. I might be wrong, but even if a script loaded asynchronously its content will still be executed before the page finished loading. – Maksim Vi. Sep 16 '14 at 21:56
one of my customer's website is using various advertisers, one is Google AdSense with the async code. However, there are other advertisers used in parallel (they use different advertisers depending on country of user) and I want to load those ads also at the very end of the document loading... Is this `window.onload` approach still valid today in 2015? Or are there better ones, e.g. by using AMD (Asynchronous Module Definition) ? – basZero Mar 30 '15 at 14:33
@basZero, AMD is a silver bullet, it's not any better than plain javascript. I don't see how you can possibly benefit from that. – Maksim Vi. Mar 30 '15 at 18:25
@MaksimVi. Thanks Maksim, so would you go with the `window.onload` approach? – basZero Mar 31 '15 at 06:47
1

Thanks, @MaksimVi. I was able to reduce the page load time of https://www.techmuzz.com/ by 2 seconds using this trick! – Swapna Lekshmanan May 19 '19 at 23:55

Erik Engi · Answer 2 · 2017-03-30T14:12:06.937

13

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>

edited Mar 30 '17 at 14:12

answered Apr 19 '16 at 19:25

Erik Engi

402
3
10

Mind explaining it? – Parsa Yazdani Jul 17 '21 at 18:16
You have forgot to mention, The user must remove every instance of – Niresh Oct 13 '21 at 19:58

score 6 · Answer 3 · answered Jan 28 '19 at 02:13

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

score 4 · Answer 4 · answered Mar 01 '21 at 10:20

Ads_onscroll_event

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>

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

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

And

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</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>

This approach will load ad unit once user scroll your web page add this on page that has ads:

<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>

And

<script>
(adsbygoogle = window.adsbygoogle || []).onload = function () {
    [].forEach.call(document.getElementsByClassName('adsbygoogle'), function () {
    adsbygoogle.push({})
  })
}
</script>

score 3 · Answer 5 · answered Dec 18 '14 at 02:02

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({});

score 1 · Answer 6 · answered Sep 16 '14 at 20:08

1

Place the code for initiating the ad's at the bottom of the page just before the closing /body> tag

answered Sep 16 '14 at 20:08

Showcase Imagery

372
2
19

score 1 · Answer 7 · answered Oct 12 '21 at 10:07

This topic has been already answered here under lazy load topic, But this is actually defer loading.

How to lazy load new Google Adsense code using JS

<script>
function downloadJSAtOnload() {
    var element = document.createElement("script");
    element.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX";
    element.async = true;
    element.setAttribute('crossorigin', 'anonymous');
    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>

This JavaScript is cross-browser compatible and works with old browsers too.

If you are looking for Lazy Loading Adsense Ads, Check this answer How to Lazy Load Adsense Ads?

score 0 · Answer 8 · answered Sep 16 '14 at 20:36

0

(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/

answered Sep 16 '14 at 20:36

Khan

2,912
3
21
21

Hi @Khan, looking at the waterfall for my site, it doesn't look like the adsbygoogle.js is causing the load indicator. Instead, it's the actual ad content itself. Like this doesn't even start loading until 1.8 seconds (long after my entire page has already loaded): https://tpc.googlesyndication.com/simgad/adid – PF Billing Sep 16 '14 at 20:43

score 0 · Answer 9 · answered Jul 18 '18 at 10:16

This is what I did, after noticing adsense slows down page loading/rendering:

first of all add this code to your <Body> tag:

<body onLoad="initialize_page();">

Now, put only one adsense script code, above the <HEAD> tag:

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

Remove adsense <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> from all of your adsense code(one copy at the header is enough).

Remove all (adsbygoogle = window.adsbygoogle || []).push({}); from your adsense code from your page. We will be using them over our initialize function.

To our initialize_page() function, add this code:

function initialize_page()
{
    (adsbygoogle = window.adsbygoogle || []).push({});//this is for the first adsense
    (adsbygoogle = window.adsbygoogle || []).push({});//this is for the second
    (adsbygoogle = window.adsbygoogle || []).push({});//this is for the third
}

This code is suitable for 3 adsense on your page. if you use only 2 or 1 adesnes, just remove (adsbygoogle = window.adsbygoogle || []).push({}); from the function respectively.

Julius Barra · Answer 10 · 2020-09-29T10:14:16.297

0

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.

edited Sep 29 '20 at 10:14

answered Sep 28 '20 at 23:04

Julius Barra

59
6

Load Google Ads after entire page has loaded

10 Answers10

Linked