15 种以上加速 WooCommerce 商店的简单方法

已发表: 2022-04-26

Neil Patel 和谷歌所做的研究表明,如果加载时间超过三秒,将近一半的用户会离开移动网站。 页面加载时间每增加一秒(最多 5 秒),您可能就会失去收入。 在本教程中,我们将学习加速 WooCommerce 商店

目录

您的 WooCommerce 商店运行得越快,您完成的销售就越多

快速的网站会带来更高的搜索排名,这意味着更多的流量来自自然搜索,从而带来更多的销售额。

更好的转化率还取决于您的电子商务商店的速度,因为它们可以让访问者在网站上停留更长时间。 普通用户的注意力持续时间为 8 秒或更短。 在他们点击离开之前,您需要引起他们的兴趣。

因此,在本文中,我们将讨论 WooCommerce 商店速度慢的各种原因,然后我们将讨论解决这些问题的解决方案。

为什么需要加速 WooCommerce 商店?

在当今世界,速度很重要。 很多。

人们太忙了,无法处理缓慢的网站。 如果您的页面加载时间过长,则很有可能有人会放弃它并转向加载速度更快的内容。

现在,如果您经营一家电子商务商店,风险会更高。 一个缓慢的网站会影响您的 SEO 排名、转化和销售——所有这些都会对您的业务产生深远的影响。

正如我们稍后将在本文中看到的那样,提高 WooCommerce 网站的速度还可以提高用户参与度并增加您的收入。

WooCommerce 商店缓慢的原因

WooCommerce 商店运行缓慢可能有数千个原因,但是,以下是一些最常发生的原因。

  1. 缓慢或编码不佳的主题
  2. 编码不佳的插件
  3. 缓慢的网络托管服务
  4. 大量未优化的图像

编码不佳的主题可能包含不必要的 CSS 和 JavaScript 文件,最终会减慢您的网站速度。 同样,一些插件可能会使用糟糕的编码习惯并使用过多的 CPU 资源。

除此之外,无论您做了多少优化,如果您使用缓慢或缓慢的托管服务,那么您将继续遭受缓慢的 WooCommerce 商店。 您可以了解有关专用主机与共享主机的更多信息。

如何识别缓慢的 WooCommerce 商店?

好吧,在您尝试加速您的网站之前,您需要首先确定您的 WooCommerce 商店的速度,您的商店有可能已经很快了。

所以,让我们先弄清楚这一点。 100% 的情况下,只有 2 个因素会减慢您的网站速度。

  1. 您网站的前端(CSS、Javascript、图像)
  2. 您网站的后端(实际处理发生的地方也包括数据库处理,我们已经详细讨论了 WordPress 数据库优化)

衡量您的 WooCommerce 商店的前端性能

要测量商店的前端性能,您可以使用 GTMetrix 或 Pingdom 等工具。

打开 GTMetrix 并输入您的域:

单击Test your site后,GTMetrix 将运行各种测试并为您提供如下结果

这个结果将为您提供很多信息。 例如有性能选项卡、结构选项卡、瀑布选项卡等

您可以浏览每个选项卡以了解有关每个选项卡的更多信息,并查看您网站的哪些部分可以改进。

衡量您的 WooCommerce 商店的后端性能

测试商店的后端很棘手,大多数人都忽略了这个性能指标。 但是,测试您的网站在高流量下的表现非常重要。

要测试后端性能,您可以使用 loader.io,有一个完整的指南可用于测试后端:WordPress 负载测试。

提高 WooCommerce 商店速度的 7 种方法

最后,我们现在将讨论加速 WooCommerce 商店的 7 种方法。

使用快速主题

主题可以对页面加载时间产生巨大影响。 您需要使用编码良好且速度快的主题。

根据 WooFocus GeneratePress是最快的 WordPress 主题。 列表中的第二个是Shoptimizer ,然后是 Storefront(这是 WooCommerce 的官方网站,完全免费)

请记住,在购买主题时确保它看起来不错,但同时您需要确保它在速度方面也表现良好,否则不会很好。

