如何使用 WP Rocket 和 Botiga 加速 WooCommerce

已发表: 2022-04-25

为如何加速 WooCommerce 和创建快速加载商店而苦苦挣扎？

拥有快速的商店至关重要，因为商店的加载时间会影响购物者的体验、SEO 排名，甚至商店的转化率。

但与此同时，WooCommerce 商店比常规 WordPress 网站更难优化，这可能会让您对商店的加载时间感到失望。

有几个原因，但其中两个最大的原因是 WooCommerce 商店比常规 WordPress 网站更需要数据库，而且您无法缓存商店的所有页面。

但是，这并不意味着您无法创建更快的商店。

使用正确的工具，您可以加快您的商店速度，而无需任何特殊的技术知识。

在本教程中，我将以我所知道的最简单的方式向您介绍 WooCommerce 速度优化：使用 WP Rocket 插件和其他一些工具和调整。

在此过程中，我将分享真实的性能测试数据，以便您了解每个调整如何影响商店的加载时间。

到最后，您应该拥有一个加载速度更快的商店——而且您不需要计算机科学学位来设置所有内容。

听起来不错？ 让我们一起加速 WooCommerce。

WP Rocket 之前的两个基本 WooCommerce 速度优化策略

在下一节中，我将向您介绍如何使用 WP Rocket 来加速 WooCommerce 并获得加载速度更快的商店。

但是，如果您想要一个快速加载的 WooCommerce 商店，您仍然需要有强大的性能基础。 否则，使用 WP Rocket 有点像给猪涂口红。

基本上，WP Rocket 仍然会让你的商店更快。 但是，如果您的基础太慢而无法启动，您仍然会有一个缓慢的商店。 只是会有点……“不那么慢”。

那么 - WooCommerce 性能的坚实基础是什么？

您需要确定这两个细节：

1. 选择更快的 WooCommerce 主题

您商店的主题将在加载速度方面发挥重要作用。 大而臃肿的主题会加载更多资源，这会降低您的网站速度。

另一方面，快速的 WooCommerce 主题会适得其反：它只会加载创建美观、购物友好型商店所需的最少内容。

我们有一个专门的帖子，我们在其中测试了一系列选项以找到最快的 WooCommerce 主题。 但是，如果您想节省时间，可以使用我们的免费 Botiga 主题：

Botiga 是最快的 WooCommerce 主题之一

从头开始，Botiga 专为性能而生。 它仅使用 vanilla JavaScript（无 jQuery 依赖项），自动压缩其代码，并且开箱即用不到 44.3 KB。

更重要的是，所有的演示站点都是使用本地块编辑器构建的，这意味着您不需要使用页面构建器插件来衡量您的商店，只是为了让您的站点看起来像演示。

同时，Botiga 提供了一系列有用的电子商务功能，包括：

  • 多种结帐和购物车页面样式
  • 即时产品搜索，帮助购物者快速找到产品
  • 时尚产品推荐
  • 产品变化样本
  • 多个产品库布局
  • 愿望清单
  • 粘性添加到购物车栏

Botiga 有一个功能齐全的免费版本以及一个增加更多功能的 69 美元的专业版。

出于这些原因，我们将使用 Botiga 作为加速我们商店的示例。

您可以在此处下载 Botiga 或浏览演示以查看一些示例。

2. 使用性能优化的 WooCommerce 托管

除了使用快速主题之外，您还需要选择性能优化的 WordPress 托管。

虽然选择最便宜的托管可能很诱人，但廉价的共享托管通常没有资源来处理 WooCommerce，这将导致加载时间和性能不佳，无论您做什么。

再次，我们有一篇文章，我们测试了一堆托管服务提供商，以找到最快的 WordPress 托管服务。 如果您赶时间，可以考虑以下一些不错的选择：

  • Kinsta – 阅读我们完整的 Kinsta 评论
  • WP Engine – 我特别推荐包含 Elasticsearch 的专用电子商务托管计划（这将大大提高您商店的产品搜索性能）
  • Cloudways – 阅读我的完整 Cloudways 评论
Kinsta 提供快速的 WooCommerce 托管

如何使用 WP Rocket 加速 WooCommerce

现在，是时候使用 WP Rocket 捆绑助推器并让 WooCommerce 加载速度更快了。

因为我们为我们的商店使用了可靠的托管和快速的 Botiga 主题，所以它本身已经很快加载了。 这是 WebPageTest 性能指标的屏幕截图，显示了我们从主页开始的位置：

仅使用 Botiga 的 WooCommerce 速度测试数据

但是，使用 WP Rocket，我们仍然可以使其加载速度更快。 有很多很棒的 WordPress 性能优化插件，那我为什么推荐 WP Rocket for WooCommerce？

