# 前端性能优化的关键指标

性能优化的关键指标主要分为加载、交互和视觉稳定性三个方面，目前大部分公司比较关注的主要是加载指标，交互和视觉稳定性目前还没有成熟的采集方案和性能标准。

# 加载

加载就是进入页面时，页面内容载入的过程。主要关注点在于白屏时间和首屏时间。

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

首屏时间 = 白屏时间 + 渲染时间

首屏时间可以进一步拆解为：白屏时间、数据接口响应时间、图片加载资源时间等，数据接口响应时间一般可以直接从后端服务中获取，前端不需要重复计算。

首屏时间的度量指标：

用户平均首屏加载时间：早期的标准，没有区分 2G / 3G / 4G / WiFi 等不同的网络环境。首屏时间在 1S 内的话，用户会感觉很快；如果首屏时间超过 2.5s 用户会感觉很慢。但是如果是在 1s 内打开页面，500ms 和 800ms 对用户来说没有什么差别，因为人对这么短的时间并不敏感。由于 2G / 3G 等弱网环境会严重影响首屏加载时间这个指标，所以使用平均首屏加载时间作为度量并不可靠。
首屏加载时间中位数：做正态分布，看分位值统计。比如P50（50 分位值）、P90（90分位值）、P99（99分位值）。如 P90 意思就是将所有首屏时间排序，排在第 99 位的首屏时间就是 P99。但是这种方式处理也很麻烦，所以后面引入了秒开率这个指标。
秒开率：1S 内打开用户的占比。

交互就是用户点击网站或APP的某个功能，页面给出的回应。比如我们点击 star 之后，star 标志会变色，这就是一个良好的交互。

交互的性能指标：

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

CLS 比较前沿，目前还没有统一的标准，大部分公司很少关注，目前的采集方法只有使用 Google 的 Lighthouse 做本地采集，还没有其他好的方案

例如：

1、当我们准备点击播放按钮时，原来的播放按钮位置突然插入了一条广告，导致我们点击了广告，跳转到广告页面

2、当我们准备点击关闭弹窗时，弹窗突然移动了一段距离，导致我们没有点击到关闭按钮