你怎么知道一个主题是编码良好还是快速?

  • 如果您从 ThemeForest 或任何其他主题市场购买主题,请检查差评(错误、错误等)
  • 使用 GTMetrix、Pingdom 工具和 Google PageSpeed Insights 测试演示站点——所有这些工具都会让您了解演示站点的加载速度。 这显然不是您的网站将获得的分数,但它会让您了解主题是如何构建的。
  • 检查作者是否包含任何具有主题的缓存插件(如 W3 Total Cache)。 如果他们这样做了,那么这是一个很好的迹象,表明他们正在考虑性能并相应地发展了他们的主题。 但我仍然会考虑其他一些因素——毕竟任何人都可以包含缓存插件!

使用编码良好的插件

许多插件由专业团队开发,而其他插件则由 1 个人团队拼凑而成。 这些插件可能更便宜,但它们的代码通常很糟糕,会导致速度变慢并与其他插件发生冲突。

插件并非都是平等的! 有些具有出色的代码和功能集,而另一些则没有很好的编码或速度优化。

仅将插件用于您真正需要的东西。 如果您不需要特定插件的功能,请不要使用它——它只会增加您的网站膨胀。

如果您的主题可以在不使用插件的情况下做某事,那么请避免使用插件来实现该功能,以使您的网站更精简、更快。 例如,如果您的主题具有内置的页面构建器功能,则使用它而不是单独的页面构建器插件来保存一些数据库查询和正在加载到前端的文件。

选择一个优秀的网络主机

正如我上面提到的,您可以进行世界上所有的优化,但最终还是会遇到缓慢的 WooCommerce 商店。

您的虚拟主机负责您网站的性能,通过选择正确的主机,您可以显着加快您的网站速度。 共享主机和专用主机之间的成本差异略高,但值得为好的专用服务器多付一点钱。

出色的主机将提供快速的加载速度、安全性和出色的客户服务。 如果您的业务增长,它们还将提供可扩展性——这是更便宜的共享主机无法做到的。 请务必选择提供定期备份的主机,以防出现任何问题。

您还可以查看 Cyber​​Hosting 的托管主机计划。

减少您使用的插件数量

当我启动我的第一个 WordPress 网站时,我真的被迷住了,安装了太多的插件。 而且大多数人都会犯同样的错误。 WordPress 存储库包含 1000 多个插件,但并非所有插件都适合您的商店。

插件是 WooCommerce 网站速度慢的最常见原因。 您应该始终使用尽可能少的插件,但请确保您不要吝啬功能。

停用并删除您不使用的插件。 如果您现在已经使用您的网站一段时间了,很可能在某个时候您测试了一些插件,然后后来忘记了它们。 这些不活跃的插件可以通过多种方式减慢您的网站速度:

它们消耗数据库空间,使查询速度变慢。

它们可能被编程为在每次页面加载期间执行某些任务,即使它们没有在您网站的任何地方使用。

优化 WooCommerce 插件设置以提高性能

更改您的登录页面 URL 是第一步,即使您运行一个简单的 WordPress 网站(没有 WooCommerce,建议这样做)。

WordPress 网站的登录 URL 默认为 example.com/wp-admin。 尽管这很容易记住,但它也带来了一个主要问题:每个人都知道它,包括机器人和黑客。

黑客将尝试使用自动机器人入侵您的网站,无论他们是否成功,机器人都会通过频繁发出请求来减慢您的网站速度。 通过将您的登录 URL 更改为独特的东西来保护自己免受暴力攻击。

使用 Change wp-admin login 等免费插件非常容易完成此任务

下一步是禁用您网站上的 pingback。 它通常会产生无用的垃圾邮件。

转到设置 -> 讨论

默认情况下,启用前两个选项,禁用它们以进一步缓解您的站点。

除此之外,如果您的电子商务网站还托管博客,则可以限制博客提要上的帖子数量。 WordPress 的默认设置是 10 个帖子,但您可以设置一个下限。

尽管这看似无关紧要的好处,但如果您运行一个高流量的博客,性能节省可以加起来(这里有一些方法可以让您的网站获得流量)。 阅读选项可以在 WordPress 仪表板中找到。

转到设置 -> 阅读

