很多朋友在网站上添加谷歌adsense广告来获得一些收入。添加的广告类型主要有:自动广告(穿插广告、锚定广告),还有4大广告单元:展示广告、信息流广告、文章内嵌广告、多重广告。主要通过广告代码来添加,正是这些代码导致网站加载速度变慢,设置不当非常影响访客的阅读体验。本文一起看下如何进行优化设置?
1.谷歌adsense广告代码比较
到谷歌adsense后台,把自动广告代码和广告单元代码放到一起比较,看下第一段js代码是否是一样的。
1.1 自动广告代码
自动广告代码如何获取?
在谷歌adsense后台分别点击【广告】》【按网站】》【获取代码】
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxx"
crossorigin="anonymous"></script>
1.2 广告单元代码
如何获取4大广告单元代码(展示广告、信息流广告、文章内嵌广告、多重广告)?
在谷歌adsense后台分别点击【广告】》【按广告单元】》【反括号】》【复制代码段】
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxx"
crossorigin="anonymous"></script>
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:500px"
data-ad-client="ca-pub-xxxxxxxx"
data-ad-slot="5310718886"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
1.3 重复js代码
通过上面的自动广告和广告单元代码对比,我们可以看到他们第1段adsbygoogle.js代码是一样的。
每个广告单元的第2段代码是不一样的。
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxx"
crossorigin="anonymous"></script>
当我们页面存在多个广告单元的时候,会重复加载 adsbygoogle.js 文件,导致谷歌AdSense 加载速度慢。谷歌官方也有说明:adsbygoogle.js 文件,只需要加载一次即可,不需要每个广告单元都加载。
2. 谷歌adsense广告单元代码优化方法
优化的方法其实很简单:
- 重复加载:每个页面都只加载一次重复的第1段adsbygoogle.js代码
- 保留不同:广告单元代码删除第1段代码,只保留第2段代码
- 延迟懒加载:将第1段代码放在footer.php,放在最后加载
2.1 每个页面页脚添加第1段代码
建议通过code snippets插件在所有网页<footer> </footer>上添加这一段重复的js代码,这一段代码其实也就是自动广告的代码。修改的代码也能实现懒加载,在网站其他内容加载之后再加载谷歌adsense广告。
注意红色部分改成自己的谷歌adsense ID。
/**延迟加载谷歌adsense重复JS**/
add_action( 'wp_footer', function () { ?>
<script>
function downloadJSAtOnload() {
var element = document.createElement("script");
element.setAttribute("async", "");
element.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-您的ID";
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>
<?php } );
2.2 广告单元代码优化
删除广告单元代码中重复的第1段js代码,只保留下面的第2段代码即可。
删除之后再添加到网站页面需要放置的位置。
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxx"
crossorigin="anonymous"></script>
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:500px"
data-ad-client="ca-pub-xxxxxxxx"
data-ad-slot="5310718886"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
总结
通过合并JS,懒加载JS,降低谷歌adsense代码加载对网站速度的影响,从而提高网站速度。本站测试以上方法没有什么问题,可以正常显示,网站速度有了一定的提升。
本文标题:《优化谷歌adsense广告代码,减少JS重复加载,提升网站速度》
本文链接:https://freechao.com/4619.html
发布日期:2022年09月18日 13:06:17
更新日期:2024年03月06日 21:09:28
版权声明:除特殊注明,均为作者原创内容,遵守CC-BY-NC 4.0版权协议,转发请保留原文链接!
免责声明:文中如涉及第三方资源,均来自互联网,仅供学习研究,禁止商业使用,如有侵权,联系我们24小时内删除!