性能优化 SOP 示例：商品详情页性能治理

本 SOP 记录一次真实的商品详情页性能优化过程，供后续类似项目参考。

一、问题发现

• 发现时间：2026-01-15
• 发现方式：Lighthouse CI 在 PR 阶段告警
• 问题描述：商品详情页 LCP 从 2.1s 退化到 3.8s
• 影响范围：全部商品详情页

二、问题定位

2.1 数据采集

指标	优化前基线	退化后
LCP	2.1s	3.8s
首屏图片大小	180KB	850KB
首屏请求数	28	45

2.2 根因分析

1. 运营上传了未压缩的商品主图（单张 2.1MB）。
2. 新上线 A/B 测试 SDK 阻塞了主线程。
3. 推荐模块在首屏同步加载，增加了 6 个请求。

三、优化方案

问题	优化措施	负责人
图片过大	CDN 自动转码 AVIF/WebP，限制上传原图大小	张三
A/B SDK 阻塞	延迟到 requestIdleCallback 加载	李四
推荐模块同步加载	改为 Intersection Observer 懒加载	王五

四、优化实施

4.1 图片处理

• 在 CDN 增加 AVIF 自动转码规则。
• 上传系统限制商品图原图不超过 2MB，自动压缩至 500KB 以下。

4.2 SDK 延迟加载

requestIdleCallback(() => {
  loadABTestSDK();
});

4.3 推荐模块懒加载

const Recommendations = lazy(() => import('./Recommendations'));

function ProductPage() {
  return (
    <InView triggerOnce>
      {({ ref, inView }) => (
        <div ref={ref}>
          {inView && <Recommendations />}
        </div>
      )}
    </InView>
  );
}

五、效果验证

指标	优化前	优化后
LCP	3.8s	2.0s
首屏图片大小	850KB	200KB
首屏请求数	45	29
转化率	3.5%	3.9%

六、复盘与沉淀

1. 图片规范：建立商品图上传和压缩规范，纳入 CI 检查。
2. 第三方脚本治理：所有第三方脚本需评估对首屏的影响，默认延迟加载。
3. 性能预算：首屏图片 < 500KB，首屏请求 < 30 个。
4. 监控告警：LCP > 2.5s 自动触发告警。

七、相关链接

• 原始 PR：#1234
• Lighthouse 报告：[链接]
• 性能预算配置：[链接]

---

记录人：张三
记录时间：2026-02-01
最后更新：2026-06-24