Web Vitals 全链路优化：LCP 从 3.1s 降到 1.8s
这篇文章复盘一个 B 端系统的性能治理过程，重点在可落地的改造顺序与评估方法。
1. 背景与问题
业务上线后出现首屏慢、交互延迟高的问题。核心页面在移动网络下 LCP 长期高于 3 秒，影响投放转化和客户体验。
2. 方案拆解
- 接入 RUM 监控，按页面模板拆分指标。
- 将首屏图表改为延迟加载，优先渲染关键文本信息。
- 主图与字体资源设置 preload，减少关键阻塞。
- 对静态资源启用长缓存和 CDN 边缘压缩。
3. 实施细节
先从监控入手建立基线，再按“收益最大且改动最小”原则迭代。首周只改资源优先级和缓存策略，第二周再改渲染路径。
4. 结果数据
- LCP：3.1s → 1.8s
- INP：280ms → 165ms
- CLS：0.17 → 0.05
- 首屏可见时间提升约 41%
5. 可复用清单
建议先建立页面级性能看板，再按资源、渲染、网络三个层面优化，最后用 A/B 数据验证收益，避免盲目重构。