网络指标 TTFB
Time to First Byte
衡量请求资源到响应第一个字节开始到达之间的时间，结合 网络 面吧的资源请求耗时，可以判断主要延迟在哪一层。
关于 Network 网络面板：
Queued at：表示请求何时入队，如果是 HTTP/1.1 ，请求可能因为并发限制卡顿。
Started at：代表开启页面后的，浏览器真正开始处理连接的时间段。
Resource Scheduling：资源调度阶段（DNS 解析(可选) > TCP 连接建立准备工作 > 等待可用连接池，HTTP/1.1 需要有并发限制请求，需要等待 ）
- Queueing：表示进入请求池排队等待的耗时，如果这里耗时过高，可能是
- DNS 解析较慢
- 同域请求数过多
- HTTP/1.1 并发限制引起的队头阻塞
- Queueing：表示进入请求池排队等待的耗时，如果这里耗时过高，可能是
Connection Start：连接开始阶段
- Stalled：阻塞和等待 TCP 建立的时间，有时候和 Queueing 阶段合并
Request/Reponse：请求响应阶段
- Request sent：请求发送耗时，通过这个可以判断，出现问题是否为本地网络层的异常，或者发送的请求体是否过大，精简请求数据
- Waiting for server【TTFB】：等待服务器响应，通常如果这里耗时过长，可能需要运维或后端去协助排查服务问题，一般问题集中在：
- 代理层或者网关问题
- kafka / MQ 队列消费是否堆积
- 入库和查询是否有性能问题
- 服务端业务处理逻辑，是否有同步任务阻塞问题。
- Content Download：这块通常是指请求响应下载耗时，如果这块耗时过高，需要检查用户网络是否存在问题，或者优化我们的响应数据内容（gzip，精简请求体内容）
如何优化 Queuening 和 Stalled 阶段：
- dns prefetch 预解析 DNS
- 使用 HTTP/2，避免 HTTP/1.1 队头阻塞问题
- preload 预加载重要资源
- 减少请求数量，避免请求池被阻塞
TTFB 等待优化
- 缓存
- CDN
- 负载均衡
- 数据库索引加速查找
Content Download 优化：
- gzip 资源压缩
- 分块传输
- 减少响应体大小
TTFB 代表 startTime 到 responseStart 之间的时间
- 重定向时间 Redirect
- Service Worker 启动，拦截事件时间
- HTTP Cache 缓存读取
- DNS 重定向时间
- TCP 连接和 TLS 建立时间
- Request 开始发送请求，直到 Reponse 第一个请求响应到达
| 指标 | 良好 | 一般 | 较差 |
|---|---|---|---|
| TTFB | ≤ 800 ms | 801–1800 ms | > 1800 ms |
LCP
Largest Content Paint
最大内容绘制，通常是首屏中最大的文本或图片元素完成渲染的时间。
| 指标 | 良好 | 一般 | 较差 |
|---|---|---|---|
| LCP | ≤ 2.5 s | 2.5–4.0 s | ≥ 4.0 s |
TTI
Time to Interactive
首次可交互时间，该指标占比已经不高
- 从 FCP 之后开始计算
- 静默窗口：5s 内无长任务阻塞，且没有 2 个以上正在运行的 get 请求
- 在静默窗口之前，最后一个长任务执行位置，即为 TTI 时间
- 若没有长任务，则 FCP 为 TTI 开始时间
| 指标 | 良好 | 一般 | 较差 |
|---|---|---|---|
| TTI | ≤ 3.8 s | 3.8–7.3 s | ≥ 7.3 s |
FCP
First Content Paint
首次内容绘制时间，即从用户首次导航到网页到网页任何一部分内容呈现在屏幕上的时间
内容 指：
- 文本
- 图片、背景图片
<svg>元素 和 非白色<canvans>元素
| 指标 | 良好 | 一般 | 较差 |
|---|---|---|---|
| FCP | ≤ 1.8 s | 1.8–3.0 s | ≥ 3.0 s |
INP
Interaction to Next Paint
下次绘制响应
测量单击、键盘和交互的整体响应能力
超过 500ms ，会导致明显的卡顿感知，可以通过缓存来优化
| 指标 | 良好 | 一般 | 较差 |
|---|---|---|---|
| INP | ≤ 200 ms | 200–500 ms | ≥ 500 ms |
CLS
Cumulative Layout Shift
累计偏移量
**计算公式：**位移影响的面积 * 位移距离。
| 指标 | 良好 | 一般 | 较差 |
|---|---|---|---|
| CLS | ≤ 100ms | 100ms–250ms | ≥ 250ms |
FID
First Input Delay
首次输入延迟
在 FCP 和 TTI 之间用户与页面交互的响应延迟
目前已逐步被 INP 取代
| 指标 | 良好 | 一般 | 较差 |
|---|---|---|---|
| FID | ≤ 100 ms | 100–300 ms | ≥ 300 ms |
TBT
Total Blocking Time
阻塞总时间
记录 TTI 和 FCP 之间的阻塞时间之和
| 指标 | 良好 | 一般 | 较差 |
|---|---|---|---|
| TBT | ≤ 200 ms | 200–600 ms | ≥ 600 ms |
FMP
First Meaningful Paint
首次有意义渲染帧
从页面加载开始到主要内容已经在首屏渲染的时间点
非标准化指标
参考内容
加载第一个字节所需时间（TTFB）｜Google Developers（web.dev for China）
使用许可：CC BY 4.0（含文中示意图）Web Vitals｜Google Developers（web.dev for China）
使用许可：CC BY 4.0
