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!

Answer 1

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>