跳到主要内容
Shopify 速度指南

Shopify 应用会拖慢您的独立站吗?

会,很多应用都会。每个在店面上显示的应用(评价、聊天、弹窗、追加销售、追踪像素)都会在每个页面加入脚本,与商品图片争抢加载。只在 Shopify 后台工作的应用则没有影响。解决办法很少是删除能带来销售的应用,而是找出最重的那些,并调整它们的加载顺序。

  • 7 天免费试用
  • 无需代码
  • 随时取消

为什么应用会拖慢 Shopify 独立站

店面应用通过应用嵌入、应用区块或粘贴进主题的脚本,把代码加入您的主题。每位顾客的手机都要下载、读取并运行这些代码,而用的正是绘制商品页面的同一个处理器。大多数 Shopify 店铺运行着 7 到 13 个应用,负担很快就累积起来。

增加负担

顾客在店面上看得到的应用

  • 评价和星级
  • 在线聊天和客服气泡
  • 弹窗和邮件订阅表单
  • 追加销售、组合套装和推荐
  • 追踪像素和热力图
  • 页面搭建工具和主题扩展

没有影响

只在后台工作的应用

  • 库存管理和同步
  • 记账和发票
  • 物流面单和履约
  • 订单管理和报表

它们在 Shopify 后台运行,顾客永远不会下载它们。

应用代码对 Core Web Vitals 的影响

  • LCP Largest Contentful Paint

    良好:2.5 秒或更短

    屏幕上最大的元素(通常是商品图片)出现的时间。在图片之前下载并运行的脚本会把它往后推。

  • INP Interaction to Next Paint

    良好:200 毫秒或更短

    页面响应点击的速度,比如选择尺码或加入购物车。忙于运行应用代码的手机会响应迟缓。

  • CLS Cumulative Layout Shift

    良好:0.1 或更低

    页面在加载时跳动的程度。迟到的评价星级、横幅和小组件会把顾客正在看的内容挤开。

以上为 Google 的标准,按 Chrome 用户体验报告(CrUX)中真实访问的第 75 百分位衡量,也就是 PageSpeed Insights 和 Search Console 显示的数据。

哪些 Shopify 应用最拖慢速度

关键不在于应用的数量,而在于每个应用在页面上做了什么。以下几类通常最耗加载时间。

  • 评价应用

    每张商品卡片上的星级,加上带图片的评价列表。很多评价应用会在每个页面加载完整的脚本和样式,即使页面上没有评价。

  • 在线聊天和客服

    聊天气泡通常在任何人打开之前就加载了整个聊天程序。它往往是店铺中最大的脚本之一,而在最初几秒几乎用不到。

  • 弹窗和邮件收集

    它们在每个页面加载,以决定是否弹出,往往还带着自己的字体和图片。弹窗本身也许几秒后才出现,但代码早已在运行。

  • 追加销售和商品推荐

    购买按钮附近的小组件会在页面加载后获取商品并绘制自己,可能在顾客要点击时挪动价格和按钮。

  • 追踪像素和数据分析

    广告像素、数据分析、热力图和会话录制工具都会在每个页面运行一段脚本。顾客根本看不到它们,所以没有理由让它们先于商品加载。

  • 页面搭建工具和主题插件

    用页面搭建应用制作的版块可能自带一套代码库和样式表。小功能(货币切换、尺码表、信任徽章、心愿单)单个都很轻,但加起来就不轻了。

如何找出拖慢店铺的应用

