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

导语

很多团队做了 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（首字节时间）。

告警策略

不要一上来就设 LCP > 2.5s 就告警，那样会有大量噪音。建议分三层：P1（紧急）：连续 1 小时 LCP p75 > 4.0s，立即通知值班。P2（重要）：连续 24 小时 LCP p75 > 2.5s，次日站会复盘。P3（观察）：LCP p75 从 1.8s 涨到 2.3s，记录趋势但不告警。

结论

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