解决谷歌联盟广告代码拖慢网站加载速度

由于谷歌服务在国内的节点比较少,谷歌的一些JS加载速度经常抽风,有时候需要几十秒的时间来加载,在博客接入谷歌广告联盟之后,经常在打开页面的时候网页标签一直显示加载状态,对访客非常不友好。

具体的解决方式是在页面加载完成后再异步加载谷歌联盟的JS,这样的话在JS加载慢的时候,虽然广告显示也会变慢,但是不会影响用户的浏览,不能因为广告影响使用者的体验。

谷歌原生代码:

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
</script>
<ins class="adsbygoogle"
    style="display:block"
    data-ad-client="ca-pub-id"
    data-ad-slot="id"
    data-ad-format="auto"
    data-full-width-responsive="true">
</ins>
<script>
    (adsbygoogle = window.adsbygoogle || []).push({});
</script>

修改后的代码:

<script>
window.onload = function() {
    setTimeout(function() {
            let script = document.createElement("script");
            script.setAttribute("async", "");
            script.src = "//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
            document.body.appendChild(script);
    }, 2e3);
}
</script>
<ins class="adsbygoogle"
    style="display:block"
    data-ad-client="ca-pub-id"
    data-ad-slot="id"
    data-ad-format="auto"
    data-full-width-responsive="true"></ins>
<script>
    (adsbygoogle = window.adsbygoogle || []).push({});
</script>

THE END