提高在线商店性能

有多个因素会影响您的在线商店性能,您可以控制其中一些因素。

若要了解您的在线商店今天的业绩,请查看您的 Web 性能 报告。

您无法控制的因素

这些因素可能会影响商店的性能,但您无法通过对 Shopify 商店进行任何设置或调整来控制这些因素。这包括客户的因素,例如他们的设备或 Internet 速度,以及 Shopify 的因素,例如 Shopify 基础设施更新。

客户的设备、网络和地点

访问您商店的客户遍布全球各地,并且其设备和 Internet 连接各不相同。这意味着商店的加载速度可能因这些因素而加快或减慢。

如果客户因您商店的速度问题与您联系,请让您的客户检查他们是否使用的是最新版本的浏览器、最近是否清除了缓存,以及他们的互联网服务提供商是否没有遇到任何服务中断或性能下降的问题。

Shopify 基础设施

Shopify 在快速全球服务器上托管在线商店,并且不限制商店的带宽。您可以在 Shopify 状态中查看 Shopify 商店的状态。

Shopify 不断改进其代码和基础设施。其中一些改进可能会反映在您的性能指标中。

以下是一些会影响在线商店速度的功能。

内容分发网络 (CDN)

CDN 代表内容分发网络。CDN 会存储您的图片和其他文件,例如 Shopify 后台的内容 > 文件页面中的内容。Shopify 在 CDN 中通过 Cloudflare 为商家提供世界一流的 CDN 运行,确保您的在线商店在全球范围内都可快速加载。您可以在 Cloudflare 状态页面上查看 CDN 状态。

本地浏览器缓存

您的商店会在客户的本地存储中暂时缓存或保存一些元素。当客户下次访问您的在线商店时,浏览器可以从缓存中加载资源,而不必向服务器发送其他请求。

Shopify 将商店中可缓存资源的浏览器缓存设置为每个文件一年。可缓存的文件包括图片文件、PDF、JS 文件和 CSS 文件。

服务器端页面缓存

除了本地浏览器缓存外,Shopify 还在服务器端缓存页面。第一次加载页面时,可能速度较慢,但以后页面加载速度会加快,因为客户将接收缓存的副本。

content_for_header Liquid 对象中的资产

`` Liquid 对象可注入多种在线商店功能所使用的资产,包括性能分析功能和动态结账按钮等可选功能。加载此对象和相关资产会影响商店的速度。Shopify 正在优化该标签及其资产,以便加快速度。

您可以控制的因素

下面列出了一些可能影响在线商店性能的因素,以及您可以如何处理这些因素。

应用

当您添加应用以更改在线商店的功能或外观时,这些应用会在模板中添加代码,这样它们才能运行。可以删除某些代码或将其重新排序,以提高在线商店的性能。您可以删除没有使用的应用。

如果您认为某个应用正在减慢您商店的速度,请执行以下步骤:

  • 停用您不使用的应用功能,或删除不需要的应用。考虑在线商店功能与速度之间的平衡
  • 如果您要删除应用,请考虑删除在应用安装过程中添加的代码。大多数应用会自动为您删除其代码,但您可以联系该应用的开发人员以确保代码被删除。某些应用会通过将其代码包装在提及应用名称的 {% comment %} 标记中来帮助您完成此过程。删除未使用的应用代码是一种最佳做法,可避免运行未使用的功能的代码,并使您的模板代码更易于阅读。
  • 请咨询您的应用开发者。

模板

模板由 Liquid、HTML、CSS 和 JavaScript 代码组成。编辑或自定义模板时,文件大小可能会增大,并影响 Web 性能。

如果您认为模板中的某些内容正在减慢商店的速度,请执行以下步骤:

模板或应用功能

某些功能(激活后)也可能也会影响商店性能。例如,当产品系列页面加载时,某些快速视图弹出窗口会预加载每个产品页面中的信息。加载客户不使用的额外数据可能会影响加载速度而不会增加价值。

