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 内打开的用户占比，秒开率越高，整体用户体验越好。