Shopify 装了很多 App 变慢,先找出真正拖慢的那一个

App 装得多不一定慢,慢的是加载方式:同步阻塞的脚本、重复调用的接口,以及卸载后留在主题里的残代码。先量一遍,再决定删谁。

2026年7月31日6 分钟209 次阅读2 条评论
多个电商功能模块通过不同连接同时接入同一轻量化店铺主题的实体装置
已读 0%

App 装得多不一定慢,慢的是加载方式。有些脚本在主图上屏之前就同步跑起来,有些接口在首页被反复调用,还有些 App 卸载之后代码仍留在主题里。

先按加载顺序量一遍,再决定删哪个,比凭感觉卸载有效得多。

先把“安装数量”与“前台负担”分开

后台安装十个 App,并不代表每个都会在每个访客页面执行十段代码。有些 App 只处理订单、客服或库存同步,主要工作发生在后台;有些则会在全站插入悬浮组件、追踪脚本、弹窗、评论组件或推荐逻辑。后者即使只有两三个,也可能比一组后台工具更值得优先排查。

Shopify 允许 App 通过 App block、App embed 或直接修改主题代码接入。前两种方式通常能在主题编辑器中看到和控制;有些 App 仍会把代码直接写进主题。Shopify 对主题 App 扩展的建议之一,就是让脚本只在需要的页面加载,而不是把所有资源带到全站。Shopify 的主题 App 接入说明前台性能建议都把这一点作为重要边界。

因此,第一轮不要问“商店装了几个 App”,而要建立一张页面负担表:

- 观察对象:首页;要记录什么:首屏是否出现营销弹窗、聊天、订阅、追踪和第三方字体请求;优先级判断:不直接服务购买的全站脚本优先检查

- 观察对象:商品页;要记录什么:评论、尺码表、订阅、加购、推荐与支付提示是否同时加载;优先级判断:先保留真实影响购买决策的功能

- 观察对象:购物车;要记录什么:赠品、加价购、运费提示、倒计时和交叉销售是否重复计算;优先级判断:多个 App 操作同一购物车时风险更高

- 观察对象:页面之外;要记录什么:App 是否只在后台同步、履约或客服流程中使用;优先级判断:后台工具不应因为“数量多”被误删

这张表的价值是把“感觉很慢”变成可讨论的页面、功能和请求。某个 App 即使有价值,也可能只应出现在商品页;另一个 App 即使在首页露出,也可能因为弹窗和分析脚本重复而需要换实现方式。

主题为什么会被拖慢:四种常见路径

1. 首屏被不相关的脚本抢占

访客打开商品页时,浏览器不只下载主题本身,还可能同时加载聊天、热图、评论、推荐、弹窗、联盟追踪或社交组件。脚本越早执行,越可能和图片、样式、商品信息争夺网络和主线程。Shopify 的主题性能指南建议把基础购买功能尽量建立在 HTML 和 CSS 上,避免不必要的 JavaScript,并避免阻塞解析的脚本。主题性能最佳实践并不意味着“不能用脚本”,而是要求每段脚本说明它为什么必须在此时、此页出现。

2. 多个功能解决同一个问题

常见情形是一个 App 管订阅弹窗,另一个 App 管邮件收集,第三个 App 又在结账前显示同一类优惠提示;或者两个 App 都在改购物车抽屉、注入折扣说明和监听加购事件。访客只看到一个页面,底层却可能存在重复请求、重复事件和相互覆盖的样式。

这类问题不一定先表现为报错,更常见的是按钮点击后延迟、购物车状态偶发不同步、移动端弹层互相遮挡,或数据分析里出现重复事件。删除其中一个之前,先写清它们各自承担的业务动作和事件来源,避免为了加速而误删正在使用的营销链路。

3. 关闭或卸载后,主题仍保留旧接入