以下方法全部免费,在删除代码之前都不需要开发人员。

  1. 用 PageSpeed Insights 测试商品页

    商品页上的应用最多,所以请测试商品页,而不只是首页。先看顶部的真实访问数据,再展开“减少未使用的 JavaScript”和“减少第三方代码的影响”:两者都按域名列出脚本,大多数应用从域名就能认出来。

  2. 在“网络”面板中按域名排序

    在 Chrome 中打开商品页的开发者工具,选择“网络”,勾选“停用缓存”后刷新。按大小或域名排序:凡是不来自您店铺或 Shopify 的,几乎都是应用或像素代码。

  3. 用“覆盖率”查看未使用的代码

    在开发者工具的命令菜单中打开“覆盖率”面板并刷新。它会显示每个脚本中有多少从未被页面用到。在没有评价的页面上完整加载的评价脚本,就是很容易处理的一项。

  4. 打开主题的应用嵌入

    在 Shopify 后台进入“在线商店”、“模板”、“自定义”,再打开“应用嵌入”。每个已开启的嵌入都会在每个页面加载。把不再使用的应用的嵌入关掉。

  5. 查找旧应用留下的代码

    基于 Shopify 主题应用扩展的应用会随卸载一起移除。较老的、直接修改过主题文件的应用可能会留下代码片段和脚本标签,卸载后仍在加载。在主题代码中搜索该应用的名称,删除任何内容前,请先咨询应用开发者或您自己的开发人员。

  6. 一次只改一处,然后重新测试

    复制您的主题,在副本中关闭一个应用嵌入,再用 Lighthouse 对比预览。每项测试多跑几次:实验室分数每次都会波动,而真实访问数据大约需要 28 天才会跟上。

删除应用,还是保留?

删除应用是常见建议,对不用的应用来说没错。但大多数店面应用之所以存在,是因为它们能带来收益。删掉一个能促成销售的应用,只是把速度问题换成了销售问题。

以下情况可删除

  • 您已不再使用,或是忘了删的测试应用
  • 两个应用做同一件事(两个评价应用、两个弹窗工具)
  • 它在每个页面加载,却只在一个页面有用
  • 没人说得清它带来了什么

以下情况应保留

  • 评价给顾客下单的信心
  • 弹窗扩大您日后营销用的邮件列表
  • 聊天解答阻碍成交的问题
  • 追加销售提高客单价,像素为广告提供数据

对于保留下来的应用,代价主要在于它们何时加载,而不是是否加载。一个最初几秒没人打开的聊天气泡,没必要抢在商品图片之前出现。

Shopify 应用速度检查清单

  • 在“设置”、“应用和销售渠道”中列出所有应用,并标出哪些在店面运行,哪些只在后台。
  • 卸载不再使用的应用,再检查主题中是否留有它们的代码。
  • 关闭不需要的主题应用嵌入。
  • 每项功能只用一个应用:一个评价应用、一个弹窗工具、一个聊天工具。
  • 如果应用支持,只在需要它的页面显示。
  • 在手机上测试商品页和集合页,而不只是首页。
  • 以真实访问数据为准(PageSpeed Insights 或 Search Console 的 Core Web Vitals 报告),而不是单次实验室分数。
  • 每安装一个新应用,都重新测试一次。
  • 让顾客看得到的内容先加载,其余的随后再加载。

Whoosh 如何帮忙:保留所有应用,只改顺序

Whoosh 是一款 Shopify 应用,替您完成清单的最后一项。无需代码,无需修改主题,也不会触碰结账和账户页面。每家店铺都从 50/50 测试开始,一半顾客使用 Whoosh,一半不使用,让您从自己的数据中看到变化。

  • Smart App Loading

    保留每个应用,只改加载顺序

    优先加载顾客看得到的应用,让聊天、追踪、评价工具和弹窗等到商品图片出现后再加载。它们仍然都会加载。

    了解 Smart App Loading

  • AI Page Preloading

    在点击之前,下一页已准备好

    预测顾客接下来可能打开的页面并在后台加载,让浏览店铺的感觉即点即开。

    了解 AI Page Preloading

  • 免费速度检测

    看看您的店铺表现如何

    在做任何改动之前,先为您的店铺做一次免费速度检测,留下可以对比的基准。

    开始免费检测

  • 对比

    Whoosh 与其他提速应用对比

    Whoosh 与修改主题、生成关键 CSS 或压缩图片的 Shopify 提速应用有何不同。

    查看对比

