web性能优化基础篇之性能优化指标

683 阅读4分钟

这是我参与11月更文挑战的第11天,活动详情查看:2021最后一次更文挑战

先来问一个问题:web 性能优化到底优化的是什么?你可能会说,优化的是用户体验,但是用户体验本来就是个不可测量的。因此我们需要把不可测量的指标变成可测量的指标。

什么样的指标值得我们关注?

要确定关键的性能指标,必须满足两点:

  1. 可衡量,就是可以通过代码来度量;
  2. 关注以用户为中心的关键结果和真实体验。

第一点好理解,无法衡量就无法优化,而第二点说的“关键结果和真实体验”是什么意思呢?

所谓关键结果,就是用户真正关心什么。举例来说,当用户进入商品详情页面,他关心的是这个商品怎么样,什么价格,具体到页面上就是商品描述、商品头图、商品价格和购买按钮这些关键信息。我们要保证无论什么情况下都能让用户看到这些信息。

而真实体验,就是用户使用产品的感受。比如当用户进入列表页,在滑动过程中,页面加载突然跳出一个弹窗,他会不会觉得烦?这就是一种真实体验。

性能优化关键指标设定

在设定之指标前,我们先来了解一些概念。

加载

所谓加载,就是进入页面时,页面内容的载入过程。比如,当你打开一些网站时,你会发现,有的网站首页上的文字、图片出现很缓慢,而有的则很快,这个内容出现的过程就是加载。加载缓慢严重消耗用户的耐心,会让用户离开页面。

交互

所谓交互,就是用户点击网站或 App 的某个功能,页面给出的回应。比如我们点击了一个“点赞”按钮,立刻给出了点赞数加一的展示,这就是交互体验好,反之如果很长时间都没回应,这就是交互体验不好。

视觉稳定性指标

视觉稳定性指标 CLS(Cumulative Layout Shift),也就是布局偏移量,它是指页面从一帧切换到另外一帧时,视线中不稳定元素的偏移情况。

可测量的指标

从用户按下回车时,到达以下各项的时长:

  • 有内容出现时
  • DOM ready事件发生(DOMContentLoaded)
  • 页面可交互时
  • onload 事件发生
  • 动态资源加载完成

白屏时间

什么叫白屏时间呢?它指的是从输入内容回车(包括刷新、跳转等方式)后,到页面开始出现第一个字符的时间。这个过程包括 DNS 查询,建立 TCP 连接,发送首个HTTP请求,返回HTML文档,HTML文档 Head 解析完毕。它的标准时间是 300ms。

如果白屏时间过长,用户会认为我们的页面不可用,或者可用性差。如果超过一定时间(如 1s),用户注意力就会转移到其他页面。

哪些因素会导致白屏时间过长?原因有很多,有可能是 DNS 查询时间长,建立 TCP 请求链接太慢,或者是服务器处理请求速度太慢,客户端下载、解析、渲染时长过长,没有做 Gzip 压缩,缺乏本地离线化处理,等等。

首屏时间

首屏时间=白屏时间+渲染时间。它是指从浏览器输入地址并回车后,到首屏内容渲染完毕的时间。这期间不需要滚动鼠标或者下拉页面,否则无效。

在加载性能指标方面,相比于白屏时间,首屏时间更重要。

  • 从重要性角度看,打开页面后,第一眼看到的内容一般都非常关键,比如电商的头图、商品价格、购买按钮等。这些内容即便在最恶劣的网络环境下,我们也要确保用户能看得到。
  • 从体验完整性角度看,进入页面后先是白屏,随着第一个字符加载,到首屏内容显示结束,我们才会认为加载完毕,用户可以使用了。

白屏加载完成后,仅仅意味着页面内容开始加载,但我们还是没法完成诸如下单购买等实际操作,首屏时间结束后则可以。

首屏时间可以拆分为白屏时间、数据接口响应时间、图片加载资源等。 白屏时间前面已经提到了,数据接口响应时间可以直接从后端服务中获取,不需要前端再重复计算,我们只需取值即可。最后的图片资源需要我们单独采集。

最后说一句

如果这篇文章对您有所帮助,或者有所启发的话,帮忙关注一下,您的支持是我坚持写作最大的动力,多谢支持。