一、前端常用 8 大性能指标
- FP（First Paint）首次绘制
- 是什么：浏览器第一次在屏幕上画出像素（哪怕是背景色）。
- 衡量：页面从白屏 → 不再白屏的时间。
- 优化目标：越快越好。
- 影响因素：HTML 加载速度、TTFB、关键 CSS。
- FCP（First Contentful Paint）首次内容绘制
- 是什么：第一次渲染有内容（文本、图片、svg 等）。
- 比 FP 更有意义，因为 FP 可能只是个背景。
- 优化目标：＜1.8s 优秀，＜3s 可接受。
- 优化方向：
- 缩短 TTFB
- 内联关键 CSS
- 不阻塞渲染
- LCP（Largest Contentful Paint）最大内容绘制（WebVitals 核心）
- 是什么：视口中最大的那块内容渲染完成时间。
通常是：首屏大图、大标题、封面图。 - 最重要的加载体验指标。
- 目标：≤2.5s 优秀，2.5~4s 需优化，＞4s 差。
- 优化：
- 图片优化（WebP、压缩、宽高比）
- 预加载 LCP 图片
- 减少首屏 JS 阻塞
- TTFB（Time To First Byte）首字节时间
- 是什么：请求发出去 → 收到第一个字节的时间。
- 代表服务端响应速度 + 网络速度。
- 目标：＜600ms 优秀。
- 优化：
- CDN
- 服务端缓存
- 接口优化
- TBT（Total Blocking Time）总阻塞时间
- 是什么：主线程任务 >50ms 的阻塞时间总和。
- 例：一个 210ms 长任务 → 阻塞 160ms。
- 目标：＜200ms 优秀。
- 优化：
- 拆长任务
- 懒执行非关键 JS
- Web Worker
- FID（First Input Delay）首次输入延迟（老核心）
- 是什么：用户第一次点击 / 输入 → 浏览器开始处理事件的延迟。
- 衡量交互是否卡。
- 目标：≤100ms。
- INP（Interaction to Next Paint）新核心交互指标（必学）
- 是什么：全程所有交互的响应速度，取最差的那个。
- 点击 → 页面更新 的耗时。
- Google 2024 新核心 Web 指标，完全替代 FID。
- 目标：≤200ms 优秀。
- 影响：长任务、回流重绘、JS 执行太久。
- 优化：
- 拆长任务
- 防抖节流
- 减少同步布局
- CLS（Cumulative Layout Shift）累积布局偏移（核心）
- 是什么：页面加载过程中，元素突然乱跳的总和。
- 最影响用户体验的指标之一。
- 目标：≤0.1 优秀。
- 罪魁祸首：
- 图片没设宽高
- 字体闪烁
- 动态插入广告、弹窗
- 没给占位容器
二、八大指标
| 指标 | 全称 | 含义 | 优化目标 |
|---|---|---|---|
| FP | First Paint | 第一次像素 | 越快越好 |
| FCP | First Contentful Paint | 第一次内容 | < 1.8s |
| LCP | Largest Contentful Paint | 最大内容渲染 | ≤ 2.5s |
| TTFB | Time To First Byte | 服务端首字节 | < 600ms |
| TBT | Total Blocking Time | 主线程阻塞总时间 | < 200ms |
| FID | First Input Delay | 首次交互延迟 | ≤ 100ms |
| INP | Interaction to Next Paint | 全程交互体验 | ≤ 200ms |
| CLS | Cumulative Layout Shift | 布局偏移 | ≤ 0.1 |
三、关键：它们之间的顺序关系
加载顺序永远是：
- TTFB（服务器响应）
- FP（第一次画）
- FCP（第一次内容）
- LCP（最大内容出来）
- 然后用户交互：FID / INP
- 全程伴随：CLS（布局稳不稳定）
- 主线程：TBT（卡不卡）
分类
一、加载类指标
- FP（First Paint）首次绘制
浏览器第一次在屏幕绘制像素，标志页面不再白屏。 - FCP（First Contentful Paint）首次内容绘制
第一次渲染实际内容：文本、图片、SVG 等。
目标：＜1.8s 优秀。 - LCP（Largest Contentful Paint）最大内容绘制
视口中最大内容渲染时间，最重要加载指标。
目标：≤2.5s。
优化：图片优化、预加载、减少阻塞。 - TTFB（Time To First Byte）首字节时间
请求发起到收到第一个字节，代表服务端 + 网络速度。
目标：＜600ms。
二、主线程 & 交互类指标
- TBT（Total Blocking Time）总阻塞时间
所有长任务（>50ms）的阻塞时间总和。
目标：＜200ms。 - FID（First Input Delay）首次输入延迟
用户第一次交互到浏览器响应的时间。
目标：≤100ms。 - INP（Interaction to Next Paint）全程交互体验
2024 新核心指标，替代 FID。
统计所有交互，取最慢值。
目标：≤200ms。
三、视觉稳定性指标
- CLS（Cumulative Layout Shift）累积布局偏移
- 页面元素意外跳动的总分值。
- 目标：≤0.1。
- 常见原因：图片无宽高、动态插入内容、字体闪烁、无占位。
四、指标出现顺序
TTFB → FP → FCP → LCP → 交互（FID/INP）
全程：CLS、TBT