除此之外,正如我们在 WordPress 数据库优化中解释的那样,垃圾评论也会真正减慢您的网站速度,因为它们只是 WordPress 数据库中的行,所以我建议使用 Akismet 插件来自动捕获和过滤垃圾评论,这个对您的网站非常有帮助。

增加 WordPress 网站的内存限制

WordPress 内存限制默认为 32 MB。 但是,您的网站可能需要超过这个数量,特别是 WooCommerce 商店需要的空间远远超过 32MB。

如果您曾经看到过这样的消息,那么很可能您的限制不好:

致命错误:第 341 行 /path/to/wp-includes/functions.php 或

致命错误:内存不足(已分配 524288)(试图分配 71 个字节),那么您需要增加您的 PHP 内存限制。

增加 WP 内存限制的一种方法是在wp-config.php中添加以下行

define( 'WP_MEMORY_LIMIT', '256M' );

使用整页缓存

全页缓存是一种技术,可让您在第一个用户访问网站页面后将其保存为静态文件。 然后将为后续用户提供这些缓存文件,而不是每次都动态生成它们。 与每次请求页面时必须生成页面相比,此技术使用的资源更少,从而大大加快了您的网站速度。

棘手的部分是大多数 WordPress 网站不能像那样容易地缓存,因为许多元素是根据每个用户的请求和从第三方(如社交网络、分析平台等)收到的信息动态生成的。 但是 LSCache 足够智能,可以使用基于标签的缓存来缓存动态资源。

让我们看看如何使用 LiteSpeed Cache for WordPress 插件打开整页缓存。

安装后,转到LiteSpeed Cache->Cache。

您将看到许多选项,例如缓存、TTL、清除、排除、ESI、对象、浏览器、高级。

  • 启用 LiteSpeed 缓存(保持开启,这样缓存才会起作用,这是 LSCache 的默认页面缓存)
  • 缓存登录用户(为登录用户缓存页面)
  • 缓存登录页面(你可以保持它,因为登录页面不会有太大变化)
  • 缓存 PHP 资源(这将基本上缓存您的动态资源并将它们存储为静态页面)
  • Cache Mobile (如果您的手机有不同的主题,请保持打开状态。)
  • 删除查询字符串(为了获得更好的维护和更高的性能,值得从 URL 中删除查询字符串并创建单个缓存副本。)

时间:

最好保留默认值,因为它们已经足够好了。

清除:

升级时清除所有内容:

继续。 并将其他人设为默认值。

不包括:

如果您想从缓存引擎中排除任何 URL,请使用此选项。

对象缓存:

启用 Redis 缓存,这将有助于减少数据库的负载。

浏览器缓存:

将此设置设为 ON 可减少对静态文件的重复请求。 更多详细信息:使用有效的缓存策略服务静态资产

优化您的图像

您应该优化主页上的图像的原因有很多:

  • 这是您的访客首先看到的
  • 它通常包含大量大图像,这会显着减慢页面加载时间

您可以做的第一件事是延迟加载图像。 之前您必须使用第三方插件来延迟加载图像,但最近它已在 WordPress 核心中实现,如您在此处看到的。 这意味着它非常重要。

根据 HTTPArchive,图像是大多数网站最需要的资产类型,通常比任何其他资源占用更多的带宽。 在第 90 个百分位,网站在桌面和移动设备上发送大约 4.7 MB 的图像。

Web 的本机延迟加载,web.dev

WooCommerce 商店展示产品,所有产品通常都带有图片。 因此,如果您有很多很多产品,他们的所有图像都会立即加载,这会真正降低您的网站速度。

这就是延迟加载这些图像很重要的原因。

使用 LSCache 插件优化图像

通过 Cyber​​Panel 部署的每个 WordPress 站点都预装了 LSCache 插件。 LSCache 插件有一个专门的图像优化工具,您可以使用它进行大量图像优化,让我们看看如何。

如果您不使用 Cyber​​Panel,请确保首先安装 LiteSpeed Cache for WordPress 插件。

导航到LiteSpeed 缓存-> 图像优化-> 收集图像数据。

单击此按钮将启动优化过程。 进度将显示在侧边栏中。

要对图像优化进行任何更改,请单击图像优化设置

注意:LSCache 插件会使用 QUIC 云服务优化你的图片,这意味着你的服务器上不会有任何额外的负载,强烈建议只使用优化远程服务器上的图片的插件,否则会降低你的速度店铺。

在本节中,您可以选择:

  1. 使用 cron 自动优化新图像
  2. 无损优化:这意味着您不会失去图像质量但它们的尺寸会更高(建议将其关闭)
  3. 创建 WebP 版本:LSCache 插件可以自动将图像替换为其 .webp 版本

如果您谈论图像优化,还有其他插件,例如 WP Rocket,但是 LSCache 是免费的并且超级易于使用并且可以很好地完成工作。

通过 CDN 交付静态资源

将静态资源视为很少(如果有的话)更新的内容。 当用户访问网站时,他们的浏览器需要下载 CSS 或 JavaScript 文件等静态资源。

静态资源通常缓存在用户的浏览器中。 这意味着在第一次访问后,将从缓存中提供资源,这有助于提高感知性能。

既然您知道什么是静态资源,那么让我解释一下为什么通过 CDN 交付它们很重要。 通过 CDN 交付静态资源有多种好处:

  • 它可以在浏览器中实现并行下载,从而提高页面速度和性能。
  • 它通过将静态文件卸载到 CDN 来减少服务器加载时间
  • 它减少了源服务器上的带宽使用

现在,如果您已经安装了 LSCache,则无需安装任何第三方插件即可使用 CDN 交付静态资源。

加快woocommerce

从左侧菜单中选择 LiteSpeed Cache 下的 CDN,在 CDN URL 部分输入您在 CDN 上使用的域。

重要提示:如果您使用的是 QUIC Cloud 或 Cloudflare,则不需要使用此选项,因为默认情况下您的静态资源是通过 CDN 提供的。

仅使用此选项设置第三方 CDN,例如 BunnyCDN 或 KeyCDN(如果您选择此选项,请确保您不使用 Cloudflare 或 QUIC Cloud)

缩小 JavaScript 和 CSS 文件

缩小 CSS 和 JS 文件有助于加快您的 WooCommerce 网站(前端)。 它消除了代码中的空白、注释和其他对您的网站运行而言不必要的额外代码。

CSS 和 JavaScript 优化是 LSCache 插件的核心功能。 让我们看看如何使用 LiteSpeed Cache for WordPress 插件优化 CSS 和 JavaScript。

LiteSpeed 缓存 CSS 优化

LiteSpeed 缓存-> 页面优化-> CSS 设置。

CSS 优化
CSS 优化

CSS 缩小:

使用此功能,您可以缩小 CSS 文件和内联 CSS。

CSS 组合:

您的所有 CSS 文件将被合并。 确保您的网站设计在打开并仔细检查时不会中断。

CSS 结合外部和内联:

当 CSS 组合也启用时,将外部和内联 CSS 包含在单个文件中。 CSS Combine 能够保持 CSS 优先级,从而最大限度地减少潜在错误。 让我们启用它。

异步加载 CSS:

这可能会提高速度测试平台上的分数,但在您网站的初始显示方面可能会出现问题,因此大部分时间都不要使用它。

生成关键 CSS:

在加载其余 CSS 之前,会生成并加载关键 CSS。 在启用此选项之前,您必须彻底检查您的网站以确保它不会中断。 我们暂时将其关闭。

在后台生成关键 CSS:

基于 cron 的队列用于自动生成关键 CSS。 为这篇文章关闭它。

单独的 CCSS 缓存帖子类型:

为每个列表帖子类型生成 CCSS。

CSS的优化设置:

CSS的优化设置
LiteSpeed JavaScript 优化

LiteSpeed 缓存-> 页面优化-> JS 设置。

使用 LiteSpeed 缓存的 JS 优化
使用 LiteSpeed 缓存的 JS 优化

JavaScript 缩小:

内联 JavaScript 和 JavaScript 文件将被缩小。

JavaScript 结合:

JavaScript 文件和内联 JavaScript 代码将以这种方式组合在一起。 如果它不会破坏您网站的功能,您可以启用它。

加载 JavaScript 延迟:

