如何为WordPress设置Cloudflare APO – 将性能提升高达300%插图

对于性能爱好者来说,Cloudflare的APO代表着在最大化WordPress性能方面向前迈出了一大步。

在我们的基准测试中,我们发现在我们的测试站点上启用APO可以将页面加载时间减少70-300%,具体取决于测试位置。

在本文中,我们将深入探讨Cloudflare APO的工作原理以及如何使用它来提高WordPress网站的性能!

  1. 什么是自动平台优化 (APO)?
  2. 边缘的静态HTML
  3. 2022年Web性能状况
  4. Cloudflare的自动平台优化如何工作
  5. 使用高性能托管和Cloudflare APO最大限度地提高WordPress性能
  6. 如何为WordPress使用Cloudflare自动平台优化
  7. 如何确认适用于WordPress的Cloudflare APO是否正常工作
  8. 不使用Cloudflare插件的自动平台优化

什么是自动平台优化 (APO)?

Automatic Platform Optimization(以下简称APO)是Cloudflare提供的一套新的一键式平台定制优化服务。

第一个接受“APO待遇”的平台是WordPress,它是全球最受欢迎的CMS,市场份额超过60%。未来,我们希望看到类似的APO服务适用于其他CMS和平台。

在较高的层面上,Cloudflare的WordPress APO通过两种主要方式提高了网站性能。

  1. WordPress站点页面的静态HTML副本缓存在全球各地的Cloudflare边缘服务器中。
  2. 第三方字体由Cloudflare缓存和提供。

让我们深入了解一下APO在技术层面上的工作方式和原因。

边缘的静态HTML

Cloudflare的APO与其他传统页面缓存和CDN解决方案之间的关键区别在于它能够在Cloudflare的边缘直接缓存静态HTML。为了描绘更清晰的画面,让我们通过从“无优化”到APO的四种不同的WordPress设置。

WordPress设置 #1 – 无页面缓存或CDN

默认情况下,WordPress不提供页面缓存或CDN支持。使用此配置,即使请求之间没有更改页面内容,所有请求也需要由PHP动态生成。

此外,没有内容交付网络 (CDN) 集成意味着所有静态资产(如CSS、JS、图像和字体)都由源服务器提供服务。

这种配置会使WordPress站点变得非常慢,尤其是对于远离源服务器的访问者而言。

WordPress设置 #2 – 没有CDN的页面缓存

实施页面缓存是提高WordPress性能的最佳策略之一。在一些WordPress托管服务器,托管堆栈包括一个高度调整的页面缓存层,由Nginx的FastCGI缓存模块提供支持。

页面缓存极大地减少了源服务器上的CPU负载,因为可以从缓存中提供请求,而无需生成动态HTML。

如何为WordPress设置Cloudflare APO – 将性能提升高达300%插图1

这可以释放您的CPU以专注于其他重要的动态任务,并使您的WordPress网站更加稳定。虽然此配置可能允许您的站点每秒处理更多请求,但它并不能解决“距离问题”。

如果没有合适的CDN,向遥远的访问者提供静态资产仍然是一个问题。

WordPress设置 #3 – 使用CDN进行页面缓存

到目前为止,添加用于提供静态资产的CDN的页面缓存是托管WordPress网站的最高效方式。

在这个模型中,源服务器仍然负责为页面提供实际的HTML。但是,CSS文件、图像和字体等静态资产被卸载到世界各地的各种CDN存在点 (PoP)。该模型背后的想法是静态资产,尤其是大图像,构成请求页面大小的大部分. 因此,通过将资产卸载到更靠近访问者的服务器,可以减少加载时间并提高性能。

如何为WordPress设置Cloudflare APO – 将性能提升高达300%插图2

使用CDN的全球流量路由

虽然此配置比前两个配置提供了显着改进,但它确实让您想知道如果WordPress性能不再因必须从源服务器提供HTML而成为瓶颈,会发生什么。

令人惊讶的是,在为WordPress引入Cloudflare的APO之前,这样的设置是不可行的——至少对于非技术用户来说是不可行的。

WordPress设置 #4 – 适用于WordPress的Cloudflare APO

Cloudflare APO是世界上最新的WordPress性能优化解决方案。与之前受源站服务器性能限制的WordPress设置不同,启用APO的站点从访问者的角度来看基本上变得“无源”。

如何为WordPress设置Cloudflare APO – 将性能提升高达300%插图3

使用Cloudflare APO进行全球流量路由

