Loading Google ads after loading the whole page

Without google ads, my HTTPS web page takes about 500ms to load. With Google Ads, the same web page takes 2-5 seconds to load. I have two banner ads (one on top and one on the bottom). Yes, it renders the entire page in front of the ad, but I still find it awkward to make the browser spin while it waits for the ad.

Is there a way with Javascript to finish loading the page before the ads and then just load the ads in the background? Basically, fool him into thinking that the entire page has already been 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 adsbygoogle.js is calling the loading indicator. Instead, it is actually advertising content. For example, this entity (ad) doesn't even load until 1.8 seconds (after my page has already loaded): tpc.googlesyndication.com/simgad/AdID

Thank!

+3


source to share


7 replies


Try this article .

The trick is to initialize and load the declaration logic in the onload

event window :



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

      

+10


source


This is my final 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>

      

+7


source


No matter how many google ads on your page, place ONE copy of the external js in the header of your page ... this is ok at the top as it is asynchronous.

Place the inserts provided by Google where the ad should appear.

At the bottom of the page, just before the end tag tag, place a script to push the ad.

The ad will now load after your page has finished!

If you want to add a second ad adense on the page, don't repeat adsbygoogle.js (one instance is enough) ... put a second where it should appear ... add another one by clicking at the bottom of your page so it looks like this:

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

+1


source


Place your ad start code at the bottom of the page just before the closing / body> tag

0


source


(this solution requires jQuery)

Remove the tag <script>

from your code and add it to your javascript:

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

      

This will call AJAX to get the script, not use the async browser method. This should result in the missing loading indicator.

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

0


source


Here's what I did after noticing that Adsense slows down page loading / rendering:

first of all add this code to <Body>

:

<body onLoad="initialize_page();">

      

Now place just one adsense script code above <HEAD>

:

<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 your adsense code (one copy in the header is enough).

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

from your adsense code from your page. We will use them above our initialization function.

Add this code to our initialize_page () function:

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 only use 2 or 1 address, just remove (adsbygoogle = window.adsbygoogle || []).push({});

from the function accordingly.

0


source


Vanilla's solution is to leave all your ad code unchanged except remove the script tag and then add it 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 endorse methods to improve page performance

0


source







All Articles