如何让Google AdSense 自适应广告延迟加载 提升网站打开速度

缩短网站打开时间 减少js加载 延迟加载谷歌广告的方法

前言

自从网站更换新主题之后，发现新主题的打开速度还不如原先的主题快，有时候甚至加载需要几十秒或者完整打不开！先是修改了jQuery的CDN为了能加快网站打开速度，试用了多个缓

存插件，比如wpopt，Breeze等都不太满意！最后选择了Jetpack插件，功能比较强大，开启缓存，优化html，优化了图片格式。这样做了之后确实有所效果！当我加入了google AdSense广告

之后，发现速度又变慢了！网上找了很多方法，总结下来就是可以让谷歌广告延迟加载，优先加载网页，网页加载完成之后再去加载广告的代码。这算是比较常用的方法！

测试效果

延迟加载Google AdSense广告代码

这是google AdSense给的自适应广告代码

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

如果不对代码进行修改的话，它是异步加载方式实现的，就是和网站其他页面同时加载，呈现的效果有时候就会感觉很卡，很慢！

• async 代表异步加载Adsense的JS
• crossorigin=”anonymous” 代表允许匿名请求

修改后的完整代码

<footer>
<!-- 在这里放置延迟加载广告的代码 -->
<script>
function loadDelayedAd() {
var adScript = document.createElement('script');
adScript.async = true;
adScript.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-123456789';
adScript.crossOrigin = 'anonymous';
document.head.appendChild(adScript);

adScript.onload = function() {
(adsbygoogle = window.adsbygoogle || []).push({});
};
}

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

上述代码的关键点是将广告加载代码包裹在名为 loadDelayedAd 的函数中，并在页面加载完成时通过 window.onload 事件触发该函数。这样，广告将在页面的其他内容加载完成后再进行加载。

使用前需要将代码中的pub的ID换成你自己的，然后将代码放在<header>或者<footer>标签内容中，</body>之前。我是放在了<footer>部分,如下图

这样，你就能在页面底部实现广告的延迟加载。

延伸阅读：如何修改Cocoon主题的jQuery的CDN来提高国内的访问速度