性能监控体系搭建：从指标到告警

导语

很多团队做了 Lighthouse CI，就觉得性能监控到位了。但实际上 Lighthouse 是”实验室数据”，你还需要真实用户监控（RUM）和告警闭环。本文从零搭建一套可落地的前端性能监控体系。

三层监控体系

1. 实验室监控：Lighthouse CI / WebPageTest。每次 PR 自动跑，防止性能回退。
2. 真实用户监控（RUM）：用 PerformanceObserver 采集真实用户的 Core Web Vitals，上报到后端。
3. 告警与响应：基于 RUM 数据设置阈值告警，自动创建工单或触发回滚。

指标选择：不要贪多

Core Web Vitals 已经帮我们选好了：

• LCP（最大内容绘制）：衡量加载速度，阈值 2.5s。
• INP（交互响应）：衡量交互延迟，阈值 200ms。
• CLS（布局偏移）：衡量视觉稳定性，阈值 0.1。

再加两个前端专属指标就够了：

• FCP：首次内容绘制，判断白屏时间。
• TTFB：首字节时间，判断后端/ CDN 性能。

RUM 实现方案

// 最小化 RUM 上报
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    navigator.sendBeacon('/api/rum', JSON.stringify({
      name: entry.name,
      value: entry.value,
      rating: entry.rating || 'good',
      connection: navigator.connection?.effectiveType,
    }));
  }
});
observer.observe({ type: 'web-vital', buffered: true });

告警策略

不要一上来就设”LCP > 2.5s 就告警”，那样会有大量噪音。建议分三层：

• P1（紧急）：连续 1 小时 LCP p75 > 4.0s，立即通知值班。
• P2（重要）：连续 24 小时 LCP p75 > 2.5s，次日站会复盘。
• P3（观察）：LCP p75 从 1.8s 涨到 2.3s，记录趋势但不告警。

工具选型

• 自建 RUM：适合已有监控基础设施的团队，成本低但维护成本高。
• Calibre / SpeedCurve：开箱即用的商业方案，适合不想自己搭的团队。
• Vercel Analytics：Next.js 项目零配置接入，适合 Vercel 部署的项目。

结论

性能监控不是”跑一次 Lighthouse 就完了”。完整的体系是：实验室数据防回退 + RUM 真实数据看趋势 + 分级告警促响应。指标控制在 5 个以内，告警分三级，避免噪音疲劳。