性能问题排查案例

排查 Add to Cart 延迟的根源

1. 🔍 先定位延迟类型

打开浏览器开发者工具（F12）→ Network 标签，点击"加入购物车"按钮，观察：

请求发送到 /cart/add.js 的响应时间是多少？ 是请求本身慢（后端问题），还是请求很快但页面响应慢（前端/JS 问题）？

2. 🛒 常见原因排查

前端/主题层面：

主题 JS 冲突：多个 App 注入了 cart 相关脚本，互相等待 Cart drawer 渲染慢：加入购物车后触发了复杂的 DOM 更新或动画 第三方 App 脚本阻塞：如推荐、评价、捆绑销售类 App 监听了 cart 事件 App 层面：

检查已安装的 App 是否有 cart hook / cart transform（如 Bundle、Upsell 类 App） 在 Shopify Admin → Settings → Custom data → Cart transforms 查看是否有激活的 cart transform 网络/服务器层面：

测试不同地区的响应时间（AU 用户访问 au.ecoflow.com 是否有 CDN 覆盖？） 检查 Shopify Status Page 是否有区域性故障

3. 🧪 快速验证方法

禁用 App 脚本测试： 在主题编辑器中临时切换到 Shopify 默认主题（Dawn），测试同一产品的加入购物车速度，如果明显变快 → 问题在当前主题或 App 脚本。

逐一禁用 App： 在 App 管理页面逐一暂停可疑 App，每次测试 ATC 速度，定位具体是哪个 App 造成的。

4. 📊 量化延迟

用 Chrome DevTools 的 Performance 录制，点击 ATC 按钮，查看：

Long Tasks（超过 50ms 的任务） 哪个脚本占用了主线程时间

---

下面我给你一份 “网页性能优化指标 + DevTools Performance + Lighthouse + PageSpeed Insights” 的体系化介绍。
你可以把它当成 测试 / 前端 / 性能评估的速读指南 ✅

---