为此,Cloudflare利用其全球分布的CDN以及Workers/Workers KV来创建您的WordPress站点的静态HTML表示。我们将在本文后面深入了解Cloudflare APO的工作原理。

现在,只要知道启用了APO的兼容WordPress站点不再受制于来源引起的延迟。换句话说,来自美国、德国和日本的访问者的请求将由附近的数据中心而不是您的源服务器提供服务。

2022年Web性能状况

在过去的几年里,专业的Web开发行业发生了很大的变化。越来越多的开发人员正在从WordPress这样的单体架构转向更灵活和高性能的静态站点生成器,比如Hugo和JavaScript框架,比如Gatsby。

我们明智地使用“性能”一词,因为Web性能通常可以被解释为一个主观指标。

例如,页面的加载时间可能会根据测试位置和一天中的时间而波动。

因此,一味地说Gatsby静态网站比WordPress网站快是没有任何意义的,直到建立了一些论证的上下文。

在当今高度连接的世界中,Web性能测试最重要的环境之一是世界不同地区的加载时间。

这就是静态网站在性能方面优于WordPress的地方。默认情况下,静态站点可以直接上传到全球分布的CDN——这使得它们在全球范围内快速传播,无需任何额外工作。

由于WordPress站点需要某种类型的源服务器来生成HTML,因此它无法直接利用Netlify、Vercel和Cloudflare自己的Workers Sites等平台进行无摩擦的全球交付。从业务角度来看,这意味着您可能会失去远离原始服务器的潜在访问者和客户,因为Google在生成搜索结果时会考虑页面速度。

这就是Cloudflare的WordPress APO发挥作用的地方。

如何为WordPress设置Cloudflare APO – 将性能提升高达300%插图4

启用Cloudflare APO将WordPress性能提高了300%

Cloudflare的WordPress自动平台优化是对2022年WordPress性能意味着什么的彻底重新思考。正如我们之前提到的,在我们的测试站点上启用APO可将加载时间从70%减少到300%,具体取决于测试位置。这是可能的,因为APO有效地消除了作为性能瓶颈的源服务器。

Cloudflare的自动平台优化如何工作

使用Cloudflare APO,您的WordPress站点的HTML缓存在Cloudflare的全球边缘服务器中。这可以通过Workers KV实现,这是一种分布式键值数据库服务,具有超快的全局传播(不到60秒)。

当数据通过Cloudflare API写入Workers KV时,它会在几秒钟内自动复制到全球150多个Cloudflare数据中心。

这使得Workers KV成为加速WordPress网站的主要候选者,因为文章和页面可以很容易地用键值机制表示——URL是“键”,HTML页面内容是“值”。

如何为WordPress设置Cloudflare APO – 将性能提升高达300%插图5

在Cloudflare Workers KV中存储为键值对象的网页

为您的WordPress站点启用APO后,对您站点的大多数请求将不再访问您的源服务器。

相反,请求将从本地Cloudflare CDN缓存(如果缓存页面存在)或Workers KV(如果缓存页面在Cloudflare的CDN上不存在)提供。

如果CDN缓存或Workers KV数据库中不存在页面,则Cloudflare将向您的源服务器发出单个请求并缓存新页面的HTML。

这里的神奇之处在于Cloudflare Workers KV充当您的源服务器的某种分布式镜像。回想一下,存储在Workers KV中的数据会在Cloudflare的整个服务器网络中自动复制。

这意味着即使您运行WordPress的源服务器位于美国某处,来自日本的访问者的请求也不需要访问您的源服务器来启动本地CDN缓存区域。

相反,来自日本的访问者将获得来自附近Cloudflare数据中心的Workers KV数据库或CDN缓存的缓存HTML。

这种新的交付模型与以前为WordPress缓存HTML页面的尝试大不相同。 

以前,最流行的“整页缓存”方法涉及创建Cloudflare页面规则来“缓存所有内容”。虽然这种方法可以显着提高性能,但它并不是一种非常有效的缓存方法,因为它依赖于“拉”模型而不是Workers KV的“推”模型,后者会自动在全球范围内推送HTML。

通过上一页基于规则的设置,访问美国Cloudflare缓存区的访问者不会为其他位置的访问者缓存资产——这意味着从全球内容交付的角度来看,网站无法有效利用Cloudflare的网络。

自动平台优化通过缓存第三方字体更进一步。在许多情况下,字体最终会占据页面请求大小的很大一部分。

与通常从根域提供的CSS、JS和图像不同,字体通常来自第三方服务,如Google Fonts。这意味着Cloudflare等基于代理的缓存服务无法缓存字体和提供字体。

