参考:https://juejin.cn/post/7063754993072865287
一、性能指标:
指标 | 含义 |
---|---|
FP | 首次绘制 |
FCP | 首次内容绘制 |
LCP | 最大内容绘制 |
FID | 首次输入延迟 |
TTI | 可交互时间 |
TBT | 总阻塞时间 |
CLS | 累积布局偏移 |
- FP: 第一次绘制像素的时间
- FCP:首次内容绘制,首次绘制文本、图片、非空白 Canvas 或 SVG 的时间,FP<= FCP
- LCP:视窗内最大的元素绘制的时间,该时间会随着页面渲染变化而变化,因为页面中的最大元素在渲染过程中可能会发生改变,另外该指标会在用户第一次交互后停止记录
- FID:记录在 FCP 和 TTI 之间用户首次与页面交互时响应的延迟。这个指标其实挺好理解,就是看用户交互事件触发到页面响应中间耗时多少,如果其中有长任务发生的话那么势必会造成响应时间变长。
- TTI:
- 从 FCP 指标后开始计算
- 持续 5 秒内无长任务(执行时间超过 50 ms)且无两个以上正在进行中的 GET 请求
- 往前回溯至 5 秒前的最后一个长任务结束的时间
- TBT:记录在 FCP 到 TTI 之间所有长任务的阻塞时间总和
- CLS:记录了页面上非预期的位移波动。
二、白屏
和白屏相关的两个指标:FP、FCP
FP 指的是绘制像素,比如说页面的背景色是灰色的,那么在显示灰色背景时就记录下了 FP 指标。但是此时 DOM 内容还没开始绘制,可能需要文件下载、解析等过程,只有当 DOM 内容发生变化才会触发,比如说渲染出了一段文字,此时就会记录下 FCP 指标。因此说我们可以把这两个指标认为是和白屏时间相关的指标,所以肯定是最快越好。按照官方的推荐时间, FP 及 FCP 两指标在 2 秒内完成的话我们的页面就算体验优秀
三、三大核心指标
Google 在20年五月提出了网站用户体验的三大核心指标,分别为:
LCP
FID
CLS
LCP 代表了页面的速度指标,虽然还存在其他的一些体现速度的指标,但是上文也说过 LCP 能体现的东西更多一些。一是指标实时更新,数据更精确,二是代表着页面最大元素的渲染时间,通常来说页面中最大元素的快速载入能让用户感觉性能还挺好。
FID 代表了页面的交互体验指标,毕竟没有一个用户希望触发交互以后页面的反馈很迟缓,交互响应的快会让用户觉得网页挺流畅。
CLS 代表了页面的稳定指标,尤其在手机上这个指标更为重要。因为手机屏幕挺小,CLS 值一大的话会让用户觉得页面体验做的很差。