CloudFlare Speed选项优化

优化CloudFlare Rocket Loader与Browser Insights,加快网站加载速度(误)。

Rocket Loader

介绍

什么是 Rocket Loader?

Rocket Loader 会将您所有 JavaScript 的加载一直推迟到渲染之后再进行,从而优先处理您网站的内容(文本、图像、字体等)。在使用 JavaScript 的页面上,这可使您的用户获得更快加载的体验,并且可改善以下性能指标:
首次渲染时间 (TTFP)
首次内容渲染时间 (TTFCP)
首次有效渲染时间 (TTFMP)
文件加载
https://support.cloudflare.com/hc/en-us/articles/200168056-What-does-Rocket-Loader-do

简单来说,就是延迟加载js。在页面加载时暂时注释js,先在页面中呈现其他资源(如CSS,图像等)。等到加载完成后,再去把js动态插回页面中,后浏览器加载完整页面。

Rocket Loader 开启前

Rocket Loader 开启后

听上去功能不错,能有效优化网站的加载速度。但实际上,在国内,首次加载这个12k的JS文件都够你怀疑人生一辈子了,更别说可能会导致某些JS无法正常运行,如Google Adsense等。

值得一提的是,百度云加速同样有此功能(JavaScript快速加载),得于国内百度云加速速度还算满意(总比CloudFlare强),这个功能还是值得开启的。
附·开启方法:1.氪金 2.自定义规则

优化方案

如果想让Rocket Loader不优化特定脚本,通过添加 data-cfasync=“false” 属性到相关js标签,即可让Rocket Loader忽略此js。

其中 'data-cfasync' 属性必须添加在 'src' 属性之前。

或者简单粗暴,直接关闭 Rocket Loader

Browser Insights

介绍

使用 Browser Insights 测量您的网站的性能和用户的加载时间。
https://support.cloudflare.com/hc/en-us/articles/360033929991-Cloudflare-Browser-Insights

测量您的网站的性能和用户的加载时间,对于国内用户就是个没啥卵用的功能。加载这个功能的JS比打开CloudFlare官网还慢。

优化方案

不多BB,直接关闭

作者

Yavin

发布于

2020-07-28

更新于

2020-07-28

许可协议

评论