新手到站长的必经之路(十)

1、背景

无意中分享一个网站的链接给同事，满怀期待的炫耀一下，结果，尴尬的事情发生了，无限加载中。5s过去了还是没有出来。直觉告诉了网站出问题了。

2、排查步骤

• 回到自己的电脑上打开网址，300ms左右完成加载
• 切换到无痕模式进行打开，问题复现了。

打开F12k可以明显发现加载缓慢的有以下几类资源

• https://fastly.jsdelivr.net/npm/.......
• https://googleads.g.doubleclick.net/....

3、根因分析

• 免费cdn jsdelivr自2021年12月20日起退出了大陆市场，稳定性堪忧
• google ads官方的代码存在坑点。默认是同步加载。但是大佬与google ads的链接不好。严重影响网站的加载速度，进而带来了非常不好的用户体验。

4、解决办法

4.1、cdn迁移

国内免费的且可靠的cdn选择如下：

• Staticfile CDN 官网：https://staticfile.org/ ,CDN加速由七牛云提供，访问速度很快
• 字节跳动 官网：https://cdn.bytedance.com/ 功能更丰富，支持自定义缓存时长，支持拼接js
• https://cdn.bootcdn.net/ 这个依赖于jsdelivr，也不行了

我的做法是

• 优先加cdn切换到Staticfile
• 部分低版本Staticfile 没有的，我在jsdelivr上加资源下载下来，然后打包上传到个人的七牛云cdn。文件夹的目录按照原始的jsdelivr的目录进行构造。不得不说七牛云还是业内比较良心的

4.2、优化google ads

google ads的官方原始示例代码如下

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 自适应 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxx"
     data-ad-slot="5275519214"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

有多少个广告单元就复制几次

这样做带来2个问题

• adsbygoogle.js多次加载
• adsbygoogle同步加载阻塞页面的正常渲染

改进的方案是，优先网页加载，然后在google ads加载

• 移除所有的
• 在网页的底部增加如下代码，本质是在网页加载完毕，动态的引入googleads.js

<script type="text/javascript">
    function downloadJSAtOnload() {
        var element = document.createElement("script");
        element.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
        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>

或者
只保留一个js的加载
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

同时考虑到类似的情况，将百度统计之类的代码统一挪到网页的底部

5、优化效果

优化完毕，网页的加载速度大幅度提升。似乎找到了网页排名最近下降的真正原因了。看来平时关注网站的话还得多用无痕模式了