DE{CODE}：用于构建快速电子商务网站的 6 个 WooCommerce 开发技巧

除了销售额，站点速度可能是电子商务网站最重要的指标。为什么？ 快速电子商务网站获得更多流量、更高转化率、更低跳出率并产生更多回访者。 在本次会议中，WP Engine 高级产品经理 Jeremy Benoit 和工程经理 Catherine Kelly 探讨了开发人员技巧、WP Engine 功能和其他工具，以使您的 WooCommerce 商店更快。

会议幻灯片

全文抄本

JEREMY BENOIT ：大家好，欢迎来到DE{CODE} 2022，这里是电商赛道。 我是 WP Engine 的高级产品经理 Jeremy Benoit，我们在这里讨论提高 WooCommerce 性能的六个技巧。 今天加入我的是我的同事 Catherine Kelly，让我们开始吧。

因此，我将首先分享我们的一位软件工程师 Chris Weigman 的引述。 正如他所说，据谷歌称，如果页面加载速度超过三秒，53% 的用户将离开网站。 这意味着您只有三秒钟的时间让他们获得该产品页面上的所有数据，您发送给他们的所有图像，所有相关信息，所有小部件和广告，它会向您展示我们为什么今天我们谈论速度，因为购物者体验的速度至关重要。

页面速度是加载单个页面的时间，可以通过多种方式进行测量。 两种关键方法是第一个字节的时间，Google PageSpeed Insights 使用的，或全页加载时间或最后一个字节的时间，这通常反映了购物者的体验。 页面速度也会影响您购物网站的转化率，它还会影响您电子商务网站的搜索引擎优化。

速度的一个关键部分是卓越的托管服务，以确保您的购物者体验质量。 在 WP Engine 的计算优化平台上，我们提供增强的电子商务体验，以提高您所有静态或动态购物内容的性能。 我们将在一秒钟内讨论这两种不同的内容类型，因为我们将介绍 6 个提示和技巧。 现在我将把它交给我的同事凯瑟琳。

凯瑟琳·凯利：干杯。 谢谢你，杰里米。 今天我们将介绍与 WooCommerce、其配置和设置电子商务商店相关的六个技巧。 对于一些经验丰富的开发人员来说，这些提示和建议对您来说相当熟悉，但对于一些新手开发人员来说，您可能会获得一些有用的见解。

所以今天我们将介绍 WooCommerce 和缓存、媒体优化、搜索优化、Ajax 购物车片段、自定义订单表和无头速度。 因此，对于第一个，我们要介绍的是 WooCommerce 和缓存。 在我们开始之前，我们想了解您有哪些与缓存相关的不同选项，它是什么，然后我们可以处理我们将如何对其进行改进。

因此，缓存给人的印象是与性能问题相关的圣杯。 事实上，缓存最初的创建与性能无关，而是让计算机对同一个请求一遍又一遍地自动响应，而不是每次都重新计算。 缓存是一种技术，用于临时存储对请求的响应，然后在稍后的时间点将对完全相同的请求的相同响应传递到相同的资源。

所以这有点像那些烦人的孩子中的一个——你的烦人孩子会一遍又一遍地问你同样的问题，每一天，比如为什么，为什么，为什么，你只想给出一个自动的回答。 这可以很好地工作，并且在为静态站点提供静态信息时，您总是会给出相同的响应。 然而，这种方法在电子商务方面不太适用，因为它会在工作中造成麻烦，因为每次提交给服务器的请求并不总是相同的，你必须处理和控制与购物车相关的、同时来自不同用户的不同请求。

您还想记住与客户相关的先前交易，他们的购物车中有什么，您还想记住商店中不再提供的东西，以便购物车可以准确地反映正在为该用户提供的服务。 您还想确保与缓存相关的是您不会将与客户 A 相关的购物车提供给客户 B，并且他们实际上可以看到其他人实际订购的东西，基本上是泄露信息，这是您不希望看到的. 在缓存方面，您可以拥有一个有限的平衡点——当您试图为客户提供个性化的服务以便他们继续访问您的网站时，要做到这一点非常棘手。 所以我们拥有不同级别和类型的缓存——服务器缓存。

