前端性能优化之性能指标篇-深圳市維司達科技有限公司

1、常见性能指标

FP（First Paint - 首次绘制）：页面首次绘制的时间点，即第一个像素绘制到屏幕上的时间点。
FCP（First Contentful Paint - 首次内容绘制）：页面首个内容绘制到屏幕上的时间点，这里的内容包括文本、图片等。
LCP（Largest Contentful Paint - 最大内容绘制）：可视区域内最大的元素加载的时间点。这里的“最大”指的是从几何属性（可视尺寸）来计算，绘制面积最大的那个元素。
FID（First Input Delay - 首次输入延迟）与 INP（Interaction to Next Paint）：页面首次交互（点击链接、按钮等）到浏览器实际响应的延迟。以前该指标用FID来衡量，但目前已经被INP取代，它们之间的区别是，FID 只衡量“第一次”交互，而 INP 会观察整个页面所有交互事件，并报告一个较差或最高的数值，这样更能反应出页面的整体响应性。
CLS（Cumulative Layout Shift - 累积布局偏移）：在页面生命周期当中，累计的意外布局偏移总分数。
TTFB（Time to First Byte）：浏览器从发起请求到接收到服务器响应数据的首字节所花费的时间。

2、需要关注什么样的指标？

上面列出了那么多指标，那么在实际衡量前端项目性能时，我们究竟应该关注些什么指标呢？

我们可以从这几方面入手：

可衡量。就是可以通过代码计算拿到的指标，即可以用代码来衡量，无法衡量也就无法优化。
用户关心的关键信息。比如用户进入了一个商品详情页，他最关心的是这个商品是怎样的，包括商品头图、商品描述、商品价格、购买按钮等关键信息。
用户的真实体验。比如用户在列表中滑着滑着，突然弹出一个广告弹窗，用户就会觉得体验很差。

3、加载性能指标

3.1 白屏时间

白屏时间是指用户输入内容按下回车（也包括刷新、跳转等方式）后到页面出现第一个字符的时间，其标准是 300 ms。

影响白屏时间的因素如下：

在客户端请求阶段，DNS查询时间长，没利用好本地缓存，HTTP请求阻塞等。
在服务端处理请求阶段，服务器处理请求速度太慢，包括数据库查询慢、没做数据缓存、没开启Gzip压缩等。
在客户端渲染阶段，HTML解析慢、script阻塞、资源加载慢、渲染时间长等。
用户本地网络慢，以及缺乏本地离线化处理等。

3.2 首屏时间

首屏时间指的是用户看到当前页面（第一屏）被完全加载出来的时间点。首屏时间 = 白屏时间 + 首屏渲染时间。

首屏时间的标准不是定死的，而是根据当前系统对时间是否敏感来决定的，比如 C 端系统 PC官网、H5 页面等，对首屏要求较高，而像 B 端管理后台，对首屏时间就没那么敏感，而且一般企业内部用的系统，其访问的网络环境一般都比较稳定，所以对首屏时间要求会低一些。

具体时间可以参考如下表：

类别	快	较快	慢	很慢	指标示例
时间敏感	<1s	1s ~ 1.5s	1.5s ~ 2.5s	>2.5s	首屏、白屏
时间不敏感	<2s	2s ~ 4s	4s ~ 8s	>8s	onload
最佳：白屏 < 1s，首屏 < 1.5s，onload < 3s。

一般来说，首屏时间在 1s 内，给用户的感觉就是非常流畅，在 1s 内的话，无论是 300ms 还是 500ms，其实用户感觉不出来太大的差别，但是如果首屏时间超过 2.5s，用户感觉就会很慢，体验很差，用户流失率也会嘎嘎往上升。

3.3 秒开率

我们可以用首屏时间来衡量单个用户的首屏体验，但是如果把很多用户的首屏时间都收集上来了，如何衡量整个系统的首屏体验呢？

平均值：平均值就是所有用户首屏时间的总和除以用户数，但是平均值有个致命的缺点，就是容易被极端值影响，比如有 10 个用户，其中 9 个用户首屏时间都在 1s 内，而第 10 个用户首屏时间在 10s 内，那么平均值就会变成 5s，这个结果显然是不合理的。
中位数。可以将所有数据做正态分布，看分位值统计。比如 P50（50分位值）、P90（90分位值）、P99（99分位值），这个值是怎么计算出来的呢？以 P99 为例，先把所有首屏数据先排好序，排在第 99 位的数据就是 P99，但这样还是比较麻烦。于是引入了秒开率的概念。
秒开率：指的是 1s 内打开的用户占比。比如 10 个用户，1s 内能加载完首屏的用户有 8 个，那秒开率就是 80%。

按照秒开率的概念，我们可以建立如下的首屏时间标准：

类型	首屏时间	秒开率	1.5秒开率	2秒开率
SSR（服务端渲染）	1000ms	80%	95%	98%
端内（Hybrid 环境）	1200ms	65%	85%	90%
端外（浏览器环境）	1500ms	40%	60%	80%

4、交互性能指标

交互指的就是人机交互，比如用户点击了按钮后，网站立马给予一定的回应，包括跳转、弹窗、动画等，那就是用户体验好，但如果用户点击了按钮后，网站半天没有任何反应，那给用户的体验就很差。

衡量交互指标的方式主要用两种：

FID 指标（First Input Delay，首次输入延迟），指标必须尽量小于 100 ms。但文章开头也介绍过，现在 FID 指标已经被 INP 取代。
PSI（Perceptual Speed Index，视觉变化率），衡量标准是小于 20%。

5、视觉稳定性指标

视觉稳定性用 CLS（Cumulative Layout Shift）来衡量，CLS 也就是布局偏移量，它是指页面从一帧切换到另外一帧时，视线中不稳定元素的偏移情况。

比如在一个商品详情页中，用户在想点击商品图片放大仔细查看图片内容，但是突然图片上方渲染出了一条广告，把图片顶到页面底部去了，这个就是不稳定元素，给用户的体验非常差。

小结

常用的性能指标包括FP、FCP、LCP、FID、INP、CLS、TTFB等，而在实际前端项目优化中，我们往往比较关注加载性能指标、交互性能指标和视觉稳定性指标，加载性能指标包括白屏时间和首屏时间，而为了更好的衡量首屏时间对于用户的整体效果，我们引入了秒开率的概念，也就是 1s 内打开的用户占比，秒开率越高，整体用户体验越好。