WordPress – 优化Google Adsense广告js的加载速度
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广告也是可以正常显示的。
参考链接
欢迎扫码关注我的微信公众号，及时获取文章更新
本文作者：StubbornHuang
版权声明：本文为站长原创文章，如果转载请注明原文链接！
原文标题：WordPress – 优化Google Adsense广告js的加载速度
原文链接：https://www.stubbornhuang.com/2723/
发布于：2023年07月13日 10:42:57
修改于：2023年07月13日 11:05:40
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
文章末尾
评论
72