这是我参与11月更文挑战的第11天,活动详情查看:2021最后一次更文挑战。
先来问一个问题:web 性能优化到底优化的是什么?你可能会说,优化的是用户体验,但是用户体验本来就是个不可测量的。因此我们需要把不可测量的指标变成可测量的指标。
什么样的指标值得我们关注?
要确定关键的性能指标,必须满足两点:
- 可衡量,就是可以通过代码来度量;
- 关注以用户为中心的关键结果和真实体验。
第一点好理解,无法衡量就无法优化,而第二点说的“关键结果和真实体验”是什么意思呢?
所谓关键结果,就是用户真正关心什么。举例来说,当用户进入商品详情页面,他关心的是这个商品怎么样,什么价格,具体到页面上就是商品描述、商品头图、商品价格和购买按钮这些关键信息。我们要保证无论什么情况下都能让用户看到这些信息。
而真实体验,就是用户使用产品的感受。比如当用户进入列表页,在滑动过程中,页面加载突然跳出一个弹窗,他会不会觉得烦?这就是一种真实体验。
性能优化关键指标设定
在设定之指标前,我们先来了解一些概念。
加载
所谓加载,就是进入页面时,页面内容的载入过程。比如,当你打开一些网站时,你会发现,有的网站首页上的文字、图片出现很缓慢,而有的则很快,这个内容出现的过程就是加载。加载缓慢严重消耗用户的耐心,会让用户离开页面。
交互
所谓交互,就是用户点击网站或 App 的某个功能,页面给出的回应。比如我们点击了一个“点赞”按钮,立刻给出了点赞数加一的展示,这就是交互体验好,反之如果很长时间都没回应,这就是交互体验不好。
视觉稳定性指标
视觉稳定性指标 CLS(Cumulative Layout Shift),也就是布局偏移量,它是指页面从一帧切换到另外一帧时,视线中不稳定元素的偏移情况。
可测量的指标
从用户按下回车时,到达以下各项的时长:
- 有内容出现时
- DOM ready事件发生(DOMContentLoaded)
- 页面可交互时
- onload 事件发生
- 动态资源加载完成
白屏时间
什么叫白屏时间呢?它指的是从输入内容回车(包括刷新、跳转等方式)后,到页面开始出现第一个字符的时间。这个过程包括 DNS 查询,建立 TCP 连接,发送首个HTTP请求,返回HTML文档,HTML文档 Head 解析完毕。它的标准时间是 300ms。
如果白屏时间过长,用户会认为我们的页面不可用,或者可用性差。如果超过一定时间(如 1s),用户注意力就会转移到其他页面。
哪些因素会导致白屏时间过长?原因有很多,有可能是 DNS 查询时间长,建立 TCP 请求链接太慢,或者是服务器处理请求速度太慢,客户端下载、解析、渲染时长过长,没有做 Gzip 压缩,缺乏本地离线化处理,等等。
首屏时间
首屏时间=白屏时间+渲染时间。它是指从浏览器输入地址并回车后,到首屏内容渲染完毕的时间。这期间不需要滚动鼠标或者下拉页面,否则无效。
在加载性能指标方面,相比于白屏时间,首屏时间更重要。
- 从重要性角度看,打开页面后,第一眼看到的内容一般都非常关键,比如电商的头图、商品价格、购买按钮等。这些内容即便在最恶劣的网络环境下,我们也要确保用户能看得到。
- 从体验完整性角度看,进入页面后先是白屏,随着第一个字符加载,到首屏内容显示结束,我们才会认为加载完毕,用户可以使用了。
白屏加载完成后,仅仅意味着页面内容开始加载,但我们还是没法完成诸如下单购买等实际操作,首屏时间结束后则可以。
首屏时间可以拆分为白屏时间、数据接口响应时间、图片加载资源等。 白屏时间前面已经提到了,数据接口响应时间可以直接从后端服务中获取,不需要前端再重复计算,我们只需取值即可。最后的图片资源需要我们单独采集。
最后说一句
如果这篇文章对您有所帮助,或者有所启发的话,帮忙关注一下,您的支持是我坚持写作最大的动力,多谢支持。