阅读 123

使用service worker做缓存来加快首屏速度,可行么?

写在前面

本文首发于公众号:符合预期的CoyPan

不久之前,我简单探索了service worker在一个活动运营页面中的应用,可以参考我之前的这篇文章:

service worker轻度探索 - 解决运营活动需求中的图片加载问题?

那个时候,我就发现了一个现象:一张图片从service worker中加载的耗时,大于其从浏览器缓存中加载的耗时。最近在做页面首屏性能优化的相关工作,那么service worker能让页面首屏加载变快么?

业务场景

首先明确一下业务场景:一个App的h5分享页。这个分享页是一个使用react开发的单页应用,用户的交互只会停留在这个页面,不会跳转到其他的页面。业务中使用service worker来缓存静态资源(js,css),逻辑很简单,就是在service worker初始化的时候,将页面的静态资源缓存下来,后续访问页面时,可以直接从service worker中加载静态资源。有一个点需要注意,service worker的优先级是高于浏览器自带缓存的。目标是探索service worker是否能够加快页面首屏速度。

探索service worker的效果

针对本文提到的业务场景,我设计了小流量实验来验证service worker对网页首屏速度的影响。

实验指标

首先明确一下实验指标:

  1. 指标①:页面fetchStart到window.onload触发时的耗时。
  2. 指标②:页面fecthStart到最外层组件的componentDidMount触发时的耗时。
  3. 指标③:FP,页面首次绘制的时间点。
  4. 指标④:FCP,页面首次内容绘制的时间点。

关于首屏速度的更多指标,可以参考我之前写的这篇文章:

当考虑网页首屏加速的时候,我们在考虑什么

小流量实验

我通过用户id将页面的流量均分成了两组,对照组A,实验组B。

  1. 对照组A:不包含service worker逻辑,完全走之前的页面加载模式。

  2. 实验组B:包含service worker逻辑,使用service worker劫持网页中的静态资源请求。

在实验组B中,包含了以下多种情况:

  • 实验组B1: 浏览器根本就不支持service worker。
  • 实验组B2: 浏览器支持service worker,本次pv时,service worker进行初始化。
  • 实验组B3: 浏览器支持service worker,本次pv时,service worker已经劫持了静态资源请求,静态资源是从service worker中加载的。

实验结果

直观对比

我统计了5个自然天里,各个指标的50分位值,60分位值,90分位值和平均数。我们先来直观地看下A组和B组各个指标的50分位值的对比吧。

从上面的直观对比可以看出,4个指标,B组的50分位值都略微大于A组的50分位值,差距在几十毫秒左右。

其实,各个指标的50分位值,60分位值,90分位值和平均数,都是B组的值略大于A组的值。

到这里,其实已经可以得出一个结论了:在本文所描述的业务场景中,service worker并不能提高首屏速度

详细数据

下面是本次实验的详细数据。

首先给出一个上图看不出来的数据:

在实验组B中,B1,B2,B3三个组的PV占比大致为:20%,46%,34%。

接着,从上面的数据中,可以发现几个比较有意思的点:

  • 那些根本不支持service worker的浏览器,他们的指标①和指标②其实是挺快的。
  • 不支持service worker的浏览器,也不支持FP和FCP这两个指标。
  • service worker初始化时,会拖慢所有的指标,也就是说,会影响页面的首屏速度
  • 当service worker已经劫持了网络请求,静态文件通过sw加载时,所有的指标都是最快的,可以提升首屏速度

思考总结

从详细数据来看,如果静态文件通过service worker加载时,确实可以较大幅度提高首屏速度。但是从整体的效果上来看,service worker并不能提高首屏速度,甚至还会略微降低首屏速度。这是由业务场景决定的。最终,我也没有采用service worker来优化首屏速度。

那么,什么情况下,能用service worker来优化首屏速度呢?我觉得主要是以下两个场景:

  1. 老用户回访率很高的业务。老用户回访时,service worker已经劫持了网络请求,静态文件是可以通过service worker加载的。如果每天的页面pv里,大部分都是新用户,从整体上看,service worker并不能发挥作用,并且维护service worker本身也是需要一定的成本的,就没有必要上service worker了。
  2. 页面之间相互依赖。比如说有一个入口A页面,A页面可以跳转到B页面,那么可以在A页面中使用service worker将B页面的静态文件也缓存下来,这样可以较大幅度地提高B页面的首屏速度。

写在后面

本文通过实验,收集了详细的数据,研究了service worker在首屏加速问题上的表现。虽然最终并没有在业务中采用service worker来加速首屏,但是在过程中也收获了很多的东西,符合预期。

关注下面的标签,发现更多相似文章
评论