由于APO由Cloudflare Worker(位于源服务器和访问者之间的可编程JavaScript服务工作者)提供支持,因此可以注入额外的逻辑来完成基本缓存之外的任务。

在这种情况下,APO使用Cloudflare Worker来缓存第三方字体并使用内联CSS修改页面的HTML,以指向Cloudflare CDN上的缓存字体。这消除了获取字体的额外外部请求的需要,并减少了服务页面所需的连接数量和加载时间。

最后,由于APO通过WordPress插件与您的站点集成,因此每当您更新站点上的页面时,都会自动清除Cloudflare缓存。这可确保访问者始终能够看到您网站的最新版本,而无需任何人工干预。

使用高性能托管和Cloudflare APO最大限度地提高WordPress性能

然而,Cloudflare APO并不是灵丹妙药。选择以性能为中心的WordPress主机仍然非常重要,主要有两个原因。

  1. Cloudflare APO仅缓存未登录用户的前端页面。与服务器级页面缓存配置类似,APO不会缓存具有特定cookie和已登录用户的页面。这意味着原始服务器性能仍然是等式的关键部分。
  2. 出色的WordPress体验不仅仅包括快速的前端性能。由于WordPress本质上是一个动态CMS,因此在运营WordPress网站时需要考虑许多因素。

这里有四个用例展示了为什么即使您使用Cloudflare APO仍应选择高性能WordPress主机。

1. WooCommerce, Easy Digital Downloads和电子商务

当检测到某些与电子商务相关的cookie时,Cloudflare APO会选择性地绕过缓存。例如,当访问者在WooCommerce网站上将商品添加到购物车时,WordPress会自动设置woocommerce_items_in_cart cookie。当检测到此cookie时,APO会绕过缓存以避免缓存和提供客户特定的数据。因此,即使启用了自动平台优化,WooCommerce和其他基于WordPress的电子商务平台仍将严重依赖原始服务器的性能。

2. WordPress仪表盘性能

由于Cloudflare APO不会为登录用户缓存HTML,因此在WordPress仪表盘中导航将始终完全依赖于您的源服务器性能。如果您没有使用性能优化的主机,那么在您的WordPress网站上编写和发布内容、管理图像和其他媒体资产以及运行维护例程等任务可能会变成非常缓慢的体验。这会对您的业务成果产生直接的负面影响。

3. WordPress会员网站和论坛

如果您使用Ultimate Membership Pro之类的插件来管理您的WordPress会员网站,或者使用bbPress来支持WordPress论坛,Cloudflare APO将无法优化您的大部分流量。由于会员网站和论坛通常需要用户登录,Cloudflare APO将自动绕过这些用户的HTML缓存。因此,使用高性能主机仍然是WordPress会员网站和论坛保持快速用户体验的最佳方式。

4. WordPress Cron作业

WordPress cron (WP-Cron)可帮助您在WordPress网站上安排和自动化后端任务。您的站点可能会使用cron作业在特定时间发布文章。像这样的简单任务在CPU资源方面不需要太多,但其他任务可能会占用更多资源。例如,使用备份插件每12小时自动将您的WordPress站点备份到ZIP存档之类的任务会占用更多CPU。

由于Cloudflare APO仅有助于优化前端内容,因此您仍需要将站点托管在高性能主机上,以最大限度地提高后端任务的性能和登录用户体验。

如何为WordPress使用Cloudflare自动平台优化

既然我们已经讨论了为什么Cloudflare WordPress自动平台优化会改变游戏规则,那么让我们来看看如何将服务添加到您的WordPress网站。

APO适用于Cloudflare免费和付费计划。对于免费的Cloudflare用户,需要额外支付5美元/月的APO费用。如果您在Cloudflare上使用Pro、Business或Enterprise计划,则可以免费启用APO。

以下是开始使用Cloudflare APO所需的操作:

  1. 在Cloudflare仪表盘中创建API令牌。
  2. 安装官方Cloudflare WordPress插件。
  3. 启用自动平台优化。

1. 创建Cloudflare API令牌

在启用APO之前,您需要先生成API令牌并安装Cloudflare WordPress插件。要生成API令牌,请单击Cloudflare仪表盘右上角的个人资料图标,单击“My Profile”,选择“API Tokens”选项卡,然后单击Create Token

如何为WordPress设置Cloudflare APO – 将性能提升高达300%插图6

创建Cloudflare API令牌

在“API Token Templates”下,单击WordPress选项旁边的Use Template

如何为WordPress设置Cloudflare APO – 将性能提升高达300%插图7

