1 Google Adsense广告js导致网站加载变慢的原因

很多站长朋友的站点都投放了Google广告，在投放了Google广告之后可以明显的感觉到我们的网站打开速度变慢了。

在发现这个问题之后，我通过PageSpeed Insights分析自己的网站的加载速度，发现了Google Adsense的广告js阻塞的网站加载，耗费了比较多的时间。

在网站上引入Google广告需要引入Google Adsense上的代码块，如果是自动广告则只需引入

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5988434715677176"
     crossorigin="anonymous"></script>

如果是自定义广告单元，则需要在引入上面这行代码外，还需在需要放置广告的位置放置以下代码

<!-- 自适应广告 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-5988434715677176"
     data-ad-slot="4519895364"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

而导致网站打开速度变慢的元凶就是

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5988434715677176"
     crossorigin="anonymous"></script>

这一行引入js的代码，这一点我们可以通过PageSpeed Insights的分析报告看出来。

2 优化Google Adsense广告js的加载速度

优化方案就是通过懒加载Google Adsense的js文件，在网站加载完成之后再加载js，我们可以将

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5988434715677176"
     crossorigin="anonymous"></script>

修改为以下的形式

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

将上述代码放到网站的<head></head>之间，重新使用浏览器的无痕模式打开网站，会发现网站的打开速度明显变快，而Google广告也是可以正常显示的。

参考链接