前端 Web Vitals 长期趋势与告警策略（LCP/INP/CLS 聚合与阈值验证）

概述通过RUM采集与后端聚合，分析长期趋势与版本对比，设定阈值与异常检测告警，持续优化页面性能与交互。关键实践与参数采样与分段: 按设备、网络与版本分段聚合指标: 中位数与P75/P95阈值与告警: 阈值越界与突变检测可视化: 仪表盘与发布对比示例/配置/实现const metrics = { lcp: null, inp: [], cls: 0, ver: 'v2.1.0' } new PerformanceObserver((list) => { for (const e of list.getEntries()) metrics.lcp = e.startTime }).observe({ type: 'largest-contentful-paint', buffered: true }) new PerformanceObserver((list) => { for (const e of list.getEntries()) metrics.cls += e.value }).observe({ type: 'layout-shift', buffered: true }) window.addEventListener('click', () => { const t = performance.now(); setTimeout(() => { metrics.inp.push(performance.now() - t) }, 0) }) function flush() { navigator.sendBeacon('/rum', new Blob([JSON.stringify(metrics)], { type: 'application/json' })) } setInterval(flush, 10000) -- 后端聚合示例（PostgreSQL） -- 表: rum(page, ver, device, net, lcp_ms, inp_ms, cls, ts) SELECT ver, percentile_disc(0.5) WITHIN GROUP (ORDER BY lcp_ms) AS lcp_p50, percentile_disc(0.75) WITHIN GROUP (ORDER BY lcp_ms) AS lcp_p75, percentile_disc(0.95) WITHIN GROUP (ORDER BY lcp_ms) AS lcp_p95 FROM rum WHERE ts >= now() - interval '7 days' GROUP BY ver ORDER BY ver; 验证趋势可视化: 仪表盘展示不同版本的P75/P95趋势告警触发: 指标越界或突变后告警发送成功采样有效: 分段后不同设备与网络表现差异清晰成本控制: 采样比例与存储成本在阈值内注意事项采集需隐私合规与遮蔽敏感信息不同浏览器支持差异需适配指标波动需结合流量与发布事件分析定期回顾阈值与分段维度