以下是如何使用 Cloudflare Workers 作为反向代理和 WebpageTest 测试核心 Web Vitals 分数和代码更改。
能够对网页代码进行战术编辑并提高核心 Web 指标得分的最佳方法之一是设置比较，例如 A/B 测试。作为开发人员，您可以在本地开发环境中运行 Lighthouse 并在进行更改时进行测试。它对于测试生产代码仍然很有用，即使您不是开发人员，您也必须这样做。
去年 12 月，我们在SMX Build：面向开发人员的 SEO 中的核心 Web Vitals 站点诊所中使用了一个漂亮的演示堆栈。我们将在即将举行的 SMX 大师班培训中继续使用它，从现在开始，我们将在我们的面向开发人员的 SEO 系列帖子中继续使用它。
以下是如何使用 Cloudflare Workers 作为反向代理和 WebpageTest 测试 Core Web Vitals 分数和代码更改。所有这些服务都是免费的，我们当然不是第一个使用它们的人。WebpageTest开发人员Patrick Meenan想出了这一切。我们将概述如何轻松入门。
Cloudflare 和 WebpageTest
Cloudflare Workers 应用程序为我们提供了反向代理测试平台和使用代理环境的转换代码。虽然 cloudflareworkers.com 上有一个游乐场，但该地址上的碎片化 URL 使我们无法在没有 Cloudflare 帐户的情况下进行测试（免费帐户可用）。您不需要 WebpageTest 帐户。
拥有 Cloudflare 帐户后，导航到 Workers 并单击“创建服务”按钮以创建新的 Worker。这将填充一个示例 JavaScript Worker，其中包含一个 UI 编辑器，您可以使用“快速编辑”按钮访问该编辑器。您创建的每个 Worker 都会获得一个唯一的 URL。您可以随时重命名它。为此，我们在https://sel.deckart.workers.dev上设置了一个。
如果您浏览，请注意“x-host 标头”要求。该要求将请求限制为测试。我们使用浏览器扩展来修改请求，添加所需的 x-host 标头，以便为脚本提供我们要测试的主机。让我们在浏览器中修改请求，以便我们可以查看页面、查看源代码并运行 DevTools。
使用 ModHeader 导航测试
我们将使用支持主流浏览器的ModHeader。在我们的例子中，我们安装了 Chrome 扩展程序并添加了两个自定义标头，如下所示。x-host 标头提供了我们想要代理进行测试的主机，x-bypass-transform 标头打开和关闭转换，以便我们可以测试差异。
将 x-bypass-transform 设置为“true”值后，转换将关闭。然后，我们可以查看源代码以寻找要测试的策略。如上所示，在 x-host 标头到位后，您可以导航到工作器 URL，并且您应该能够看到 Search Engine Land 的主页、查看其源代码并打开 DevTools。
设置你自己的 Worker
工作器的工作是获取标头值并相应地处理请求。我们将在下面总结该脚本，省略一些目前不重要的细节。
- 使用 x-host 标头值的代理 URL。
- 转换字符串中带有“text/html”的接受标头值的请求。
- 当 x-bypass-transform 标头值为真时，绕过转换。
- 当 x-bypass-transform 标头缺失或值为 false 时转换 HTML。
如果您曾经编写过条件控制流代码块，那么这些任务应该很容易想象自己用 JavaScript 编写。那么更有趣的问题是：我们将如何转换 HTML？这就是 HTMLRewriter() 的魔力所在。复制基本工作器要点，并用原始源代码替换您的默认工作器。
设置 WebpageTest 进行比较
基本工作脚本仅执行一次转换。在预加载 LCP 图像时，我们将其请求在队列中增加了几个位置。这使得移动 LCP 加载时间从 5 秒以上缩短到 4 秒以内，大约缩短了 500 毫秒。为了重现这一点，我们的脚本需要跟上变化。重点是让您为 SEO for Developers 和您自己的工作做好准备。
现在我们可以在浏览器中进行 A/B 更改，那么我们如何使用WebpageTest来获得分数之间的差异呢？我们将 LCP 元素引用作为详细瀑布图的一部分，这是我们查看战术更改效果的最有用的地图。我们查看请求顺序并计划更改资源加载的顺序以提高速度。
我们的起点是使用 URL（而不是反向代理）进行 WebpageTest。这是因为 Cloudflare Worker URL 与原始主机提供商的条件不同。例如，主机可能使用较旧的 HTTP/1.1 协议运行，而 Cloudflare 在其服务中升级到 HTTP/2。第一个 WebpageTest 报告应用于制定策略。
接下来，我们将在 WebpageTest 上运行脚本测试，以提供使用反向代理 URL 对我们的更改进行 A/B 测试所需的自定义标头。为了模拟 Core Web Vitals 条件，WebpageTest 有一个易于查找的按钮。在初始测试中使用它没问题。您需要在后续测试中编辑设置，而 Core Web Vitals 按钮页面没有用于此的 UI。
相反，使用默认主页测试并将原始 URL 放在测试输入字段中。更改浏览器下拉菜单以选择“Motorola G (gen 4)”。打开“高级设置”对话框，将“连接”下拉菜单更改为选择“4G (9 Mbps, 170ms RTT)”。单击“高级”选项卡并查找“自定义标头”字段，我们将在其中添加以下标头。
我们目前不会绕过转换，因此我们将值设置为 false。继续前进，我们必须编写测试脚本，以便 WebpageTest 忽略我们在测试字段中输入的https://searchengineland.com，而是从我们的反向代理中获取，这是必需的，以便测试可以正确交换基本 HTML 文档中的主机。切换到脚本选项卡并添加以下内容。
设置好 Cloudflare 后，您将需要替换所有 URL 字符串以匹配您自己的测试。运行脚本测试后，您将能够获得详细的请求队列，其中包含时间安排和足够多的细节，可以制定策略来改进大多数网页的核心 Web 生命力。大多数网页都很容易代理，但您的情况可能会有所不同。
我们为何关心
核心网页指标是 Google 用户体验排名因素之一。除了优化页面标题之外，它可能不是提升排名的最有效方法。Google 曾表示，它会根据您的得分来提高您的排名。他们表示，您不需要所有指标都获得良好分数才能享受这一好处。您的最佳分数是 90 分以上，一旦达到门槛，更高的 90 分并不比 90 分本身更好。
脚本测试前的 LCP 分数