好吧，您可以阅读我的完整 WP Rocket 评论以了解我喜欢它的原因，但这里有一个要点的快速总结：

  1. 它具有开箱即用的 WooCommerce 兼容性。 如果 WP Rocket 发现您正在使用 WooCommerce，它会在缓存等基础知识方面自动以最佳方式进行自我配置。 这是一个巨大的优势，因为在 WooCommerce 商店上不正确地配置缓存可能会破坏关键功能。
  2. 它非常易于使用。 除了以上几点，WP Rocket 总体上还具有简单的界面、详细的文档和高级支持。
  3. 它使您的网站更快。 我把最好的留到最后。 WP Rocket 很简单，它在使 WooCommerce 商店加载更快（以及其他 WordPress 网站）方面做得很好。 它还具有独特的功能，例如删除未使用的 CSS 和延迟 JavaScript 执行的能力。

WP Rocket 是一个高级插件，但支付 49 美元对于更快的 WooCommerce 商店来说是一个很小的代价。 页面加载时间和转化率之间存在直接关系，因此加快商店速度可以通过提高转化率轻松赚回您的钱。

要开始使用，请务必购买 WP Rocket 的副本。 然后，这是为 WooCommerce 设置它的方法。

1.安装插件激活基本优化

首先，前往您的 WooCommerce 商店（如果您还没有，请先进行设置），然后安装并激活 WP Rocket：

WP Rocket 全新安装欢迎消息

激活 WP Rocket 插件后，它将自动激活以下功能以加速您的商店：

  • 页面缓存——WP Rocket 还将自动排除关键的 WooCommerce 内容以避免出现问题，同时仍然缓存尽可能多的内容。 例如，它将排除您的购物车和结帐页面，以及其他兼容性调整。
  • 浏览器缓存
  • GZIP 压缩
  • 对 Web 字体的跨域支持
  • 优化 Google 字体文件

在 WooCommerce 商店中，WP Rocket 还将自动优化get_refreshed_fragments AJAX 请求。 这就是 WooCommerce 用来动态更新购物者购物车内容的方法。

同样，这些优化都是自动发生的，所以一旦你激活 WP Rocket，你的商店应该已经加载得更快了。

这是我们商店的主页现在如何加载，而无需触摸 WP Rocket 中的单个设置：

使用 WP Rocket 默认设置进行 WooCommerce 速度测试

您可以看到到第一个字节的时间减少了大约 450 毫秒（从 0.509 到 0.043 秒），这导致几乎所有其他指标（包括最大内容绘制 (LCP)）的类似减少。 最大内容绘制时间从 ~1.1 秒下降到 ~0.7 秒。

这种减少主要是由于 WP Rocket 实现的对 WooCommerce 友好的页面缓存，尽管其他调整也有帮助。

2.设置文件优化

虽然 WP Rocket 默认激活了许多有用的功能，但也有一些重要的功能需要您手动启用。

要开始使用，请转到 WP Rocket 设置区域中的文件优化选项卡（设置 → WP Rocket ）。

在这里您可以优化商店的 CSS 和 JavaScript 代码，这可以对商店的性能产生很大影响（尤其是在 Core Web Vitals 和 Lighthouse 性能得分方面）。

以下是我推荐的设置：

CSS 文件：

  • 缩小CSS 文件– 默认情况下，Botiga 主题已经缩小了其代码，但这有助于缩小您正在使用的插件中的代码。
  • 优化 CSS 交付 → 删除未使用的 CSS – 这将逐页删除不必要的 CSS，以缩小每个页面的文件大小。

我不建议合并 CSS 文件，因为现在大多数质量主机都使用 HTTP/2，这并没有真正的帮助。

WP Rocket WooCommerce CSS 性能优化

JavaScript 文件：

  • 缩小 JavaScript 文件
  • 加载 JS 延迟
  • 延迟 JavaScript 执行

与 CSS 一样，我不建议合并 JavaScript 文件。

为确保您的商店正常运行，您可能需要在延迟 JavaScript 执行设置中添加一些排除项。 这实质上会延迟加载所有 JavaScript，直到用户与您的网站交互（例如点击或滚动）。

这对于改善最大内容绘制时间非常有用，但您可能确实想立即加载一些 JavaScript，例如跟踪脚本（例如 Google Analytics 或 Google Tag Manager）或您可能正在使用的一些插件。

WP Rocket 维护所有潜在排除的详细页面，因此您无需找出脚本来排除自己。 您可以简单地从这篇 WP Rocket 帮助文章中复制它们并将它们粘贴到Excluded JavaScript Files字段中。

例如，如果您想排除 Google Analytics，您可以像这样配置它：

WP Rocket WooCommerce JavaScript 性能优化

进行这些调整后，您可以看到更多改进。 我们主页的页面大小减少了大约 80 KB，最大内容绘制时间进一步从 ~0.7 秒下降到 ~0.5 秒。

激活 WP Rocket 中的文件优化功能后 WooCommerce 速度测试数据

3.优化您的媒体

至此，您已经从 WP Rocket 中榨取了大部分性能价值。 但是，您可能需要探索其他一些设置区域以进行一些额外的调整。

在“媒体”选项卡中，我建议启用延迟加载和缺少图像尺寸。 前者将帮助您提高性能，后者可以减少 Cumulative Layout Shift (CLS) 的问题，以进一步提高您的 Core Web Vitals 性能：

WP Rocket 媒体优化选项

