我如何与WP Rocket上的WooCommerce上的100个Google PagesPeed移动分数

您的目标是通过WooCommerce商店在Google的PagesPeed Insights上获得完美的100？

在本文中，我将准确地向您展示我们如何使用Femme-fatale.gr（最初在Magento上运行的美容电子购物）实现。当时，移动页面负载花费了5到15秒，尽管35,000个产品目录中有500个产品类别和450个产品属性，但该网站的销售额仍在出血。

我是牛津元数据的创始人Dimitris Vayenas。在过去的三十年中，我一直沉迷于每毫秒的网络性能。 2022年初，我的朋友尼科斯·奥尔法诺斯（Nikos Orfanos）要求我为他的在线商店提供帮助，我们开始工作。

在迁移到WooCommerce并完全专注于速度（使用WP Rocket作为我们的秘密武器）之后，我们以99至100/100分的分数粉碎了移动PagesPagesPagesPagesPagesPagesPagesScores。更重要的是，该网站从停滞不前转变为收入机器。

继续阅读，您将了解我们如何设法获得这样的结果，以及WP Rocket如何帮助我们达到95+的得分，以及最终的调整，将我们推向了一个完美的100。更重要的是，您会发现一旦网站开始加载仅300毫秒，就会发现随后的业务影响。

为什么要专注于性能，尤其是移动

在femme -fatale.gr上，超过90％的购买发生在移动设备上。从第一天开始，这使移动性能成为我们的首要任务。

移动设备是任何网站的最终压力测试。有限的CPU，内存和不稳定的连接也可以使最瘦的页面加载速度慢10倍。这就是每个优化重要的原因。

速度意味着效率。清洁代码，较小的资产和更精简的DOM转化为每个访问者，尤其是在移动设备上的平滑体验。

正如我想说的那样： “如果您的移动体验不是瞬时的，那么每毫秒就会损失真实的钱”。

转折点：从Magento迁移到WooCommerce

2021年12月，尼古斯（Nikos）面临着一个明确的挑战。 “我的商店在锁定期间达到顶峰，每次会议0.81欧元。然后销售额降至每次会议0.15欧元。我们可以回到锁定高点吗？”

我们知道第一步是更改平台。

首先，我们选择了WooCommerce的敏捷现代堆栈。它提供了一个插件和主题创建者的生态系统，这些生态系统涵盖了可以想象的每个功能，以及最大的具有性能的网络工程师社区。

我们于2022年3月上线，没有更改产品数据或增加营销支出。唯一的区别是速度。我们将页面负载从5秒钟降低到仅1到2秒。

这是GTMetrix屏幕截图，显示了从Magento迁移到主页的5.8秒之前的加载时间结果，该类别的7.9秒为7.9秒，在我们仍在开发新网站之前被捕获。

另一方面，这是当前的表现，所有核心网络生命都为绿色：

WooCommerce的速度真正价值是什么？

业务对绩效的影响是不可能忽略的，而且数字使它变得清晰。

在迁移之前，femme -fatale.gr被困在表演车辙中。在Magento上，每月营业额从7,000欧元到10,000欧元不等，大约40,000次会议，平均每节仅0.15欧元至0.20欧元。即使在2020年的锁定峰值期间，交通激增至62,500次会议，最好的表现以每节课0.81欧元。

到2022年2月，就在我们迁移到WooCommerce之前，该网站略有提高到每次会议0.29欧元，但它的潜力仍然很远。

更快的性能的影响是立即的。 2022年3月，即移民后的第一个整个月，尽管暂时下降了，但机器人加热了卡希斯，但每次会议的收入翻了一番，达到0.58欧元。

收益并没有止步于此。到2023年12月，我们匹配了每节课0.81欧元的锁定峰值。如今，这个数字攀升得更高：该网站现在每次访问40,000欧元赚取1.11欧元。

nikos是femme -fatale.gr的所有者，最好：

通过匹配并超过了我们的共同峰，我们证明了速度是我们业务中最大的杠杆。

绩效基础每个WooCommerce网站都需要

在WP Rocket能够发挥其全部性能潜力之前，需要建立坚实的基础。这些早期的决定对我们的结果产生了重大影响，这也是我强烈建议经营WooCommerce商店的任何人：

