您无法控制的因素

客户的设备、网络和地点

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

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

Shopify 基础设施

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

Shopify 不断改进其代码和基础结构。其中一些改进可能会反映在您的速度评分中。

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

内容分发网络 (CDN)

CDN 代表内容分发网络。Shopify 通过 Fastly 为商家提供世界一流的 CDN 运行,确保您的在线商店在全球范围内都可快速加载。您可以在 Fastly 状态页面上查看 CDN 状态。

本地浏览器缓存

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

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

服务器端页面缓存

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

content_for_header Liquid 标签中的资产

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

您可以控制的因素

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

拓展业务:如果您不熟悉以下任何步骤,则可以聘请 Shopify 专家来帮助您。

应用

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

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

  • 禁用您不使用的应用功能,或删除不需要的应用。考虑在线商店功能与速度之间的平衡。

  • 如果您要删除某应用,请考虑删除在该应用安装过程中添加的代码。某些应用通过将代码包装在提及应用名称的 {% comment %} 标签中来帮助您完成此过程。

删除未使用的应用代码是一种最佳做法,可避免运行未使用的功能的代码,并使您的模板代码更易于阅读。

  • 请咨询您的应用开发者。

  • 聘请 Shopify 专家以获得更多帮助。

备注:仅在后台运行的应用(例如 Shopify Local Delivery 应用)不会影响在线商店的速度。

模板

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

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

  • 禁用您不使用的模板功能。考虑在线商店功能与速度之间的平衡。

  • 考虑使用系统字体。

  • 咨询模板开发者。如果您使用的是 Shopify 提供的免费模板,那么您可以联系 Shopify 支持团队以获取指导。如果您使用第三方模板并需要帮助,则可以联系模板开发者或聘请 Shopify 专家。

  • 考虑安装已优化性能的模板,例如 Dawn。

  • 聘请 Shopify 专家以获得更多帮助。


模板或应用功能

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

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

  • 使用热图工具查看客户是否在使用某些功能。禁用未使用的功能。

  • 禁用您不需要的功能。考虑在线商店功能与速度之间的平衡。

  • 咨询模板和应用开发者,询问模板和应用是否预加载数据。

  • 聘请 Shopify 专家以获得更多帮助。

复杂或效率低下的 Liquid 代码

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

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

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

  • 聘请 Shopify 专家来帮助您找到效率低下或无用的代码。

  • 运行适用于 Chrome 的 Shopify 模板检查器,识别减慢在线商店页面速度的代码行。

图片和视频

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

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

  • 产品系列页面上的产品不可超过 50 件,或主页上的分区不可超过 25个。

  • 许多模板会延迟加载屏幕上当前未显示的图片。

  • 许多模板还根据所用屏幕尺寸加载特定大小的图片。

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

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

  • 查看图片优化指南。

  • 将配图幻灯片保持为 2-3 张幻灯片,或使用一张配图。

  • 请咨询您的模板开发者,获取有关在其模板中使用图片的最佳方式的建议。

  • 聘请 Shopify 专家以获得更多帮助。

Shopify商户官网原文详情:

Improving your online store speed

Several factors impact your online store speed, some of which you can control.

If you don't know how fast your online store is performing today, then you can view your Online store speed report.

Factors you can't control

Your customer's device, network, and location

Customers who visit your store live around the world and have different devices and internet connections. This means that your store might load faster or slower for them depending on these factors.

If a customer contacts you about the speed of your store, then ask your customer to check that they're on the latest version of their browser, they have recently cleared their cache, and their Internet service provider is not experiencing any outages or degraded performance.

Shopify infrastructure

Shopify hosts your online store on fast, global servers and doesn't limit your store's bandwidth. You can check the status of your Shopify store on Shopify Status.

Shopify is constantly making improvements to its code and infrastructure. Some of these improvements might be reflected in your speed score.

Below are some features that affect the speed of your online store.

Content delivery network (CDN)

CDN stands for content delivery network. Shopify provides merchants a world-class CDN run by Fastly that ensures that your online store loads quickly around the globe. You can check the CDN status on the Fastly status page.

Local browser cache