4. 添加内容交付网络（适用于全球商店）

内容交付网络 (CDN) 可让您通过在全球服务器网络上缓存图像和脚本等静态资产来加快商店的加载时间。

然后，访问者可以从物理上离他们最近的服务器下载这些静态文件，从而减少下载时间并加快您的商店。

如果您的商店仅针对特定地理区域（例如英国境内）的购物者，您可能不会注意到 CDN 有多少好处。

但是，如果您针对全球的购物者，例如英国和美国，那么 CDN 是加速 WooCommerce 的另一个绝佳选择。

在CDN部分，WP Rocket 为您提供了两种将 CDN 添加到商店的选项：

  1. 您可以使用官方 RocketCDN 服务，每月只需 7.99 美元即可获得无限带宽。 它基于 StackPath 的全球网络。 这是最简单的选项，因为它提供了自动配置。
  2. 您可以通过让 WP Rocket 重写您的 URL 来与任何第三方 CDN 集成。 流行的选项是 StackPath、KeyCDN、Bunny CDN、CloudFront 等。

如果您对设置自己的 CDN 没有信心，我建议您使用 RocketCDN 服务，因为它提供了相当不错的价值，因为您可以以固定价格获得无限带宽：

WP Rocket CDN 设置

WooCommerce 上 WP Rocket 的故障排除问题

虽然按照上面的说明应该可以更快地使用 WooCommerce 商店而不会出现任何问题，但在一些罕见的情况下，您可能会遇到小问题。

最常见的示例是某些类型的动态内容的问题，例如用户心愿单、最近查看的项目或特定位置的内容（例如，不同国家的不同价格）。

例如，如果用户访问了他们添加到愿望清单中的产品，您可能希望在产品页面上显示该产品。 但在某些情况下，缓存可能会导致出现不稳定的行为。

那么 - 你怎么能解决这个问题？ 让我们来看看一些技巧。

首先，尝试使用以缓存兼容方式编码的动态内容插件。 本质上，这意味着插件使用 JavaScript 或 AJAX 而不是 PHP 生成其动态内容。

如果您不确定，可以联系遇到问题的插件开发人员。 一些插件包括内置的兼容性工具。 例如，YITH WooCommerce Wishlist 插件具有启用 AJAX 加载的设置，这将解决缓存的任何问题。

WP Rocket 团队还为流行的 WooCommerce 插件创建了一些兼容性插件/工具，这些插件可能会导致问题：

  • YITH WooCommerce 愿望清单插件
  • 本机 WooCommerce 最近查看的产品小部件
  • YITH WooCommerce 最近查看的产品插件

如果上面的修复不是一个选项，另一个潜在的修复是添加一个缓存排除规则，该规则以插件设置的 cookie 为目标。 这是更高级的，但它可以让您绕过需要查看动态内容的用户的缓存。

您可以尝试从插件的文档中查找 cookie 信息或聘请开发人员为您解决。 然后，您可以在 WP Rocket 的高级规则区域设置 cookie 缓存排除规则：

WP Rocket 高级排除规则

WP Rocket 之外的其他有用的 WooCommerce 速度优化插件

WP Rocket几乎可以完成 WooCommerce 性能优化所需的一切。 但有一个主要例外：

图片！

您的商店可能会有大量的产品图片。 如果您不小心，这些产品图片可能会降低您的商店（尤其是您的产品和商店页面）的速度。

解决方案是通过压缩和调整大小来优化您网站的图像。 您可以使用图像优化插件自动实现这一点。

我们有一篇关于最佳 WordPress 图像优化插件的完整文章，但这里有一些顶级选项：

  • Imagify – 这个插件来自与 WP Rocket 相同的开发者
  • ShortPixel – 这是我在自己网站上使用的插件
  • WP Compress – 另一个高质量的选择； 在我们的 WP Compress 评论中了解更多信息

除了图像之外，大型商店的另一个有用工具是某种类型的产品搜索解决方案。

如果您有很多产品，产品搜索可能会占用大量资源，因为它会导致大量繁重的数据库查询。

您可以使用服务器外搜索解决方案来解决此问题，例如 Elasticsearch（通过 ElasticPress 插件）或 Jetpack Search（也基于 Elasticsearch，但实现起来更简单）。

立即加速您的 WooCommerce 商店

如果您希望您的 WooCommerce 商店取得成功，快速加载非常重要。

要为成功做好准备，首先要打下坚实的基础：

  1. 选择一个快速加载的 WooCommerce 主题，例如免费的 Botiga 主题。
  2. 使用性能优化的 WordPress 主机，例如 Kinsta 或 WP Engine。
  3. 建立您的电子商务网站的基础。

从那里，WP Rocket 可以帮助您实现许多 WooCommerce 性能优化，包括与 WooCommerce 兼容的缓存、CSS 和 JavaScript 优化等。

如果您还添加了图像优化插件来优化您的产品图像，您应该设置为使用轻量级、快速的 WooCommerce 商店进行喷射。

您对如何使用 WP Rocket 和 Botiga 加速 WooCommerce 有任何疑问吗？ 让我们在评论中知道！