服务器缓存通常与任何其他缓存一样。 它基本上是在您构建页面并将其提供给特定请求时服务器上的缓存。 当您站在该服务器旁边并发出请求时，您的响应可能是即时的。 然而，当您在 1,000 公里之外时，就像您的电子商务个人或用户一样，响应可能需要很长时间才能到达他们。

然后你有应用程序缓存。 WordPress 和 WooCommerce 中的应用程序缓存，您可以使用插件来管理它。 W3 Total Cache、WP Rocket 等插件都有管理应用程序内缓存的选项，这些插件基本上存储请求页面的临时版本和服务器上的文件。 这可能是——但是，这可能是一种非常低效的缓存方式，如果您有能力在服务器本身或加速域或 Cloudflare 等服务中缓存，则不应使用这种缓存方式，后者会在全球范围内分发缓存。

然后你有浏览器缓存。 浏览器缓存基本上是最终用户的缓存。 例如，您是否经历过网站上的某些内容，您已经更新，但当您正在开发和审查您的网站时，您不会自动在前端看到它？ 这是因为它已被缓存到实际的浏览器中。 它基本上是该页面或资产的临时版本，存储在您计算机或手机上用户的浏览器中。

它就在那里，因此您不必多次下载相同的页面或资产来加速该页面的显示，当您有一个静态站点时，它再次工作得很好。 但是，当您拥有电子商务网站等动态网站时，我们总是会尝试提供产品、描述和信息。 它可以——它没有你想要的那么有效。

然后你就有了所谓的代理 CDN 缓存。 代理 CDN 缓存是位于您的原始服务器（即开发和呈现第一个原始页面的服务器）和实际用户的浏览器本身之间的缓存。 它是加速域，而 Cloudflare 是一种代理 CDN。 在到达原始服务器之前，所有请求和响应都经过它们的域。

它本质上是一组战略性地分布在全球各地的服务器，目的是加速为您的用户交付静态内容。 因此，当他们在 1,000 英里之外时，就好像他们就站在原始服务服务器旁边一样。 所以它加快了该页面的服务。 一旦您的静态资产缓存在特定位置的所有边缘服务器上，所有后续访问者和对静态信息的请求都会从所谓的边缘服务器而不是原始服务器传递，从而减少负载并提高性能，并提高了可扩展性。

因此，对于提到的静态站点，这一切在一般情况下都非常有效。 但是电子商务缓存在工作中投入了扳手。 而电子商务——工作中存在扳手的原因与您的登录页面、您的购物车、您的结帐、您的愿望清单有关，它们一直在动态更新。 因此，它们不像您在正常网站（例如博客网站）上所要求的那样是静态的。

通常，您可以缓存 GET 请求。 使用 GET 请求，或者顾名思义，请求获取一些资源。 尽管 GET 请求通常可以安全缓存，如前所述，您不希望再次缓存登录页面、购物车和结帐。 您希望始终为客户提供尽可能新鲜的服务，以便它是最新的和准确的。

所以你不想从购物车中交付一些东西而不写——不要用缓存写它。 通常，当您的购物车中有东西时，大多数服务器会完全绕过缓存。 因此，您又回到了从原始服务器而不是 CDN 提供服务的问题。 所以你必须做的是你必须聪明地弄清楚，好吧，我怎样才能从我的 CDN 提供商提供静态元素，但始终应用我实际原始服务器的动态元素，这样一切都是最新的和准确的？

所以要注意的事情——对于服务器缓存，由于是服务器生成网页，服务器缓存可以让它记住整个页面上的部分页面，而不是每次都从头开始生成。 通过浏览器缓存，这有助于浏览器记住网页的外观，因此它不必花时间与服务器交换数据。 如前所述，这对于访问多个页面的访问者很有用，因为可能存在静态文件。 例如，styleSheets、JavaScript 文件都可以存储在浏览器中。

因此，对于缓存方面的最佳实践，始终有选择地缓存 HTML。 基本上，作为第一级，缓存所有内容以充当静态匿名内容——用于静态匿名内容。 然后寻找绕过 cookie 上的缓存并缓存购物车中的所有内容，在您的愿望清单中使用 cookie 绕过缓存的特定元素。 然后始终根据您的 Cloudflare 配置设置您的年龄缓存、您的生存时间。 这应该确保您的缓存始终保持最新状态并与原始来源相匹配。