结果,性能将得到提高,资源争用将减少。 它可能有助于您在 Pingdom、GTmetrix 和 PageSpeed 等服务上的速度得分。 我们建议您继续使用它,但只有在它不影响您的 JavaScript 功能时才这样做。

加载内联 JavaScript:

保持默认。

优化的 JavaScript 设置:

优化的 JavaScript 设置

删除不需要的 JavsScript 和 CSS 样式表

大多数时候,开发人员都很懒惰,他们会将 JavaScript 或 CSS 文件导入基本文件中,并将这些文件包含在您网站的所有页面中,即使在不使用的地方也是如此。

现在想象在您的联系我们页面上加载了 20 个 JavaScript 文件。 这种做法确实不好,但很常见,您需要找出某些页面上使用了哪些 JavaScript 和 CSS 文件,然后排除不需要的。

您可以使用名为 Asset CleanUp: Page Speed Booster 的插件去除未使用的 JavaScript 和 CSS。 这个过程可能很累,但结果会非常富有成效。 如果您有一个巨大的网站,我建议您从主页开始,因为您的大多数用户都会在那里登陆,然后您可以查看其他重要的登陆页面或定价页面。

安装并激活插件后,从左侧栏中打开页面,然后单击管理 CSS 和 JS

这将打开另一个页面,插件将向您显示从您的主题、第三方插件或 WordPress 核心加载到此页面上的 JavaScript 和 CSS 文件。

在第一个箭头上,您可以看到没有从第三方插件加载 CSS 和 JavaScript 文件,因为它只是一个新的 WordPress 站点,但是从主题加载了 1 个 CSS 文件,我们不能排除它,因为它需要加载您的页面。

但我希望您了解如何使用此工具排除不需要的文件。

优化您的 WooCommerce 数据库

我们有关于 WordPress 数据库优化的完整指南,它是关于清理和优化 WordPress 数据库的非常全面的指南,因为 WooCommerce 也基于 WordPress,适用相同的原则。

如果用户访问您的商店,它会请求您的网站内容,这些内容大多是静态的,不会经常更改。 为了下订单,他们提出动态请求。

如果您商店的数据库未优化,这些请求的处理速度可能会减慢。 一个缓慢的服务器最终会导致一个缓慢的网站。 通过从数据库中删除不必要的垃圾,您将能够对其进行优化。

您可以通过 6 种方式优化您的 WooCommerce 数据库。

删除过时的修订

如果您的 WooCommerce 商店的页面、帖子和产品已经使用了很长一段时间,它们将会有旧的修订。 这需要清理,我们已经在我们的另一篇文章中解释了如何删除修订。

以有限的数量存储修订

限制帖子和页面上的修订数量,这样您就不会有大量的旧修订。 您的网站内容可能需要经常更新,这将防止修订变得不堪重负。

您可以通过在 wp-config.php 中添加以下代码来限制修订

define('WP_POST_REVISIONS', 5);

在声明ABSPATH之前添加此代码段。

允许完全禁用修订(如有必要)

您可以在您的网站上完全关闭修订。 为此,只需将以下代码粘贴到您的 wp-config.php 文件中。 确保将此代码段放在声明 ABSPATH(如上所述)的行上方,如前所述。

 define('WP_POST_REVISIONS', false);

个人而言,在我们的网站上,我们会不断进行修订,因为有时 2-3 个人在撰写一篇文章,我们需要回顾更改了什么以及谁更改了它,因此您可以保持它并将其限制为 5 或 10 次修订。

应该清理过期的瞬态

瞬态是具有唯一名称和设定到期日期的临时文件。 它们通常保存在 WordPress 数据库的 wp_options 表中。

瞬态与选项相同,只是它们具有到期时间的附加属性。 它们可以方便地存储临时数据,例如遥远的 API 答案或大量查询。

WordPress Transients API 指定如何处理瞬态并自动擦除过期的瞬态。

有缺陷的瞬态缓存有时会产生近百万个垃圾条目,而且看不到尽头。 客户会话可能会随着时间的推移而累积,从而导致数据库表中出现数千个多余的行。 在这些情况下,臃肿的数据库可能会使您的站点停止运行。

过期的数据库应该清理

您管理电子商务商店所需的一切都存储在您的 WooCommerce 数据库中。