选择WordPress API令牌模板

“WordPress”模板将生成一个具有必要权限的API令牌,以允许自动平台优化正常运行。默认设置是您开始使用APO所需的全部,但如果您需要将API令牌锁定到特定用户或区域,请随意调整“Account Resources”和“Zone Resources”设置。

完成令牌参数配置后,向下滚动并单击Continue to Summary

如何为WordPress设置Cloudflare APO – 将性能提升高达300%插图8

配置Cloudflare API令牌参数

最后,单击Create Token以完成该过程。

如何为WordPress设置Cloudflare APO – 将性能提升高达300%插图9

确认Cloudflare API令牌的创建

请务必将API令牌复制到安全位置。稍后安装Cloudflare WordPress插件时将需要它。将API令牌记录在密码管理器等安全位置后,请随时关闭页面。

如何为WordPress设置Cloudflare APO – 将性能提升高达300%插图10

在安全的地方记录您的Cloudflare API令牌

2. 安装Cloudflare WordPress插件

Cloudflare WordPress插件可以直接从WordPress插件库安装。要找到它,请在WordPress仪表盘中搜索“Cloudflare”。请务必安装官方Cloudflare插件,而不是“WP Cloudflare Super Page Cache”,这是第一个搜索结果。

 

如何为WordPress设置Cloudflare APO – 将性能提升高达300%插图11

安装官方Cloudflare WordPress插件

接下来,转到WordPress仪表盘侧边栏中的设置 > Cloudflare,然后单击“Sign in Here”。

如何为WordPress设置Cloudflare APO – 将性能提升高达300%插图12

登录您的Cloudflare帐户

输入与您的Cloudflare帐户关联的电子邮件地址以及您之前生成的API令牌。单击Save API Credentials以完成登录过程。

如何为WordPress设置Cloudflare APO – 将性能提升高达300%插图13

输入您的电子邮件地址和Cloudflare API令牌

现在Cloudflare WordPress插件已全部设置完毕,让我们前往Cloudflare仪表盘以启用自动平台优化。

3. 在Cloudflare中启用自动平台优化

Cloudflare Pro、Business和Enterprise计划中包含WordPress的自动平台优化,无需额外费用。如果您使用免费的Cloudflare计划,则APO附加组件每月5美元。要启用APO,请转到Cloudflare仪表盘中的Speed > Optimization

如何为WordPress设置Cloudflare APO – 将性能提升高达300%插图14

要启用APO,请导航到Speed > Optimization

向下滚动到“Optimized Delivery”部分,并启用“Automatic Platform Optimization for WordPress”。如果您使用的是免费计划,Cloudflare将在此期间提示您提供账单详细信息。启用APO后,您应该会看到一条消息“WordPress plugin successfully detected on [your domain]”。如果您没有看到此消息,我们建议您重新安装Cloudflare插件或联系Cloudflare支持以获得进一步帮助。

如何为WordPress设置Cloudflare APO – 将性能提升高达300%插图15

在Cloudflare仪表盘中为WordPress启用自动平台优化

在您的WordPress仪表盘中,转到侧栏中的设置 > Cloudflare。单击“Apply Recommended Cloudflare Settings for WordPress”旁边的Apply按钮——这将优化您的WordPress的Cloudflare设置最后,确保在插件设置中也启用了“Automatic Platform Optimization”。

如何为WordPress设置Cloudflare APO – 将性能提升高达300%插图16

Cloudflare WordPress插件设置

如何确认适用于WordPress的Cloudflare APO是否正常工作

此时,Cloudflare自动平台优化应该在您的站点上处于活动状态!以下是确认APO是否正常工作的方法。首先,确保为您的WordPress站点的域启用了Cloudflare的DNS选项卡中的橙色云。如果未启用橙色云,Cloudflare将不会为您的域代理流量——这意味着APO将无法正常工作。

如何为WordPress设置Cloudflare APO – 将性能提升高达300%插图17

确认Cloudflare橙色云已启用

如何使用浏览器检查器检查Cloudflare APO缓存状态

接下来,您可以使用Web浏览器的内置检查器检查对您网站的请求的HTTP标头。我们将在下面的示例中使用Google Chrome。首先,在隐身模式下启动一个新的浏览器窗口。

如何为WordPress设置Cloudflare APO – 将性能提升高达300%插图18

在Google Chrome中启动一个新的隐身窗口

