435 字
2 分钟
07 · 性能指标
没有度量就没有优化
“感觉有点慢”无法指导优化。Core Web Vitals 把体验拆成可量化指标，达标才算好。
关键指标
| 指标 | 衡量 | 好的阈值 |
|---|---|---|
| TTFB | 服务器响应首个字节耗时 | < 800ms |
| FCP | 首次绘制任意内容 | < 1.8s |
| LCP | 最大内容（如大图/标题）绘制完成 | < 2.5s |
| CLS | 布局稳定性（视觉跳动） | < 0.1 |
| INP | 交互响应延迟（替代 FID） | < 200ms |
- LCP 关注”用户看到主要内容多快”——常受大图、阻塞渲染的 JS 影响。
- CLS 关注”页面稳不稳”——图片无宽高、字体闪烁、插入内容都会导致跳动。
- INP 关注”点了有没有反应”——长任务占主线程是主因。
采集方式
- Lighthouse：实验室数据，本地跑分、查瓶颈（DevTools 自带）。
- web-vitals 库：采集真实用户（RUM） 数据，反映真实环境。
- CrUX / 监控平台：聚合全量用户的字段数据，看长期趋势。
实验室数据（Lighthouse）找问题，真实字段数据（RUM）验效果。两者结合。
指标驱动优化
- LCP 差 → 优化首屏大图（压缩/优先加载/预加载）、削减阻塞 JS。
- CLS 差 → 给图片/广告位预留尺寸、
font-display: swap减少字体跳动。 - INP 差 → 拆分长任务、用 Web Worker 移出主线程（下篇）。
小结
- 核心指标：LCP（加载）、CLS（稳定）、INP（交互）。
- 阈值：LCP<2.5s、CLS<0.1、INP<200ms。
- Lighthouse 找瓶颈，RUM 验真实效果。
- 先测指标，再针对性优化，避免盲调。
练习
- 用 Lighthouse 给你的页面跑分，记录 LCP/CLS/INP，找出最差的一项。
- 故意去掉一张大图的宽高属性，观察 CLS 变差；补回后恢复。
- 在页面接入
web-vitals库，打印真实用户的 LCP 值。