性能指标与 Core Web Vitals

性能指标与 Core Web Vitals

这篇笔记还在编辑中，内容可能会继续补充、调整或重写。

三个核心指标

  • LCP（Largest Contentful Paint）：页面主要内容何时完成可见渲染，反映加载体验。
  • INP（Interaction to Next Paint）：用户交互到下一次绘制之间的整体延迟，反映响应性。
  • CLS（Cumulative Layout Shift）：页面生命周期内非预期布局偏移的累积，反映视觉稳定性。

官方“良好”阈值为：

指标良好较差
LCP≤ 2.5 秒> 4 秒
INP≤ 200 毫秒> 500 毫秒
CLS≤ 0.1> 0.25

页面或站点通常按照真实访问的第 75 百分位判断。不能用平均值掩盖低端设备、慢网络或特定路由的长尾体验。

实验室数据与现场数据

Lighthouse 和浏览器 Performance 面板适合在受控环境复现瓶颈，但它们无法代表所有真实用户。CrUX 或自建 RUM 能观察真实设备、网络、缓存和交互分布，却需要处理采样、版本、隐私和数据质量。

两类数据应配合使用：

RUM 发现受影响路由与用户群
  → 实验室环境复现
  → Performance / Network 定位原因
  → 修改并进行回归测试
  → RUM 验证真实分布是否改善

诊断维度

至少按以下维度切分指标：

  • 页面或标准化路由
  • 发布版本
  • 移动端与桌面端
  • 网络类型和设备能力
  • 国家或区域
  • 新访问与缓存访问

同时记录关键业务成功率。指标变快但用户更难完成任务，并不是有效优化。

实践任务

  1. 让首屏图片缺少尺寸并延迟加载，观察 LCP 和 CLS。
  2. 在点击事件中执行一个长任务，观察 INP 和 Long Task。
  3. 修复问题后分别使用实验室工具和 RUM 验证。
  4. 为关键路由设置性能预算，并在 CI 中检测明显回退。

验收标准

  • 仪表盘使用第 75 百分位而非只看平均值
  • 能区分实验室测量和真实用户数据的用途
  • 指标包含路由、版本、设备和网络上下文
  • 优化前后使用相同条件比较
  • 性能告警能关联到用户影响和排查入口

参考资料