如果您认为某项功能正在减慢您商店的速度,可以执行以下步骤:

复杂或效率低下的 Liquid 代码

您可以编辑用于呈现商店的几乎所有 Liquid。编写 Liquid 代码的方法可能非常高效,也可能效率低下。重复执行复杂操作可能会增加 Liquid 呈现时间,从而影响整体Web 性能。

例如,如果您想按价格对产品系列中的产品排序,则应在循环遍历产品系列中的产品前完成此操作,而不应将其添加到循环代码中。这是因为产品的排序不会因为单独的产品而更改,而计算产品顺序会增加请求处理时间。

如果您担心您的代码未经过优化,则可执行以下步骤:

图片和视频

过大的图片和视图中隐藏的图片可能会对加载页面中其他更重要的部分造成干扰。如果用户必须等待加载大型图片,他们可能会认为您的商店速度缓慢。

Shopify 添加了一些安全措施,用于防止您的在线商店出现图片或视频过载。例如:

  • 产品系列页面上的产品不可超过 50 件,或主页上的分区不可超过 25个。
  • 许多模板会延迟加载屏幕上当前未显示的图片。
  • 许多模板还根据所用屏幕尺寸加载特定大小的图片。

但是,这些安全措施无法完全阻止图片或视频对在线商店的性能造成影响。

如果您认为图片正在减慢您商店的速度,请执行以下步骤:

  • 查看图片优化指南
  • 将配图幻灯片保持为 2-3 张幻灯片,或使用一张配图。
  • 请咨询您的模板开发者,获取有关在其模板中使用图片的最佳方式的建议。

字体

对于在线商店中的文本,您可以从多种字体中进行选择。但是,如果您使用的是客户的计算机上尚未存在的字体,则必须先下载该字体,然后才能显示文本。这会影响加载您的商店所需的时间。

为了避免在客户的计算机上下载新字体,您可以使用系统字体。系统字体是一种在大多数计算机上已安装的字体。

您可以选择等宽、衬线或无衬线字体系列。当您使用这些字体系列中的任何一种时,您仍可以使用字体样式,例如粗体或斜体。

客户的计算机上显示的字体取决于其操作系统。以下是选择系统字体系列时可能用于呈现文本的一些字体示例:

  • 等宽:Menlo、Consolas、Monaco、Liberation Mono 或 Lucida Console
  • 无衬线:BlinkMacSystemFont、Segoe UI、Roboto、Ubuntu 或 Helvetica Neue
  • 衬线:Iowan Old Style、Apple Garamond、Baskerville、Times New Roman、Droid Serif、Times 或 Source Serif Pro

故障排除工具

您可以使用以下工具来调查在线商店的性能。

如果您是开发人员,您可以使用 Shopify 工具和最佳做法来进一步优化您的模板的性能。在 Shopify.dev 了解更多信息。

PageSpeed Insights

Shopify 的 Web 性能控制面板报告使用 Core Web Vitals 来衡量您在线商店中的真实用户体验。您可以使用 Google PageSpeed Insights 运行自己的报告,以查看更详细的商店页面指标。

适用于 Chrome 的 Shopify 模板检查器

适用于 Chrome 的 Shopify 模板检查器是一个使用火焰图来显示 Liquid 渲染性能的分析工具。此工具可帮助您识别哪些代码行减慢了在线商店页面的速度。了解如何使用 Shopify 模板检查器。

获取在线商店性能方面的支持

如果您使用 Shopify 提供的免费模板,则 Shopify 支持团队也许能够帮助您进行基本的性能改进。

如果您使用第三方模板并需要帮助,则必须联系模板开发者或聘请 Shopify 合作伙伴。详细了解如何聘请 Shopify 合作伙伴

如果您有开发团队或代理合作伙伴,您还可以联系他们获取更多帮助。

准备好开始使用 Shopify 进行销售了吗?

免费试用