所以我们从与我们的电子商务客户交谈中了解到的一件事是，这是一个通常开发人员必须自己去解决的问题。 因此，作为我们在 WP Engine 中开发的一部分，我们实际上正在研究一个特定于电子商务的解决方案，该解决方案默认情况下允许提供和安装 WooCommerce，并默认设置所有这些缓存规则。 所以我们缓存所有静态的东西，然后不缓存所有动态的东西，所以它总是新鲜的。 它总是为你不断刷新。 因此，您不会为用户带来购物车碎片化等冲突。

媒体优化——关于将内容从您的服务器传送到您的电子商务网站上的最终用户的另一件重要事情是媒体优化。 首先要考虑的是，什么是媒体优化？ 我们对于它可以做些什么呢？ 我们如何确保客户在浏览和使用他们的网站时拥有快速、有效和动态的体验？

因此，对于图像和视频，它们需要不同类型的优化，再次根据他们实际使用的设备为您的客户提供最佳体验。 所以媒体优化是一个使用最好的工具、先进的策略和实验的过程，因为您总是希望通过实验来提供电子商务网站的性能。 你想要资产优化。 它力求在效率和可靠性之间找到平衡点。

因此，您希望始终以尽可能最快的方式为您的客户提供内容，而不会最终损害您网站的性能。 您希望在最短的时间内提供最好看的内容，方法是考虑可能使用媒体的不同平台和资产，例如笔记本电脑、PC 或移动设备，并且，正如我们进入无头世界，多种不同类型的设备，如电视屏幕、iPad 等，内容也可以从电子商务商店交付和消费。

因此，您要考虑的是改进图像优化以改善网络——网站的性能以吸引更多流量、增加这些转化、为您的店主、您的品牌或您的商家增加收入。 作为网站优化最关键的方面之一，它会影响搜索和优化。 因此，如果您的图像和视频速度很快，那么您实际上会在搜索引擎优化方面获得更好的评价。

优化资产不仅可以使您的产品对潜在客户更具吸引力和可见度，还可以使它们更频繁地出现在搜索结果中，再次是搜索引擎优化。 要记住的关键是查看图像和视频的延迟加载。 延迟加载基本上是一种识别非阻塞或非关键资源并仅在需要时加载这些资源的策略。 因此，内容（基本上是首屏）被加载并优先显示给用户，然后我们延迟所有剩余的渲染，以显示此屏幕下方的所有内容，以便他们向下滚动到任何内容。

这种优化技术允许首先显示——用户将首先看到的图像和内容。 然后我们不会浪费资源下载他们实际上还不会查看和查看的内容。 谷歌本身推荐延迟加载，基本上将其称为延迟屏幕外图像。 然后我会说不要费心加载它。

作为开发人员，您可以根据需要手动标记每张图像或将视频标记为延迟加载。 但正如您可以想象的那样，对于一个电子商务网站，这样做将是一项艰巨的工作。 而且，如果您不习惯手动标记这些图像中的每一个，您可以使用插件来完成。 如果您在 Google 中快速搜索 WordPress 的最佳加载插件，那里有一些推荐使用的最佳插件。

但是对于我们和电子商务，我们建议将它们粘贴到 WP Rocket 中。 它提供了 Adob​​e 延迟加载优化。 您还需要考虑的事情是永远记住您的移动用户。 它们的屏幕和性能更小，因此您无需加载大量图像。 你想缩小规模。

你想对所有图像使用压缩，因为这将节省 40% 的带宽，而且显然加载特定屏幕和文件格式是图像的关键。 例如，JPEG 中有 600 x 600 的图像是 100 KB，PNG 是 216，而 WebP 只有 56 KB。 所以你要非常小心地考虑，好的，我要为所有这些将要提供的图像使用什么文件格式？ 尤其是在电子商务网站上，我可能拥有数千种产品、数千张图像和数百个视频来备份这些图像和内容。

你总是想调整你的图像大小。 您可以查看 Imagify、Youoptimizer、TinyJPG 等在线工具，并查看那些用于在 WordPress 中优化图像的工具。 Imagify 与 WP Rocket 由同一个团队制作，它是一个非常直观的插件，可以使用三种不同类型的级别自动压缩图像——正常、激进和极端。 它允许您定制适合最终用户的图像大小。