如何确认它有效

在您自己的店铺,用您自己的顾客来衡量。每家店铺在最初几周(大约一个月)都会先进行 50/50 测试:一半顾客使用 Whoosh,另一半不使用。结果明确后,测试转为 90/10,保留 10% 的顾客作为对照组,让提升效果持续得到衡量。

您的数据面板会对比各组的转化率和营收。两者的差额就是 Whoosh 挽回的营收。

我们如何衡量提升效果 阅读客户案例

最初几周

结果明确后

超过 15%

平均转化率提升

12%

页面加载平均提速

数据来自 Whoosh 客户店铺中的这些测试。

Smart App Loading:每月 99 美元

先免费试用 7 天,通过 Shopify 账单结算,可随时在 Shopify 中取消。还想要 AI Page Preloading?Whoosh Max 包含两者,每月 149 美元。

常见问题 贴心支持

Shopify 应用与速度常见问题

Shopify 应用会拖慢我的店铺吗?

很多会。在店面上显示内容的应用(评价、聊天、弹窗、追加销售、追踪像素)会在每个页面加入脚本,这些脚本在顾客的手机上与商品图片争抢资源。只在 Shopify 后台工作的应用(比如库存或记账应用)不会给店面增加任何负担。

Shopify 店铺装多少个应用算太多?

没有一个安全的数字。大多数 Shopify 店铺运行着 7 到 13 个应用,而一个很重的聊天或评价应用,可能比好几个轻量应用加起来还拖慢速度。关键在于每个应用在店面加载了什么、在哪些页面加载、什么时候加载。

如何找出拖慢 Shopify 店铺的是哪个应用?

用 PageSpeed Insights 测试一个商品页,展开“减少未使用的 JavaScript”和“减少第三方代码的影响”,它们会按域名列出脚本。再用 Chrome 开发者工具的“网络”和“覆盖率”面板查看,并检查主题编辑器中的应用嵌入。已卸载应用在主题中留下的代码也是常见原因。

卸载 Shopify 应用会让店铺变快吗?

如果该应用在店面加载,通常会。基于 Shopify 主题应用扩展的应用会随卸载一起移除。较老的、修改过主题文件的应用可能会留下仍在加载的代码,所以卸载后请在主题中搜索该应用的名称。

要提速 Shopify 店铺,应该删除应用吗?

不再使用的应用可以删。能带来收入的应用要三思:评价、弹窗、聊天和追加销售之所以存在,往往是因为它们能促成销售。删掉它们只是用一种损失换另一种。调整它们的加载时机,既保留它们带来的收入,又让顾客先看到商品。

应用会影响我的 Core Web Vitals 和 SEO 吗?

会的。在商品图片之前运行的应用脚本会推迟 Largest Contentful Paint,顾客点击时仍在忙碌的脚本会拖慢 Interaction to Next Paint,迟到的小组件会造成布局偏移。Google 基于 Chrome 的真实访问数据、按第 75 百分位衡量这三项,并将其作为页面体验的一部分。

Whoosh 会删除或修改我的应用吗?

不会。Whoosh 保留您所有的应用。Smart App Loading 只改变每个应用的加载时机,不改变它的功能,无需代码,也不修改主题。它不会触碰结账和账户页面。

还有疑问?

答案就在我们的帮助中心(英文)。

访问帮助中心

免费检测

两项免费检测,只需一个网址。

店铺网址只需输入一次,两项检测会在您继续浏览时同步进行。

  • Whoosh 营收检测 页面提速能带来多少收益
  • 速度检测 评分、拖慢速度的应用、Core Web Vitals

免费,无需安装。

免费检测

正在启动营收检测

正在启动速度检测

正在检测

  • 营收检测 进行中
  • 速度检测 进行中,最多 3 分钟

您可以继续浏览,两项都完成后会在这里通知您。

您的免费检测已完成 您的检测已完成