性能指标笔记

网络指标 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 并发限制引起的队头阻塞
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