还要注意缩略图的大小。 保持它们小，因为它们无论如何都很小。 保持背景简单。 使用 remove.bg 和 Slazenger 等工具删除背景并更新背景以简化它们。 然后使用 CDN 进行更快的全球交付。 同样，对于您的图像，请始终为这些图像附加其他有用的标签。

这有助于 SEO，搜索引擎优化。 并始终确保您的标签确实反映了您的图像或视频的内容。 作为开发人员，有时我们可以使用 RDHD 之类的缩写，或者直接使用 Y 波段。 我们知道那是一顶带黄色带子的红色帽子。 但是 SEO 不会知道那是什么，因此请尝试在图像呈现方面更加真实或语言。

所以视频优化也是如此，使用数据压缩工具。 同样，请记住您的移动用户。 如果可能，将所有内容转换为 HTML5 格式。 对于任何没有声音的视频，请完全删除音频。 没有意义，因为它只会消耗带宽。 再次使用，内容分发网络。 指定您的视频网站，同样关于延迟加载，始终推迟加载这些图像，直到您的页面完全下载。

搜索引擎优化——正如我们所知，搜索优化基本上是一种方法，我们称之为将您的搜索卸载到这方面的专家的特定服务提供商，因为他们可以提高您的搜索效率，从而增加您的商家的销售额和用户。 正如我们所知，默认情况下，WooCommerce 确实带有内置搜索功能。 但它在产品属性、自定义字段和描述的匹配功能方面还有很多不足之处。 它非常慢。 它没有提供良好的用户体验。 归根结底，这是非常无效的。

如果您搜索有关 WooCommerce 的产品搜索，这是一个常见的功能，因为它要么没有像您想要的那样有效。 实际上，您想要做的是拥有一个具有强大容错性的搜索功能，这样它就不会中断客户的旅程。 您希望他们能够拥有强大的查询自动完成功能，并在自然语言处理中获得更好的结果，而 WooCommerce 搜索中缺少所有这些。

然后，您还希望拥有一个围绕综合分析的功能，以便轻松改进报告，这样您就可以实际查看并查看您根据对它的响应、您的客户在搜索什么以及效果如何而构建的搜索的有效性这是否与产品相匹配，然后您可以在配置中做哪些更改以真正帮助实现这一点？ 基本上，帮助您的客户更快地找到他们正在寻找的东西。

那么我们能做什么呢？ 正如我提到的，我们所做的是为了减少搜索体验中的摩擦并帮助客户找到他们想要的东西，我们使用搜索卸载。 所以这是一个基本上由第三方执行的过程。 它改进了 WooCommerce 的搜索功能，因为它与 Woo 集成在一起。 它基本上具有用于根据需要进行过滤的小部件。 它向用户提供结果，这有助于提高品牌信任度。

它具有自动建议功能，您可以配置和定制权重。 您可以为客户提供结果——自定义结果。 正如我提到的，您可以拥有即时自动搜索和搜索分析，这很重要。 如果您不能分析搜索以了解它的有效性，那么进行搜索就毫无意义。 它还有助于微调您的 SEO 集成，以确保客户可以找到他们想要的东西。 当他们去搜索谷歌时，他们会根据您正在寻找的内容在这个特定的网站上进行搜索。

它还有助于发现客户意图并揭示有关客户兴趣的数据。 他们在找什么？ 他们想买什么？ 是什么吸引他们访问您的网站？ 他们在寻找什么？

我们关于搜索的建议是寻找自动完成。 因此，就此提出建议。 并始终启用纠错。 因此，如果有人输入了与产品相关的错误内容，请尽量不要记住。 尝试并始终记住与产品相关的正确拼写或描述。 永远不要，当您在您的网站中启用搜索时，让用户进入死胡同。

总是有一个页面。 即使他们正在搜索您网站上没有的东西，也可以将他们引导到一个页面，上面写着我们目前找不到该特定产品。 请联系我们的销售部门等，我们可以帮助您做到这一点。 这对那个特定用户来说是更好的体验，也会产生对那个客户的信任。

始终优化。 当您根据客户搜索的内容进行分析研究时，针对这些条款进行优化，这样当其他客户回来寻找他们时，他们才能真正发现他们。 在您的所有产品上使用标签、标题和描述。 它们是您搜索的基础。

因此，请确保您的所有数据都是准确的，它反映了产品是什么，并始终尽可能多地描述特定商家网站上的单个产品。 配置您的移动搜索。 容我们说，就网站而言，移动搜索与笔记本电脑搜索略有不同。 只需确保您已在搜索中配置并启用它。 并始终参考您的分析。

在 WP Engine 方面，我们已经与 ElasticPress 合作，基本上，我们认为这是一个高级搜索插件，它会自动默认并作为我们电子商务产品的一部分安装。 它提供所有自动建议、权重、客户结果等等。

现在我已经完成了关于 WooCommerce 的建议和指导的三个技巧，我将把它转回给 Jeremy。 好了，杰里米。 谢谢。

JEREMY BENOIT：另一个需要关注的领域是 AJAX 购物车片段。 AJAX 购物车片段是一段需要的代码。 它以产生延迟、导致服务器峰值和不必要地运行而闻名。 但是 AJAX 购物车片段真的那么糟糕吗？

嗯，它的目的是用新产品、新产品价格、新产品数量更新购物车，计算价格而不强制重新加载页面。 不过，购物车片段代理脚本会在每个页面上运行——主页、产品页面，甚至没有添加到购物车操作的页面。 这可能是您的关于我们页面，甚至是您的联系我们页面。

现在，这种运行或这种执行通常是造成服务器峰值或使用不必要的资源的罪魁祸首，这些资源会中断您网站的性能和购物者的体验。 现在理想情况下，购物车片段 AJAX 应该只在您有添加到购物车操作的地方运行，或者如果您的网站上有一个动态购物车，其中一个操作可用于打开购物车或与购物车动态交互。 那么可以对 AJAX 购物车片段做些什么呢？

好吧，大多数时候，人们像我们一样建议禁用该购物车片段，有两种方法可以禁用 AJAX 购物车片段。 A，您想要添加一个具有购物车片段禁用功能的插件。 有很多插件可以禁用您的购物车片段。 但另一种方法是，如果您熟悉编辑 php，则可以通过编辑主题的 functions.php 文件来禁用购物车碎片。

有一些风险。 当您禁用购物车片段时，某些购物车小部件可能会遇到问题。 因此，您想在禁用购物车小部件后对其进行测试，以确保它们按预期运行。

现在，下一个技巧或技巧是在自定义订单表发布后加以利用。 你可能会问，你是什么意思？ 稍后，在 DE{CODE} 中，您将从 WooCommerce 了解到将于今年晚些时候发布的新自定义订单表。 而 WooCommerce 表是——订单表有一个结构困境。 你们中的许多人都知道，这通常被认为是缩放比例不佳的原因。 但是，在涉及处理产品的交互或处理订单的交互，有时甚至是插件数据时，它也可能成为速度问题。

现在，WooCommerce 使用存储各种数据实体的 post 元表，包括订单和产品，以及一些添加的插件数据，任何时候调用这些实体中的任何一个，它们都会点击同源。 因此，您可以想象通过创建自定义订单表来缓解交通拥堵将增加真正电子商务引擎的 WooCommerce 结构完整性，并提高任何订单活动的速度。 这将是一个很好的支持，特别是对于具有高流量和高订单量的站点，甚至是具有非常大的产品目录的站点。

通过这三种不同类型的表，用于核心订单信息的新核心表，专门用于插件数据的新插件表，以及用于开发人员需要存储的任何类型的自定义元数据的新元表，这将减轻post 元表之前和当前对您的订单交互的瓶颈。 这些表也将有专门的索引，这将有助于加快在每个表中检索这些特定实体的速度。 稍后您将在 DE{CODE} 中听到更多关于自定义订单表的信息。

那么我们来看看第三个提升，headless的速度。 所以这个技巧是无头的，因为无头，无头堆栈，将速度提高几个数量级。 无头基础设施前端的 JavaScript 代码将比传统的 WordPress 基础设施快得多，在某些情况下快 10 倍。 我们甚至有客户在我们的 Atlas 基础设施上看到所有 Lighthouse 指标增长了六倍。

在 WP Engine，我们有一个名为 Atlas 的无头基础设施。 该基础设施允许 - 还有一个称为我们的内容引擎的组件，它大大提高了在您的 WooCommerce 实例中检索各种静态和动态内容的速度。 无头基础架构还允许您自定义后端集成，并为您的 WooCommerce 网站需要集成的第三方应用程序创造闪电般快速优化的机会。 这是我今天的最后一个提示。