1. 选择一个性能的主题：我们在解决最佳选择之前测试了数十个主题。 Athemes和Ray主题（基于Elementor）的Botiga （位于Gutenberg）在供应商演示中都获得了90+的得分。有70岁以下的东西吗？我们避免了它。

2. 选择一个真正快速的主机：我们在伦敦，法兰克福，阿姆斯特丹，米兰和斯德哥尔摩等主要地区使用Linode，Vultr和Digitalocean支持的Cloudways 。它为我们提供了一键式的PHP和数据库升级，内置的清漆和Redis以及无缝的移动设备检测。这样可以确保未经间接的API呼叫总是击中优化的内容。我们在三年内的停机时间为零，他们的支持团队出色。
   
   在电子商务中，与您的客户接近是不可谈判的：每个产品查询，购物车更新和库存检查都触及您的来源。在雅典或希腊群岛的购物者，以及没有本地节点的Cloudways，我们必须部署FastPath 。它直接与所有希腊主要的移动运营商和Cloudflare同行，提供了不足的TTFB和真正的本地体验。

3. 与支持供应商的合作：我们选择了提供可靠，快速支持的供应商来回答问题并在您身边进行故障排除，从Athemes和FiboSearch到Welaunch ， Pixel，您的网站， Gravility Forms ， Aioseo和WP Rocket本身。

4. 优化您的内容：我们将所有图像转换为WebP，并将它们组织到基于日期的文件夹中，以确保每个文件夹包含不到10,000个文件。对于字体，我们自托管WOFF2文件并将其子集以仅包括我们需要的字符。这使字体文件大小降低了70％至80％。在本地服务并提前预加载有助于消除外部查找并避免布局变化。

5. 使用手术插件加载并维护数据库卫生：我们使用插件组织器和手动过滤器仅加载每个页面所需的插件。我们还每周清洁瞬态，并为大型WP_Options条目进行自动加载。

WP火箭功能使我们在PagesPeed上达到99/100

基金会成立后，WP Rocket帮助我们提高了速度并迅速取得了出色的性能结果。这些功能在使我们在Mobile上的Google PagesPeed上获得95+分数发挥了关键作用：

• 移动缓存和站点地图预紧力： WP Rocket自动检测移动设备并为其构建专用的缓存。这意味着智能手机用户总是会获得预加载的HTML快照。基于站点地图的预加载器还会在任何缓存清除后立即爬行您的页面，从而消除了第一次访问时经常发生的延迟。
  
• CSS和JS缩小： WP Rocket剥离空格并评论以缩小文件大小。它还可以将JavaScript文件组合为一个，从而减少HTTP请求的数量。对于较慢的网络上的移动用户而言，这尤其重要。  
  
• 删除未使用的CSS（RUCSS）： 与简单的缩小不同，RUCSS分析了您的页面的HTML，并删除了前端从未使用的每个CSS规则。该拆卸的样式表通常会切割数十千字节，因此浏览器的字节更快。我们亲眼目睹了单独促进RUCSS的主页有效载荷200 kb，从而产生了更快的装载页。
  
• 延迟JavaScript执行：分析，聊天工具或第三方小部件之类的脚本通常不需要立即运行。 WP Rocket延迟它们，直到用户滚动，轻按或单击。这使得页面交互式更快，并改善了下一个油漆的互动，以及Page对用户交互的总体响应能力。

启用这些功能后，我们获得了99个移动页面性能得分：

奖金：特殊情况下的WP火箭件附加组件

有时，盒子设置需要一点提高。对于像我们这样的精选设置 - 具有复杂的调度程序，自定义字体规则或不寻常的设备检测 - 我们在咨询WP Rocket高级工程师之后安装了五个免费的WP火箭件：

