- 前端性能评估中常见的指标有
| 指标名称 | 解释 | 比重 |
|---|---|---|
| First Contentful Paint（FCP） | 首次内容渲染时间 | 10% |
| Speed Index（SI） | 速度指数 | 10% |
| Largest Contentful Paint（LCP） | 最大内容绘制 | 25% |
| Time to Interactive（TTI） | 页面可交互时间 | 10% |
| Total Blocking Time（TBT） | 总阻塞时间 | 30% |
| Cumulative Layout Shift（CLS） | 累积布局偏移 | 15% |
- 指标说明
- FCP
浏览器第一次加载页面的DOM所需的时间，即首次触发浏览器 The First Page Paint 事件所需的时间。图片、非空白的canvas和SVGs也包括在DOM内容之内，iframe中的内容不包括。
- SI
用来衡量页面可见内容填充快慢的指标。简单来说就是从页面加载到页面真实呈现在用户视觉中的时间。可以通过计算页面呈现前一帧到最后一帧来计算SI。
- LCP
最大内容绘制 (LCP) 指标会根据页面首次开始加载的时间点来报告可视区域内可见的最大图像或文本块完成渲染的相对时间。要想给用户带来比较好的体验，LCP时间需要控制在2.5s以内。可以创建一个PerformanceObserver来计算LCP，例如：
new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntries()) {
console.log('LCP candidate:', entry.startTime, entry);
}
}).observe({type: 'largest-contentful-paint', buffered: true});
- TTI
TTI测量的是页面达到完全可交互所需的时间。
页面达到完全可交互需要同时满足以下三个条件：
-
- FCP 之后，页面已经呈现了有用的内容
- 对大部分的可见页面元素而言，已经注册了事件回调
- 页面对用户交互的响应在50ms以内
- TBT
TBT 测量页面被阻止响应用户输入（例如鼠标点击、屏幕点击或按下键盘）的总时间。总和是首次内容绘制和互动时间之间所有长时间任务的阻塞部分之和。任何执行时间超过 50ms的任务都是长任务。50ms后的时间量是阻塞部分。例如，如果检测到一个 70 毫秒长的任务，则阻塞部分将为 20 毫秒。
- CLS
CLS 测量整个页面生命周期内发生的所有意外布局偏移中最大一连串的布局偏移分数。每当一个可见元素的位置从一个已渲染帧变更到下一个已渲染帧时，就发生了布局偏移。一连串的布局偏移，也叫会话窗口，是指一个或多个快速连续发生的单次布局偏移，每次偏移相隔的时间少于 1 秒，且整个窗口的最大持续时长为 5 秒。最大的一连串是指窗口内所有布局偏移累计分数最大的会话窗口。为了提供良好的用户体验，网站应该努力将 CLS 分数控制在0.1 或以下。为了确保您能够在大部分用户的访问期间达成建议目标值，一个良好的测量阈值为页面加载的第 75 个百分位数，且该阈值同时适用于移动和桌面设备。
- 示例
参考资料：
