最近参加了字节举办的《APMPlus前端监控训练营》,特此记录些指标,方便自己日后查阅。
一、性能指标
性能指标主要依赖 Navigation Timing 或者 Navigation Timing 2,通过记录一个文档从发起请求到加载完毕的各阶段的性能耗时,以加载速度来衡量性能。
各阶段计算方式和含义
二、用户指标
用户指标专注于用户视角下的浏览体验。
用户体验
|
指标
|
发生了吗?
|
FP(First Paint ) FCP(First Contentful Paint )
|
内容有用吗?
|
FMP(First Meaningful Paint ) SI(Speed Index) LCP (Largest Contentful Paint)
|
内容可用吗?
|
TTI(Time to Interactive ) TBT (Total Blocking Time)
|
令人愉悦吗?
|
FID(First Input Delay ) CLS(Cumulative Layout Shift)
|
FP(First Paint)
FCP(First Contentful Paint)
FMP(First Meaningful Paint)
- 通过 MutationObserver 监听每一次页面整体的 DOM 变化,触发 MutationObserver 的回调。
- 在回调计算出当前 DOM 树的分数,分数变化最剧烈的时刻,即为 FMP 的时间点。
SI(Speed Index)
TTI(Time to Interactive)
FID(First Input Delay)
- FID 反映用户对页面交互性和响应性的第一印象,良好的第一印象有助于用户建立对整个应用的良好印象。
- 页面加载阶段,资源的处理任务最重,也最容易产生输入延迟。因此关注 FID 指标对于提升页面的可交互性有很大收益。
- FID 和页面加载完成后的 Input Delay 具有不同的解决方案。针对 FID,我们一般建议通过 Code Splitting 等方式减少页面加载阶段 JS 的加载、解析和执行时间。而页面加载完成后的 Input Delay,通常是由于开发人员代码编写不当、引起 JS 执行时间过长而产生的。
LCP(Largest Contentful Paint)
指标
|
定义
|
存在的问题
|
FCP
|
首次内容绘制时间
|
通常与用户无关
|
FMP
|
首次绘制有意义内容的时间点
|
非标准化并且难以在浏览器之间统一实现
约 20% 的情况下不准确
|
SI
|
跟踪在视口中加载内容的视觉进程
|
复杂的指标,难以解释
计算密集,不可用于线上监控
|
TBT(Total Blocking Time)
长任务:如果一个任务在主线程上运行超过 50 毫秒,那么它就是长任务。超过 50ms 后的任务耗时,都算作任务的阻塞时间。
一个页面的TBT,是从 FCP 到 TTI之间所有长任务的阻塞时间的总和。
TTI 有时可能会误导用户,但当与 TBT 结合使用时,你就会更清楚地了解页面对用户输入的响应程度。
![](https://img2022.cnblogs.com/blog/211606/202207/211606-20220712172023509-1680245167.png)
CLS(Cumulative Layout Shift)
量化了在页面加载期间,视口中元素的移动程度。
当我们点击按钮时,突然出现了一块内容。无论是以一种增加意外点击几率的方式加载广告,还是在加载图片时文本向下移动,内容的意外移动都会让人非常不舒服。
CLS分数越低越好,因为这意味着在整个页面交互过程中发生的内容的偏移较少。
单次布局偏移的计算公式:score = 距离系数 * 影响分数
例如:
- 元素向下移动了视口高度的 ⅓,所以距离系数是 0.33。
- 元素在其起始位置和移动后的位置所占的面积占视口总面积的 ⅔,因此影响分数为 0.66。
- 布局偏移得分为 0.33 × 0.66 = 0.2178。
CLS的计算细节和原理可以查看 web.dev讲述累积布局偏移 (CLS)。
web-vitals 库提供了 LCP、FID、CLS、FCP 和 TTFB 指标。在 DevTools 中还能使用 Lighthouse 得到这些指标。
定义指标阈值
- 确保对页面或网站的大多数访问都达到了目标性能水平。
- 不受到异常值的过度影响。
关键指标的基准线
Metric Name
|
Good(ms)
|
Needs Improvement(ms)
|
Poor(ms)
|
FP
|
0-1000
|
1000-2500
|
Over 2500
|
FCP
|
0-1800
|
1800-3000
|
Over 3000
|
LCP
|
0-2500
|
2500-4000
|
Over 4000
|
TTI
|
0-3800
|
3800-7300
|
Over 7300
|
FID
|
0-100
|
100-300
|
Over 300
|
CLS
|
0-0.1(无单位)
|
0.1-0.25(无单位)
|
Over 0.25(无单位)
|
这里为什么没有FMP、TBT 和 SI 呢?
经过测试,LCP 非常近似于FMP的时间点,FMP渐渐可以通过LCP代替。
SI的计算逻辑比较复杂,更常用在lighthouse中,而非线上监控。
虽然 TBT 可以在线上进行测量,但不建议这样做,因为用户交互会影响网页的 TBT,从而导致报告中出现大量差异,线上监控推荐使用 FID。
站点性能满意度计算
![](https://img2022.cnblogs.com/blog/211606/202207/211606-20220712172528800-1031808294.png)
参考lighthouse的同时,去掉了仅实验室环境推荐测量的指标。
三、优化性能指标
网络优化
2. 开启brotli压缩,相比 gzip,它具有更高的压缩比和更快的压缩性能
3. 善用HTTPS,通过有效的优化手段,如Session Resume、OCSP Stapling等等,提升HTTPS性能
4. 使用CDN部署静态资源,有效降低访问延迟,提高可用性
5. DNS预解析,常用于CDN域名场景,减少DNS耗时
6. 提前建立网络连接,常用于Server API等域名,兼容性更好
缓存优化
资源加载优化
从请求时机、文件体积、加载方式等等方向优化
四、优化用户指标
优化 FP && FCP
- 缩小 CSS && 移除未使用的 CSS
优化 FMP && LCP
优化 FID
如何更快地响应用户交互
优化 CLS
- 无尺寸的图像:设置长宽、或者通过使用CSS 宽比容器预留所需的空间。
- 无尺寸的广告、嵌入和 iframe:预留空间、避免在可视区域顶部放置广告、使用占位符或者预先计算足够的空间。
- 动态注入的内容:预留空间,比如使用占位符或者骨架屏等。
- 导致不可见文本闪烁 (FOIT)/无样式文本闪烁 (FOUT) 的网络字体:预加载字体。
优化TTI
- 参考如何优化FCP
- 预加载关键请求
- 最小化关键请求深度
- 减少JS执行时间
- 最小化主线程工作
- 保持较低的请求数和传输大小
参考: