Shopify 速度优化指南

佩诺诺

于 2024-07-11 16:02:24 发布

阅读量3

点赞数

文章标签： github 性能优化前端开发语言网络

原文链接：https://logeix.com/

版权

我们的 Shopify 用户遇到的最常见问题之一是页面加载缓慢。

但是 Shopify 真的很慢吗？

一点也不。

事实上，即使开箱即用的 Shopify 也相当快。但是，如果使用一些核心概念（如图像优化、延迟加载以及应用程序分析和优化）进行清理，您可以让任何商店的速度都快如闪电。

方法如下...

为什么要优化您的网站速度？

页面速度对于转化率（即实际网站访问者）至关重要。页面加载速度越慢，跳出率越高，因此留在您网站上的人数就越少。

从 SEO 的角度来看，虽然拥有一个速度极快的网站不一定能提高排名，但拥有一个加载缓慢或不一致的网站肯定会损害排名。

因此，问题就变成了“您的网页需要加载多快？”

据 Google 网站管理员团队称，当被问及“良好的响应时间”时，他们说：

Akamai 的研究声称 2 秒是电子商务网站“可接受”的门槛。仅供参考，在 Google，我们的目标是低于半秒。

为了更清楚地了解这一点，我们对 1,200 家电子商务商店进行了研究，发现平均页面加载时间为 3.97 秒。

许多网站的情况也更糟：

72.67％的商店平均加载时间少于 2 秒
55.08％的商店平均加载时间少于3秒
22.98％的商店平均加载时间少于5秒

简而言之，如果您想要更多的销量和更好的 SEO 排名，您应该花时间优化您的网站速度。

Shopify 默认优化了哪些内容？

不过也有一些好消息：

Shopify 非常清楚网站速度的重要性，并且提供了多种无需花时间的优化功能。这些是……

1. 服务器配置

Shopify 服务器速度很快，所以无需担心。

选择最佳托管服务提供商并配置服务器的正常运行时间和速度的日子已经一去不复返了，这一切都由您管理 - 而且管理得非常好。

2. 利用浏览器缓存

浏览器缓存允许将一些重要且经常访问的文件（例如 Javascript 和 CSS 文件，用于样式和功能）下载到用户的设备，然后在本地访问，而不是每次访问时重新下载。这可能会对页面加载时间产生很大影响，但幸运的是，Shopify 默认内置了此功能。

3.使用CDN

内容分发网络 (CDN) 是指将文件存储在世界各地的服务器上，然后从离访问者最近的服务器加载。来自英国的访问者可能从伦敦的服务器加载文件，而来自纽约的访问者可能通过纽约的服务器加载文件。这再次提高了网站速度，并且同样由 Shopify 管理，其 CDN 由 Fastly 和 CloudFlare 运行。

如何优化Shopify网站速度

选择轻量级主题

主题可能编码不良或设计功能臃肿，例如滑块、旋转木马和巨型菜单。

这些并不总是坏的功能，但可能会不必要地快速减慢网站的速度。

如果您刚刚开始，一个快速的方法是简单地选择一个更轻的主题，该主题要么编码更高效，要么功能更少。

以下是一些轻量级的示例主题：

现在您不再局限于此选择，有许多轻量级主题，任何主题都可以修改以加快加载速度。但对于一个全新的网站来说，它可能值得考虑。

但是，对于现有的网站，请分析您的主题并查看可以改进的地方。

您能将滑块切换为单个英雄图像吗？您能将轮播中的产品从 100 种减少到更合理的 8-12 种吗？快速查看功能是否会在初始页面加载时加载？

选择正确的图像文件格式

不同的文件格式在质量、文件大小以及加载时间方面具有不同的优势。

一般而言，产品图片应采用WebP或JPEG格式，以尽量减小文件大小，因为质量并不那么重要。但如果压缩得当，效果仍然很好。

对于英雄图像和其他带有文本的图像，你通常会使用像PNG这样的无损格式，但 WebP 也适用于这里。

对于您的徽标和主题图标，请确保使用SVG格式来获得高质量且可扩展的图像。

这里主要考虑的是质量和尺寸。

压缩图像

选择正确的文件格式只是工作的一部分，接下来您需要压缩图像。

我对 3 张随机图像进行了快速测试，以查看压缩后文件变小了多少：

您可以看到文件大小减少了49% 至 77% ，这是一个巨大的减少。

值得庆幸的是，使用 Shopify App 可以非常轻松地实现这一目标，您可以自动执行整个过程。

只需安装像Crush.pics这样的压缩应用程序，您就可以开始比赛了。

或者如果您遇到任何困难或想要手动完成，您可以使用像TinyPNG这样的免费网站。

缩小大图像尺寸

您应该注意的另一件事是您上传的图像的尺寸。

如果您与摄影师合作拍摄您的产品，他们可能会向您发送巨大的高清照片，以便您在何处以及如何使用它们方面拥有更大的灵活性。

但对于网络来说，您希望将图像缩小到可以显示的大小。

例如，您的访客可能使用宽度为 400px 的移动设备，但您的图片宽度为 2,000px。这是他们所需尺寸的 5 倍，这不仅会加载缓慢，而且由于尺寸缩小太多，看起来质量很差。

该过程分为两部分：

将上传的图像调整为所需的最大尺寸（这可能是显示尺寸的 2 倍，以覆盖视网膜显示屏）
用于srcset选择性地显示不同的图像尺寸

第二部分可能需要开发人员，但在最佳图像和加载时间方面非常高效。

以下是一个示例：

<span style="color:#333333"><span style="background-color:#ffffff"><span style="background-color:#272822"><span style="color:#f8f8f2"><code class="language-markup"><span style="color:#f92672"><span style="color:#f92672"><span style="color:#f8f8f2"><</span>img</span> 
  <span style="color:#a6e22e">alt</span><span style="color:#e6db74"><span style="color:#f8f8f2">=</span><span style="color:#f8f8f2">"</span>A baby smiling with a yellow headband.<span style="color:#f8f8f2">"</span></span>
  <span style="color:#a6e22e">srcset</span><span style="color:#e6db74"><span style="color:#f8f8f2">=</span><span style="color:#f8f8f2">"</span>
    baby-s.jpg  300w,
    baby-m.jpg  600w,
    baby-l.jpg  1200w,
    baby-xl.jpg 2000w
  <span style="color:#f8f8f2">"</span></span>
  <span style="color:#a6e22e">sizes</span><span style="color:#e6db74"><span style="color:#f8f8f2">=</span><span style="color:#f8f8f2">"</span>70vmin<span style="color:#f8f8f2">"</span></span>
<span style="color:#f8f8f2">></span></span></code></span></span></span></span>

在这种情况下，我们会根据图像的宽度和必须显示的空间告知浏览器显示什么图像。

这样，移动设备可能会加载小文件，而高端视网膜设备则会加载 XL 大小的文件。这样可以在各个设备上保持一致的质量，同时优化速度。

不过，您不必对每个图像都执行此操作，因为我们也有延迟加载。

延迟加载图像

通常，当打开页面时，每个脚本、图像和资源都会立即加载，以确保正确显示。但这总是必要的吗？

例如，产品系列页面很容易就有 24 张以上的产品图片，但即使在页面加载后，有多少图片是可见的呢？许多图片位于页面下方，需要滚动才能看到。

延迟加载是指推迟加载图像，直到它们可见为止。

这可能是图像在屏幕上几乎可见时才加载。或者只加载轮播中的前 2 张产品图像，然后在您点击时加载其余图像。

现在设置它是未来的博客文章本身，但这里是简短的版本：

将lazysizes.js 库添加到主题资产文件夹并将其包含在theme.liquid
src通过交换data-src和添加lazyload类来更新图像标签

因此你将得到一个如下所示的标准图像：
<img src="IMAGE_URL.jpeg">

现在看起来像这样：
<img data-src="IMAGE_URL.jpeg" class="lazyload">

不同之处在于您要替换src并data-src添加类lazyload。就是这样，这非常简单，尽管我建议让开发人员为您完成此操作。

正确卸载未使用的应用程序

您可能以前听说过，但应用程序可能会严重减慢您的网站速度。

但是携带钱袋也很重，但这并不意味着我会把它们扔掉。

诀窍是只安装您需要的应用程序，有些甚至可以硬编码到您的主题中，优化这些应用程序，然后卸载其余应用程序。

卸载应用程序时可能会遇到的一个问题是主题中残留的代码。除非手动操作，否则卸载应用程序时通常不会删除这些代码。

要解决此问题，请先在 Google 的PageSpeed Insights工具上运行您的网站。

查找“减少第三方代码的影响”，你会发现从其他域加载的大量脚本列表：

我们正在寻找不再使用的域名和脚本，如果您看到任何域名和脚本，可以将其删除，因为它们会不必要地减慢页面速度。

除此之外，我们还可以手动检查主题文件中是否存在不必要的应用程序代码。

要做这些事情，我建议让开发人员查看您的theme.liquid文件以及其他主题文件，然后识别并删除任何未使用的脚本或代码。

有条件地加载应用程序脚本

默认情况下，大多数应用程序脚本都会添加到您的theme.liquid文件中，以便它们在每个页面上加载 - 这很方便。但速度也很慢。

这相当于你每天 24 小时都随身带着雨伞，以防有一天下雨。下雨时才带伞不是更有效吗？

通过应用程序，可以通过条件加载来实现这一点。

简而言之，如果满足条件，则加载应用程序脚本。

例如：

产品评论：如果这些仅显示在产品页面上，则有条件地仅在产品页面上加载此脚本
社交分享按钮：你在每个页面上都使用这些按钮吗？还是只在博客文章上使用？如果只在某些类型的页面上使用，则仅在这些页面上加载它们
产品图片缩放、无限选项等：任何产品页面特定功能（例如此类功能）可能只需要在产品页面上加载即可

现在我强烈建议使用开发人员并进行适当的测试，但代码本身是一个简单的 if 语句。

例如：

<span style="color:#333333"><span style="background-color:#ffffff"><span style="background-color:#272822"><span style="color:#f8f8f2"><code class="language-html">
{% if template == 'product' %}
<span style="color:#8292a2"><!-- Your script here --></span>
{% endif %}
</code></span></span></span></span>

或者针对特定页面：

<span style="color:#333333"><span style="background-color:#ffffff"><span style="background-color:#272822"><span style="color:#f8f8f2"><code class="language-html">
{% if page.handle == 'contact' %}
<span style="color:#8292a2"><!-- Your script here --></span>
{% endif %}
</code></span></span></span></span>

最小化 Javascript 和 CSS 文件

与撰写文章一样，开发人员在编写代码时通常会在其中加入样式元素。

这以间距的
形式出现，

// Comments

以及其他使代码更容易理解的方法。

最小化是指消除这种样式的过程，因为它对于机器人来说是不必要的，从而会减小文件的大小。

对于非开发人员，有一些应用程序可以帮您缩小这些文件，例如文件优化器。

否则，您可以使用JSCompress手动执行此操作，并让 Shopify 通过将 CSS 文件转换为 .scss.css 格式自动为您执行此操作。

异步非必要脚本

如果您的脚本对于初始页面加载不是必需的，您可以推迟它们以便最后加载，或者异步加载以便在执行之前在后台加载完整的脚本。

再次强调，这只适用于非必要的脚本。

基本脚本将是像 jQuery 这样直接影响网站功能的脚本。

但是也许您有一个实时聊天脚本，虽然它有助于转换，但绝对可以推迟以加快首先加载实际页面和内容。

分析和跟踪脚本是另一种可以异步加载以加快页面渲染速度的东西。

这张图解释了它们加载方式的差异：

您应该让开发人员来实现这一点，但是通过在脚本标签中添加 defer 或 async 可以相对简单。

使用资源提示/预加载

资源提示包括preload、prefetch、dns-prefetch或preconnect;，用于优化重要资源的加载。

每个都有不同的用途，如下所示：

preload在页面开始呈现之前获取当前页面的关键资源
prefetch获取当前页面不需要但下一页可能需要的资源，例如样式表
dns-prefetch通过提前对要加载资源的域执行 DNS 查找来减少延迟。请注意，这是在当前页面加载后执行的。
preconnect当您计划在 10 秒内从特定域获取内容时。与 DNS-Prefetch 类似，但也进行 TCP 握手和 TLS 协商。

这些可以通过修改元素来添加来使用，例如：<link>rel= attribute

<span style="color:#333333"><span style="background-color:#ffffff"><span style="background-color:#272822"><span style="color:#f8f8f2"><code class="language-markup"><span style="color:#f92672"><span style="color:#f92672"><span style="color:#f8f8f2"><</span>link</span> <span style="color:#a6e22e">rel</span><span style="color:#e6db74"><span style="color:#f8f8f2">=</span><span style="color:#f8f8f2">"</span>preload<span style="color:#f8f8f2">"</span></span> <span style="color:#a6e22e">href</span><span style="color:#e6db74"><span style="color:#f8f8f2">=</span><span style="color:#f8f8f2">"</span>{{ jquery.min.js | asset_url }}<span style="color:#f8f8f2">"</span></span> <span style="color:#a6e22e">as</span><span style="color:#e6db74"><span style="color:#f8f8f2">=</span><span style="color:#f8f8f2">"</span>script<span style="color:#f8f8f2">"</span></span><span style="color:#f8f8f2">></span></span>
<span style="color:#f92672"><span style="color:#f92672"><span style="color:#f8f8f2"><</span>link</span> <span style="color:#a6e22e">rel</span><span style="color:#e6db74"><span style="color:#f8f8f2">=</span><span style="color:#f8f8f2">"</span>prefetch<span style="color:#f8f8f2">"</span></span> <span style="color:#a6e22e">href</span><span style="color:#e6db74"><span style="color:#f8f8f2">=</span><span style="color:#f8f8f2">"</span>{{ stylesheet.css | asset_url }}<span style="color:#f8f8f2">"</span></span><span style="color:#f8f8f2">></span></span>
<span style="color:#f92672"><span style="color:#f92672"><span style="color:#f8f8f2"><</span>link</span> <span style="color:#a6e22e">rel</span><span style="color:#e6db74"><span style="color:#f8f8f2">=</span><span style="color:#f8f8f2">"</span>dns-prefetch<span style="color:#f8f8f2">"</span></span> <span style="color:#a6e22e">href</span><span style="color:#e6db74"><span style="color:#f8f8f2">=</span><span style="color:#f8f8f2">"</span>//cdn.shopify.com<span style="color:#f8f8f2">"</span></span><span style="color:#f8f8f2">></span></span>
<span style="color:#f92672"><span style="color:#f92672"><span style="color:#f8f8f2"><</span>link</span> <span style="color:#a6e22e">rel</span><span style="color:#e6db74"><span style="color:#f8f8f2">=</span><span style="color:#f8f8f2">"</span>preconnect<span style="color:#f8f8f2">"</span></span> <span style="color:#a6e22e">href</span><span style="color:#e6db74"><span style="color:#f8f8f2">=</span><span style="color:#f8f8f2">"</span>//cdn.shopify.com<span style="color:#f8f8f2">"</span></span><span style="color:#f8f8f2">></span></span>
</code></span></span></span></span>