XuLaLa.Tech

自从7月份挂网站上挂上Google Adsense后，果然不愧是全球闻名的拖慢加载速度的JS，哪怕现在国内解析走的是上海和北京的服务器，但实际情况是，网站完全加载完全都要十几秒，甚至几十秒。我的网站是WordPress搭建的，默认开启了图片延迟加载，加上Google Adsense之后，图片就经常加载不出来，非常影响体验以及SEO。

网上查了下，一般做法就是延迟加载Google Adsense的代码。然后我个人情况会稍微不一样，但最后也找到了原因及解决办法。

以下是前后的Pagespeed测试图：

1. 优化Google Adsense广告代码
2. 等页面加载完再加载Google Adsense
3. 滚动页面时再加载Google Adsense
4. 针对累积布局偏移（CLS）的优化
5. 我选择的解决方法

优化Google Adsense广告代码

先来看看Google Adsense的代码，每一个广告单元的代码都是下面这个样子：

可以看到这段代码分成了三个部分：

1. 加载Adsense的JS。如果有多个广告单元的话，其实这段代码只需要执行一次，所以它是可以单独提出来，放到head或者footer里就好了。

• async 表示异步加载Adsense的JS。
• crossorigin="anonymous" 允许匿名请求。

2. 广告标记

3. 推送广告

这段代码用于将广告请求推送给 Google AdSense。

所以我们可以把第一段代码放到主题的head或者是footer里，不用重复加载Adsense的js，缩减多次调用adsbygoogle.js的时间。然后原来的广告位就只剩下了第二段和第三段代码。

等页面加载完再加载Google Adsense

接下来就是延迟加载adsbygoogle.js，让其在网页加载完之后再执行。把下面这段代码放在网站的footer，在</body>之前。

然后广告位在贴上剩下的ins和push代码：

滚动页面时再加载Google Adsense

上面是等页面加载完再加载Adsense，还可以选择当用户滚动页面时再开始加载广告。将下面的代码插入到</body>前。

然后原广告位上的代码只保留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的代码段变成了下面的样子：

我选择的解决方法

我开启了自动广告和手动展示广告，上述方法我最终只用了第一个，减少Adsense JS的调用。

其次我的需求是加快图片的加载速度，不要等到Adsense加载完再进行加载。虽然我已经将Adsense的代码放到了最后，但仍然是广告加载优先于图片加载。

然后我发现问题的原因来自于安装的一个插件 LiteSpeed Cache。它里面有图片延迟加载的设置，且执行顺序是落后于广告的，所以导致我不论怎么关闭WordPress和主题自带的延迟加载功能，都无法解决问题。最终我关掉了该插件里的延迟图片加载功能，问题解决。