• 更改RUCSS参数：我们调整了WP Rocket运行的频率和深度删除未使用的CSS。这对于与诸如AutomateWoo之类的插件的兼容是必不可少的，该插件可能会超载任务调度程序。
• 停用WooCommerce推车片段：由于我们的数据库已经进行了优化，因此我们禁用WP Rocket的CART-FRAGMENT CACHE，以进一步加快结帐通话。
• 禁用使用的CSS字体预付：我们使用具有手动预紧规则的自定义自托管WOFF2字体。此附加组件确保了这些规则不会被WP Rocket的自动字体预付。
• 删除HTML到期规则：我们的CDN和服务器已经处理了缓存标头，因此我们删除了WP Rocket的默认HTML HTML到期，以避免冲突。
• 将平板电脑设置为移动设备：我们将平板电脑像移动设备一样处理，以确保它们从移动缓存和响应式优化中受益。这对于依靠WP_IS_MOBILE（）检查的自定义功能很重要。

除了平板电脑插件外，这些附加组件中的大多数仅在高复杂商店中需要。对于典型的电子商务设置，WP Rocket开箱即用。

100/100的秘密：完美懒惰和LCP图像

在Google的PagesPeed Insights上达到99是一个很大的里程碑，但我们不满意。一点点站在我们和完美之间。

首先，我们解决了元素膨胀，这意味着减少页面上的HTML元素数量。 Google惩罚了超过810个DOM元素的页面，我们的菜单，滑块和页脚仅将我们推向了1,000次。

这是我们所做的：

• 懒惰的静态内容：我们推迟了非关键元素，例如标头菜单，产品类别滑块，品牌旋转木马和页脚，直到最初的油漆后。

• 删除了不必要的元素：我们修剪了深层菜单级别，并在移动设备上进行了残疾的小部件区域。这有助于我们在Google的罚款阈值下方获得总数。

即使有一个更清洁的页面，我们仍然无法破解100个。最后一个问题是英雄图像。

最初，它是一个350×622 PX图像，带有叠加层，阴影和文本 - 太复杂了，无法快速加载。我们将其简化为350×350 PX WebP，并使用以下代码优先考虑它：

 add_action('wp_head','ff_preload_mobile_image',1); function ff_preload_mobile_image(){ if(!is_front_page()||!wp_is_mobile()) return; echo '<link rel="preload" as="image" href="/uploads/lcp-simple.webp" importance="high">'; }

这就是通过简化和预上英雄图像的方式，我们从移动设备获得了完美的100/100 PSI得分。

业务影响：速度作为增长引擎

正如我所解释的那样，速度不仅提高了我们的PagesPeed分数。它直接提高了我们的底线。

在优化了性能并利用WP火箭功能之后，我们看到了结果可测量的增长：

• 转化率跃升了33％。

• 每个会议的收入增长了五倍以上，从0.20欧元增加到1.11欧元。

这些结果在移民后的头18个月中转化为额外的384,000欧元的收入。

这些并不是较小的改进。他们匹配并最终超过了我们的峰值锁定性能，证明了现场速度是增长的关键杠杆。

正如我想说的那样： “每毫秒剃光，都为底线增加了真正的欧元。”

企业主的3个实用技巧

如果您经营一家电子商务商店，我想分享一些其他实用技巧可以帮助您充分利用自己的性能工作 - 无论您是否技术上。

1. 跟踪真实用户：使用真实的用户监视（朗姆酒）来关注现场数据。实验室分数很有用，但真正重要的是您的网站对实际访问者的表现方式。只需确保在运行PagesPeed Insights测试时将其禁用，以避免偏斜的结果。
2. 地理位置您的来源：托管您的网站靠近客户。当您的原始服务器靠近受众群体时，从产品搜索到结帐的所有内容都变得更快，更可靠。
3. 靠在WP Rocket上：从默认设置开始。他们会立即自动处理大多数性能问题。一旦基线固定，您可以通过启用一些其他功能来微调调整，例如优化CSS和JS文件。而且，如果您不精通技术，请记住： “更快的网站意味着减少挫败感，更多的销售和更快乐的客户。”

总结

我们从Magento转移到WooCommerce，将我们的移动PagesPeed分数从55提高到了100个，每次会议的收入从0.20欧元提高到1.11欧元。这段旅程清楚地证明了一件事：速度不仅仅是技术里程碑。这是业务增长的真正驱动力。

我们专注于性能，建立了强大的技术基础，并使用WP火箭快速解锁结果。如果您的WooCommerce商店感觉缓慢或表现不佳，那么现在是时候采取行动了。更快的网站意味着您的访客体验更平滑，并为您的业务带来真正的收益。