Shopify 店铺在手机上加载慢的原因与解决方法
如何衡量真实顾客在手机上的加载速度，Shopify 店铺常见的六个原因（应用、图片、视频、字体、弹窗与营销代码），以及建议的处理顺序。
更新于 2026年11月14日 · 5 min read
Shopify 店铺在手机上加载慢，原因通常只有几个：应用添加的脚本、尺寸超出屏幕的图片、尚未被点击就开始加载的视频、网页字体、过早加载的弹窗，以及各自携带代码的营销代码。每一项都可以检查。建议先衡量真实顾客的加载速度，再从影响最大的一项开始处理。
先衡量真实访问
用自己的手机在办公室 Wi-Fi 下打开店铺，参考价值有限。以下两类数据更有用：
- 真实访问数据。 Zalify Analytics 的页面速度报告基于顾客的实际访问，按页面统计。页面流量足够时，Google 的 PageSpeed Insights 也会显示真实访问数据。
- 用于定位原因的实验室测试。 PageSpeed Insights 同时列出拖慢页面的因素。它适合用来查找原因，不适合用来评判结果。
目标值如下，均要求至少 75% 的访问达标：
| 指标 | 衡量内容 | 合格标准 |
|---|---|---|
| LCP | 主要内容何时呈现 | 不超过 2.5 秒 |
| INP | 点击后页面响应的速度 | 不超过 200 毫秒 |
| CLS | 加载过程中页面跳动的程度 | 不超过 0.1 |
建议先检查商品页与商品系列页，再检查首页，因为多数广告点击落在这两类页面上。
1. 移除不再使用的脚本
每个向店铺页面添加脚本的应用，都会增加每个页面的耗时。请逐一检查已安装的应用，移除不再使用的；随后检查主题中是否留有已卸载应用的代码，应用卸载后其脚本并不总会随之移除。
2. 按屏幕尺寸准备图片
页面顶部最大的那张图片通常决定 LCP。请按实际显示尺寸上传，由主题向手机提供较小的版本，首张图片不要设为延迟加载，其余图片设为延迟加载。
3. 视频在需要时再加载
首屏自动播放的视频，会在顾客看到标题之前下载数兆字节的数据。建议先显示封面图，待视频滚动进入视野或被点击时再加载。
4. 控制网页字体数量
两个字体文件通常已经足够。每增加一种字重就多一次下载，等待字体的文字也会拖慢整个页面。
5. 推迟弹窗与在线聊天
随页面一同加载的弹窗或聊天组件，会与页面内容争抢资源。建议在页面可用之后再加载。在 Zalify Popups 中可以设定弹窗的展示时机，例如停留一段时间后或滚动时展示。
6. 清点营销代码
每个广告平台的浏览器代码都是一段额外的脚本。像 Zalify Pixel 这样从服务端回传购买事件，即使浏览器端只保留必要的代码，各平台仍能收到每一笔订单。
当主题本身成为瓶颈
如果完成以上六项后页面仍然较慢，原因可能在主题本身。Zalify Theme 以加载速度为设计目标；当所需的速度取决于架构时，可以选择 headless 店铺。这两类项目均可由我们的店铺搭建团队完成。
今天就可以完成的检查
- 查看销量最高的商品页在真实访问中的 LCP、INP 与 CLS。
- 移除不用的应用及其遗留代码。
- 调整首张图片的尺寸，并取消其延迟加载。
- 将首屏自动播放的视频替换为封面图。
- 推迟弹窗与在线聊天的加载。
- 一周后依据真实访问数据再次衡量。
参考资料
- Web Vitals，web.dev
- Largest Contentful Paint，web.dev
- Interaction to Next Paint，web.dev
常见问题
Shopify 店铺在手机上的加载速度多少算合格？
通常以 Google 的标准为目标：主要内容在 2.5 秒内呈现（LCP），点击后 200 毫秒内响应（INP），页面几乎不发生跳动（CLS 不超过 0.1），且至少 75% 的访问达到上述标准。
为什么店铺在电脑上很快，在手机上却很慢？
手机的处理器较慢，网络往往也较慢，同样的脚本需要数倍的时间才能运行完毕。建议使用中端手机在移动网络下测试，或直接查看真实访问的数据，而不是以自己的设备为准。
Shopify 应用会拖慢店铺吗？
很多应用会。每个向店铺页面添加脚本的应用，都会增加每个页面的下载与运行时间，包括应用并不起作用的页面。已卸载应用遗留的脚本是常见原因。
应该以 Shopify 的速度评分为准吗？
它可以作为参考，但属于实验室估算。更重要的是按页面统计的真实访问数据，这既是 Google 采用的数据，也是顾客的实际感受。
店铺变快之后，转化率会提高吗？
通常会，在手机端商品页上最为明显，因为顾客往往在页面可用之前就已离开。提升幅度取决于原先有多慢。建议对比优化前后的加购率，而不是依赖经验数字。