什么是 Web 性能指标
Web Vitals 是 Google 提出的一组以用户为中心的衡量指标，核心三项是 LCP（最大内容绘制，反映加载速度）、INP（交互到下一次绘制，反映响应速度）与 CLS（累计布局偏移，反映视觉稳定性）。三者分别对应「打开得快不快、点起来跟不跟手、页面抖不抖」，达标需要资源优化、代码拆分与减少主线程阻塞配合完成。
基本信息
| 核心指标 | LCP 加载、INP 交互响应、CLS 布局稳定 |
|---|---|
| 数据来源 | 真实用户监控（RUM）与实验室工具（Lighthouse 等） |
| 评估口径 | 用第 75 百分位判断，而非平均值 |
| 常见手段 | 关键资源优先级、资源压缩、代码拆分、预留布局尺寸 |
指标与优化方向
| 指标 | 含义 | 优化方向 |
|---|---|---|
| LCP | 主要内容渲染完成时间 | 关键资源优先级、图片压缩与格式、减少阻塞渲染资源 |
| INP | 交互到界面响应的时间 | 减少长任务、拆分代码、避免主线程同步计算 |
| CLS | 非预期布局偏移累计 | 预留图片与广告位尺寸、避免动态插入 |
| TTFB | 首字节时间 | 服务端渲染与缓存优化，影响整体加载起点 |
典型使用场景
- 上线前评估：用真实用户数据的第 75 百分位判断是否达标，而非单次本地跑分
- 体验优化立项：先定位是加载、交互还是布局问题，再决定优化方向
- 第三方脚本治理：限制外部脚本加载时机与数量，避免主线程被持续占用
- 移动端专项：弱网与低端机型上指标明显更差，需单独采集与优化
- 运营活动保障：大促前确认新增组件没有拖慢首屏
- 持续监控：把三项指标纳入监控看板，按周观察趋势
采集真实用户指标（示意）
采集真实用户指标（示意）
// 使用官方库采集 Web Vitals 并上报（示意）
import { onLCP, onINP, onCLS } from 'web-vitals';
function report(metric) {
// 只上报有意义的样本，避免请求量过大
navigator.sendBeacon('/rum', JSON.stringify({
name: metric.name, // LCP / INP / CLS
value: metric.value, // 指标值
rating: metric.rating, // good / needs-improvement / poor
id: metric.id // 可用于去重与关联
}));
}
onLCP(report); onINP(report); onCLS(report);实验室工具与真实用户数据要结合看：本地跑分好不代表真实用户体验达标，弱网与低端设备上的数据才有代表性。
第三方脚本不设限额会持续占用主线程：统计、客服、营销脚本叠加后，INP 往往比首屏加载更难达标。