随着数据在整个数据库表中的添加、删除和移动,它变得效率低下,并最终保留了大量运行商店不需要的信息。

您必须清理数据库表以删除这些多余的数据。 特别是 wp_options 表容易膨胀,导致数据库性能问题。

应禁用对数据库征税的过期功能

WooCommerce 主题和插件有许多巧妙的功能,乍一看似乎很棒,但最终会破坏数据库。

这些功能可能会导致大量站点范围内的查询,特别是在您拥有大量产品的情况下。 如果您确实需要这些功能,请考虑手动将它们添加到您的页面中。

专注于移动优先体验

值得注意的是,手机的转化率还不到台式电脑的一半。 这里有很多改进的机会。

建立适合移动设备的 WooCommerce 商店是一个不错的起点。 要查看您的网站是否符合基本的移动可用性指南,请使用 Google 的移动友好测试工具。

该测试将为您提供您的网站在移动设备上的显示方式的可视化表示。 如果发现任何与移动可用性有关的问题,它们将被列出。

使用响应式主题是使您的 WordPress 网站适合移动设备的最简单方法。

移动用户不喜欢无限滚动。 因此,使您的业务页面尽可能简单。 不要让信息过载。

如果您的商店有很多产品,请让您的移动客户使用搜索轻松找到它们。 部署 WooCommerce 产品搜索插件以帮助您的客户使用实时产品过滤器快速查找产品。

同时优化 WooCommerce 管理面板

商店的前端并不是唯一影响速度的地方。 快速的后端对于管理商店和在需要时进行快速更改同样重要。

提高生产力需要有效使用您的 WooCommerce 管理面板。 它还可以让您腾出时间专注于 WooCommerce 商店绩效的更重要方面,例如在线营销。

消除臃肿并保持最新状态

确保 WordPress、WooCommerce、插件、扩展和主题都定期更新。 如果主题或插件的开发人员不再维护它,是时候考虑删除它了。
如果主题/插件将不必要的混乱添加到您的仪表板,请开始寻找替代方案。

对象和数据库缓存应该被禁用

缓存插件是一种让您的 WordPress 网站加载速度更快的绝佳技术。 但是,如果设置不正确,它们可能会产生意想不到的效果。 减速你的后端是其中的一部分。

对象和数据库缓存通过最小化数据库查询来提高网站性能,但代价是将工作外包给服务器的内存。 如果您的托管服务器足够强大和智能,这应该不是问题。

优化 WordPress 心跳 API

通过在浏览器和服务器之间保持定期连接,WordPress Heartbeat API 允许近乎实时的更新。 API 每 15-60 秒向网络服务器发送一次请求,当收到数据时,它会触发事件(或回调)。

它有一些很棒的功能,例如自动保存帖子、锁定帖子和有关登录到期的通知。 但是,当您以管理员身份登录时,每分钟向服务器发送几个调用可能会导致您的管理面板变慢。

在仪表板、前端和帖子编辑器上,WP Rocket 的免费 Heartbeat Control 插件有助于控制这些 API 请求的频率。 它甚至提供了完全禁用 API 的选项。

禁用获取刷新的片段

WooCommerce 实现了 Get Refreshed Fragments AJAX 查询,以在用户对其进行任何更改时动态刷新购物车的内容。 从用户体验的角度来看,在重新加载时刷新购物车页面似乎是一个绝妙的主意。

但是,它经常会减慢网站的速度,尤其是那些位于共享服务器上的网站。 此外,许多网站不使用此功能。

使用查询监视器删除高资源使用插件

一些 WordPress 插件会消耗您的网络服务器上的大量资源。 它们消耗了服务器上的大部分 CPU 和 RAM。 具有大量连续进程/扫描的插件会降低您的 WordPress 后端速度。

结论

客户需要一个不会降低网站速度的高度互动和个性化的 WooCommerce 商店。 这是因为一个缓慢的网站确实有很高的遗弃率。 此外,高遗弃率等同于较低的收入。 虽然电子商务商店必须提供各种服务和体验来吸引客户,但购物者也期望快速。 今天使用我们久经考验的策略来加速您的网站,以提供丰富、灵活和快速的 WooCommerce 商店。