自从7月份挂网站上挂上Google Adsense后，果然不愧是全球闻名的拖慢加载速度的JS，哪怕现在国内解析走的是上海和北京的服务器，但实际情况是，网站完全加载完全都要十几秒，甚至几十秒。我的网站是WordPress搭建的，默认开启了图片延迟加载，加上Google Adsense之后，图片就经常加载不出来，非常影响体验以及SEO。
网上查了下，一般做法就是延迟加载Google Adsense的代码。然后我个人情况会稍微不一样，但最后也找到了原因及解决办法。
以下是前后的Pagespeed测试图：
优化Google Adsense广告代码
先来看看Google Adsense的代码，每一个广告单元的代码都是下面这个样子：
<script async src="https://kerrynotes.com/wp-content/litespeed/localres/aHR0cHM6Ly9wYWdlYWQyLmdvb2dsZXN5bmRpY2F0aW9uLmNvbS9wYWdlYWQvanMvYWRzYnlnb29nbGUuanM=?client=ca-pub-xxxxxxxxx"
crossorigin="anonymous"></script>
<!-- 侧边栏广告 -->
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-xxxxxxxxx"
data-ad-slot="xxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>可以看到这段代码分成了三个部分：
1. 加载Adsense的JS。如果有多个广告单元的话，其实这段代码只需要执行一次，所以它是可以单独提出来，放到head或者footer里就好了。
<script async src="https://kerrynotes.com/wp-content/litespeed/localres/aHR0cHM6Ly9wYWdlYWQyLmdvb2dsZXN5bmRpY2F0aW9uLmNvbS9wYWdlYWQvanMvYWRzYnlnb29nbGUuanM=?client=ca-pub-3818033429018049"
crossorigin="anonymous"></script> - async 表示异步加载Adsense的JS。
- crossorigin="anonymous" 允许匿名请求。
2. 广告标记
<ins class="adsbygoogle" //定义广告的类名
style="display:inline-block;width:300px;height:250px" // 指定广告的宽度和高度
data-ad-client="ca-pub-xxxxxxxx" // 这里是你自己的Adsense ID。
data-ad-slot="xxxxxxxx"></ins> // 广告单元ID
3. 推送广告
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>这段代码用于将广告请求推送给 Google AdSense。
所以我们可以把第一段代码放到主题的head或者是footer里，不用重复加载Adsense的js，缩减多次调用adsbygoogle.js的时间。然后原来的广告位就只剩下了第二段和第三段代码。
等页面加载完再加载Google Adsense
接下来就是延迟加载adsbygoogle.js，让其在网页加载完之后再执行。把下面这段代码放在网站的footer，在</body>之前。
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "https://kerrynotes.com/wp-content/litespeed/localres/aHR0cHM6Ly9wYWdlYWQyLmdvb2dsZXN5bmRpY2F0aW9uLmNvbS9wYWdlYWQvanMvYWRzYnlnb29nbGUuanM=";
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>然后广告位在贴上剩下的ins和push代码：
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-xxxxxxxxx"
data-ad-slot="xxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>滚动页面时再加载Google Adsense
上面是等页面加载完再加载Adsense，还可以选择当用户滚动页面时再开始加载广告。将下面的代码插入到</body>前。
<!-- 延迟加载Google Adsense -->
<script type='text/javascript'>
//<![CDATA[
/* 延迟加载 AdSense JS */
var lazyadsense = !1;
window.addEventListener("scroll", function() {
(0 != document.documentElement.scrollTop && !1 === lazyadsense || 0 != document.body.scrollTop && !1 === lazyadsense) && (! function() {
var e = document.createElement("script");
e.id = "g_ads_js", e.type = "text/javascript", e.async = "async", e.src = "https://kerrynotes.com/wp-content/litespeed/localres/aHR0cHM6Ly9wYWdlYWQyLmdvb2dsZXN5bmRpY2F0aW9uLmNvbS9wYWdlYWQvanMvYWRzYnlnb29nbGUuanM=";
var a = document.getElementsByTagName("script")[0];
a.parentNode.insertBefore(e, a)
/* 以下为自动广告专用，如果没有开启，请删除*/
var gads = document.getElementById("g_ads_js")
gads.setAttribute("data-ad-client", "ca-pub-XXXXXXXXXXXXXXXX");
}(), lazyadsense = !0)
}, !0);
//]]>
</script>
<!-- 延迟加载广告推送 -->
<script>
(adsbygoogle = window.adsbygoogle || []).onload = function () {
[].forEach.call(document.getElementsByClassName('adsbygoogle'), function () {
adsbygoogle.push({})
})
}
</script>然后原广告位上的代码只保留ins即可：
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
data-ad-slot="1234567890"
data-ad-format="auto"
data-full-width-responsive="true"></ins>针对累积布局偏移（CLS）的优化
累积布局偏移 Cumulative Layout Shift，简称是CLS。该概念于2020年5月18日谷歌更新算法时提出。这次更新将 HTML 元素初始位置的任何更改加入了排名因素。累积布局偏移 (CLS) 是用于描述这种位置变化的术语。
通过使用上面的 Google AdSense 延迟加载代码，你可以加快网站速度。但是这会影响CLS分数。因为Adsense的代码里没有规定元素的高度，那么在广告加载前，这块的高度就是0 px，但是一旦加载了 AdSense 广告，元素的高度将变为280 px 到 320 px的样子。那么网页其他元素的初始位置都会自动下移，这会导致 CLS 分数提高0.5以上。然而，谷歌pagespeedinsights的建议最大值是0.25。
建议在ins的代码上加上一个div，规定一个最小高度（当你选择的是固定尺寸的广告时，该值要跟你广告尺寸匹配）。所以延迟加载的代码不变，广告位ins的代码段变成了下面的样子：
<div style="min-height=250px">
<!-- 侧边栏广告 -->
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-XXXXXXXXXXXXX"
data-ad-slot="XXXXXXXXX"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>我选择的解决方法
我开启了自动广告和手动展示广告，上述方法我最终只用了第一个，减少Adsense JS的调用。
其次我的需求是加快图片的加载速度，不要等到Adsense加载完再进行加载。虽然我已经将Adsense的代码放到了最后，但仍然是广告加载优先于图片加载。
然后我发现问题的原因来自于安装的一个插件 LiteSpeed Cache。它里面有图片延迟加载的设置，且执行顺序是落后于广告的，所以导致我不论怎么关闭WordPress和主题自带的延迟加载功能，都无法解决问题。最终我关掉了该插件里的延迟图片加载功能，问题解决。