接下来,转到您的WordPress站点,右键单击该页面,然后选择“Inspect”以打开浏览器检查器。您还可以通过转到Chrome更多按钮菜单栏中的更多工具 > 开发者工具来访问检查器单击对您的域的请求(下例中的brianwp.com)。在子菜单中,单击“Headers”以显示HTTP响应标头。

如何为WordPress设置Cloudflare APO – 将性能提升高达300%插图19

使用浏览器检查器检查Cloudflare缓存状态

启用APO后,您应该会看到一些与APO相关的标头。

  • cf-apo-via指示从何处提供请求。此标头有几个可能的值——“origin, no-cache”、“origin, bypass”和“cache”。如果您看到此标头的“origin, no-cache”值,则表示源服务器已向Cloudflare发送了“Cache-Control: no-cache”标头。“origin, bypass” 值表示Cloudflare的HTML缓存被绕过,请求是从源端提供的。最后,“cache”值表示请求是从Cloudflare的缓存中提供的。
  • cf-cache-status指示页面是否从Cloudflare的CDN提供。刷新页面几次后,您应该会看到“HIT”状态。如果您的cf-cache-status标头在几次刷新后显示“DYNAMIC”,则可能是由于配置错误或与cookie相关的不兼容而绕过了APO。
  • cf-edge-cache根据来自您的原始服务器的缓存指令指示页面的缓存兼容性。此标头有两个可能的值——“no-cache”和“cache, platform=wordpress”。当使用Cloudflare WordPress插件正确配置APO时,此标头将为不应缓存的页面返回“no-cache”,为可缓存的页面返回“cache, platform=wordpress”。
  • age表示页面在Cloudflare的CDN中缓存的秒数。

如果您在检查WordPress站点时看到上面的标头,则表示APO已全部设置。现在,继续进行速度测试,看看您的网站有多快!

如何使用curl检查Cloudflare APO缓存状态

您还可以在终端中使用下面的curl命令确认Cloudflare APO是否正常工作。请注意,该命令传递了一个“Accept: text/html”标头。这是检查APO缓存状态时所必需的。

curl --request GET -I -H "Accept: text/html" https://www.website.com

运行命令后,您应该会看到如下所示的响应标头列表。如您所见,cf-cache-statuscf-apo-viacf-edge-cacheage标头显示请求由Cloudflare的缓存提供服务。

如何为WordPress设置Cloudflare APO – 将性能提升高达300%插图20

使用curl检查Cloudflare APO缓存状态

不使用Cloudflare插件的APO自动平台优化

Cloudflare建议将自动平台优化与官方Cloudflare WordPress插件一起使用。这也是我们建议的方法,因为它可以确保您从APO中获得最大的性能优势。如果您的网站与Cloudflare WordPress插件不兼容,我们建议您与开发人员合作以使您的网站兼容。

如果您真的无法安装Cloudflare插件,则可以在没有插件的情况下使用APO。如果您选择这条路线,您仍然可以利用一些性能优化,但有几个重要的限制需要注意。

带有WordPress插件的Cloudflare APO

安装Cloudflare WordPress插件后,自动平台优化提供以下HTML边缘缓存功能。

  • 具有30天TTL的HTML边缘缓存。
  • 文章发布或更新后30秒内缓存失效。
  • 为登录用户绕过HTML缓存。
  • 绕过某些cookie(如WooCommerce)的HTML缓存。
  • 如果可以从Cloudflare的CDN提供页面,则跳过对源服务器的请求。这减少了源服务器上的负载。

没有WordPress插件的Cloudflare APO

如果未安装Cloudflare WordPress插件,您可能会看到以下APO HTML边缘缓存功能。

  • 具有30天TTL的HTML边缘缓存。
  • 缓存在30分钟内失效(而不是30秒)
  • 绕过某些cookie(如WooCommerce)的HTML缓存。
  • 为了提供正确的缓存失效逻辑,仍然需要向源服务器发出请求。

如您所见,将自动平台优化与官方Cloudflare WordPress插件一起使用有几个优点。

小结

WordPress的Cloudflare自动平台优化无疑是近期历史上提升WordPress性能的最重要服务。它超越了通常的Web服务器优化、服务器端页面缓存和CSS/JS缩小策略,并呈现了一些全新的东西。

自成立以来,WordPress一直受到以下事实的限制:在CDN上缓存HTML页面没有一种简化且简单的方法。通过利用其由150多个数据中心、Workers和Workers KV组成的网络,Cloudflare在WordPress站点和采用尖端框架设计的静态站点之间拉平了性能竞争环境。

这是一项不小的壮举,我们期待看到Cloudflare在未来如何将其自动平台优化功能扩展到其他CMS平台。

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。