Your store caches, or saves, some elements on your customer's local storage temporarily. The next time your customer visits your online store, the browser can load resources from the cache instead of sending another request to the server.

Shopify sets browser caching for cacheable resources in your store to one year for each file. Files that can be cached include image files, PDFs, JS files, and CSS files.

Server-side page cache

In addition to local browser caching, Shopify caches pages on the server side. The first time a page is loaded, it might be slower, but later page loads are faster because customers are receiving a cached copy.

The assets inside the content_for_header Liquid tag

The {% content_for_header %} Liquid tag injects assets used by a variety of online store features, including performance analytics and optional features like dynamic checkout buttons. Loading this tag and related assets has an impact on the speed of your store. Shopify is optimizing the tag and its assets to make it faster.

Factors you can control

Below are some factors that might impact the speed of your online store, and how you can address them.

Apps

When you add apps to change the functionality or appearance of your online store, they add code into the theme so they can run. Some code can be removed or reordered to improve your online store's performance. If you're not using an app, then you can remove it.

If you think that an app is slowing down your store, then take the following steps:

  • Disable app features you don't use, or remove the app if you don't need it. Consider the balance between online store features and speed.

  • If you're removing an app, then consider removing code that was added as part of the app install process. Some apps help you with this process by wrapping their code in {% comment %} tags that mention the app name.

Removing unused app code is a best practice that avoids running code for unused features, and makes your theme code easier to read.

  • Consult your app developer.

  • Hire a Shopify expert for further assistance.

Themes

Themes are made up of Liquid, HTML, CSS, and JavaScript code. When you edit or customize themes, file sizes can increase and affect your store speed.

If you think that something in your theme is slowing down your store, then take the following steps:

  • Disable theme features you don't use. Consider the balance between online store features and speed.

  • Consider using a system font.

  • Consult your theme developer. If you use a free theme from Shopify, then you can contact support for guidance. If you use a third-party theme, then you can contact your theme developer or hire a Shopify expert.

  • Consider installing a theme that's optimized for performance, such as Dawn.

  • Hire a Shopify expert for further assistance.


Theme or app features

Certain features, when enabled, might also affect your store speed. For example, some quick view pop-ups pre-load information from every product page when a collection page loads. Loading extra data your customers aren't using can impact your store speed without adding value.

If you think that a feature is slowing down your store, you can take the following steps:

  • Use a heatmap tool to see if customers are using certain features. Disable features if they are not being used.

  • Disable the feature if you don't need it. Consider the balance between online store features and speed.

  • Consult your theme and app developers and ask if they are preloading data.

  • Hire a Shopify expert for further assistance.

Complex or inefficient Liquid code

You can edit almost all of the Liquid that is used to render your store. There are efficient and inefficient ways of writing Liquid code. Doing complex operations repeatedly can increase your Liquid render time, which impacts your overall store speed.

For example, if you want to order the products in a collection by price, you should do that before you loop through the products in your collection, and not as part of the loop code. This is because the order of the products does not change for each product, and calculating the order of the products adds processing time to the request.

If you're concerned that your code is not optimized, then you can take the following steps:

  • Hire a Shopify expert to help you to find inefficient or useless code.

  • Run the Shopify Theme Inspector for Chrome to identify the lines of code that are slowing down pages in your online store.

Images and videos

Oversized images and images that are hidden from view can interfere with loading other, more important parts of a page. If users have to wait for large images to load, they might perceive your store to be slow.

Shopify adds some safeguards to prevent you from overloading your online store with images or videos. For example:

  • You can't have more than 50 products on a collection page or 25 sections on your home page.

  • Many themes defer loading images that are not currently onscreen.

  • Many themes also load a specific size of an image based on the screen size it's displayed on.

However, these safeguards do not entirely prevent images or videos from impacting your online store's performance.

If you think that images are slowing down your store, then take the following steps:

  • Review the image optimization guide.

  • Keep slideshows of featured images to 2-3 slides, or use one featured image.

  • Consult your theme developer for their advice on the best way to use images with their theme.

  • Hire a Shopify expert for further assistance.

文章内容来源:Shopify商户官方网站


(本文内容根据网络资料整理,出于传递更多信息之目的,不代表连连国际赞同其观点和立场)