加载整个页面后加载Google广告

Question

如果没有Google广告,我的HTTPS网页会在大约500毫秒内加载.使用Google广告,同一网页需要2-5秒才能加载.我有两个横幅广告(一个在顶部,一个在底部).是的,它在广告之前呈现整个页面,但我仍然认为在等待广告完成时让浏览器旋转是很笨拙的.

有没有办法使用Javascript在广告之前完成页面加载,然后只在后台加载广告？基本上,欺骗它认为整个页面已经加载？

当前代码:

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

查看我的网站的瀑布,看起来adsbygoogle.js不会导致加载指示符.相反,它是实际的广告内容本身.例如,此对象(横幅广告)甚至在1.8秒后(我的整个页面已经加载完毕后很久)才开始加载:tpc.googlesyndication.com/simgad/AdID

谢谢!

Answer 1

试试这篇文章.

诀窍是在窗口onload事件中放置广告初始化和加载逻辑:

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

Answer 2

这是我最终的Vanilla JS解决方案:

<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

普通的解决方案是保留所有广告代码不变，删除脚本标记除外，然后添加到您的 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);

免责声明：与此问题的其他答案一样，假设Google并不反对提高页面性能的方法