主题编辑器里关闭 App embed,和彻底确认主题不再引用该 App,并不是同一件事。直接改过主题代码的 App、历史定制或复制过的片段,可能仍留下 script、stylesheet、snippet 引用或无效的占位容器。这里不能假定任何 App 卸载后都会残留,也不能反过来假定一定会自动清理;应以当前主题代码、主题编辑器和真实页面请求为准。

排查时先复制一个未发布主题,记录变更前版本,再检查 `theme.liquid`、相关 section/snippet、App embed 状态和页面源代码。不要在正在销售的主题上边看边删,更不要把看不懂的 Liquid 片段全删掉。性能修复如果破坏了评论、订阅或加购,同样是线上故障。

4. 页面范围没有被控制

一个只在产品详情有意义的评价组件,若在首页、集合页、文章页和搜索页都初始化,就会让无关页面承担成本。App block 或 App embed 的价值不只是安装方便,还在于它可以被放在特定位置、按需要启用。若某个功能不能限制到业务真正发生的页面,就要重新评估它的实现方式和必要性。

用同一页面做前后对照,而不是只看一次分数

性能分数会受网络、缓存、设备和页面数据影响。更可靠的做法是选一个代表性商品页和一个代表性首页,在同一测试条件下建立基线,再逐项验证。Shopify 也建议对首页、产品页和集合页分别进行性能测试,而不是用一个页面代表全店。

可以按以下顺序做一次小范围实验:

- 记录当前主题版本、已启用的 App embed、商品页和首页的关键功能。

- 在未发布主题里只关闭一个明确不需要的全站功能,或把它改为仅在相关模板加载。

- 重新检查首屏、商品变体、加购、购物车、折扣、订阅和移动端弹层,而不是只看 Lighthouse 数字。

- 对照浏览器网络请求和分析事件,确认没有把必要的支付、同意、营销或客服事件误关。

- 保留变更记录:改了什么、影响哪些页面、谁确认、何时可以回滚。

如果关闭一个功能后分数略有变化,但购买路径出现异常,这不是成功。反过来,某个 App 在分数上有成本,却明显降低了客服解释或退货风险,也不一定该删。性能优化的目标是让访客更快完成理解和购买,不是让后台 App 数量变得好看。

哪些情况不该先删 App

当问题来自超大首屏图片、未压缩视频、主题重复渲染、复杂 Liquid 循环或广告落地页带来的大量第三方标签时,删几个 App 可能没有触及主因。Shopify 的主题指南同样强调图片尺寸、延迟加载、资源提示、Liquid 效率和 Theme Check;这些是主题本身也需要承担的部分。

另一个不该贸然删 App 的情形,是它承载了法规、订阅、评价、支付、国际化或订单履约中不可替代的能力。这时更有价值的问题是:能否限制加载范围、合并同类工具、把展示层改成主题原生模块,或用更清楚的集成方式替换,而不是让运营失去必要能力。

李李出海处理 Shopify 主题性能时,通常先做“页面功能—加载范围—业务必要性”对照,再决定动 App、主题还是资源。这样可以避免把速度问题简化为“装太多”,也能让每一次删改都有明确的购买路径验收。

本周只做三件事:列出首页、商品页和购物车的前台 App 功能;找出每个功能实际出现的页面;在未发布主题里关闭一个明确重复或无用的加载项并走完一次加购与结账前验证。主题变快之后,仍要确认访客得到的信息和运营需要的链路没有一起被删掉。

Article feedback

这篇文章对你有帮助吗?

你的反馈会帮助我持续改进内容

Discussion

评论

2 条已审核评论

3C卖家阿杰

店铺装了一堆 App 一直觉得慢,按文章先把不用的卸载再测,首屏速度明显好了一些。

运营喵

以前只盯着 App 数量,没想过真正拖速度的是脚本和第三方标签,这篇解释得比较清楚。

发表评论

评论审核通过后公开显示。

尊重隐私保护,无需填写邮箱