性能指标
性能指标是定量分析页面性能的一系列指标。
性能指标一般通过两种方式来进行测量:
- 实验室:使用工具在稳定、受控的环境中模拟页面加载
- 实际:采集用户实际浏览页面时的性能数据
通用指标
通用指标是开发者能够借助工具评估、测量的指标。
可以借助通用指标与其他网站进行比较。
TTFB
第一字节时间 (TTFB) 指标测量连接建立时间和 Web 服务器响应能力。
TTFB 是下列请求节点的时间损耗汇总:
- Redirect time 重定向时延
- Service worker 启动时延(如果适用)
- DNS 查询时延
- 建立连接和 TLS 所消耗时延
- 请求,直到响应的第一个字节到达为止的时延
对 HTML 文档的请求,该指标先于其他所有的加载性能指标。
FCP
首次内容绘制 (FCP) 指标测量用户感知的加载速度。
如字面意思,是浏览器首次在屏幕上绘制内容的时间。
更快的FCP可以缓解用户等待焦虑,让用户知道网页正在加载。
LCP
最大内容绘制 (FCP) 指标测量用户感知的加载速度。
如字面意思,是浏览器在屏幕上绘制最大区域内容的时间。
最大内容绘制考量的元素类型为:
- 图片,包括背景图、视频封面
- 包含文本的块级元素
- 暂不考虑
<svg>
、<video>
最大内容是变化的,每展示一个元素后,就会与之前的最大内容元素比较,更大则会发出新的FCP数据对象PerformanceEntry
。
当用户与页面进行交互(通过轻触、滚动或按键)时,浏览器将立刻停止报告新条目,因为用户交互通常会改变用户可见的内容(滚动操作时尤其如此)。
出于分析目的,应该采集最近一次分发的PerformanceEntry
。
FID
首次输入延迟 (FID) 测量加载响应速度。低 FID 有助于让用户确信页面是有效的。
FID 测量接收到输入事件的时间点与主线程下一次空闲的时间点之间的差值。这就意味着**即使在尚未注册事件侦听器的情况下,**FID 也会得到测量。
换句话说,FID测量的是用户交互到下次浏览器空闲的时间。
FID 只关注不连续操作对应的输入事件,如点击、轻触和按键。用户不交互,则没有FID。
TTI
可交互时间 (TTI) 是测量加载响应速度的实验室指标。
TTI 指标测量页面从开始加载到主要子资源完成渲染,并能够快速、可靠地响应用户输入所需的时间。
服务器端渲染、骨架屏等技术可能会导致页面看似可以交互,但实际上不能进行交互。TTI可以评估这个问题。
TTI 会在主线程至少有五秒钟没有长任务时,认为页面具备"可靠交互性"。
TTI 指标最好在实验室中进行测量,用以开发优化FCP到TTI之间的时间差。
TBT
总阻塞时间 (TBT) 是测量加载响应速度的实验室指标。
TBT测量FCP到TTI之间,任务持续时间超过 50ms 的部分,时间总和。这段时间属于浏览器对用户交互没有响应的时间。
该项指标有助于量化在页面交互性变为可靠前,不可交互程度的严重性,低 TBT 有助于确保页面的可用性。
有效的长任务分片可以降低该指标。
CLS
累积布局偏移 (CLS) 是测量视觉稳定性的指标。
如果页面的元素在加载过程中频繁发生位置变化,那对用户来说会是一个较差的体验。低 CLS 有助于确保页面加载体验是令人愉悦的。
- 当现有元素的起始位置发生变更时才算作布局偏移
- 用户交互500ms内发生的布局偏移,算符合预期的,不影响指标
- CSS
transform
不影响指标
INP
Interaction to Next Paint (INP,交互至下次绘制)是一个待定的、用于取代FID的指标,统计浏览中每次交互到绘制反馈的最大耗时,低 INP 意味着页面始终能够快速响应大多数用户交互。
自定义指标
对于通用指标不能满足的情况,开发者可以借助浏览器提供的较低级别的标准化 API,实现自定义指标。
场景举例:
- SPA跳页面用时
- 缓存命中率
- 网页最大元素并不是页面主要内容的一部分,如页面背景图,因此 LCP 就不适用了
API: