利用 A/B 测试来评估网站速度对业务指标的影响。
在过去的几年里，人们已经证明，网站速度性能是用户体验的重要组成部分，改善网站速度对各种业务指标（例如转化率和跳出率）都有益。我们已发布多篇文章和案例研究来支持这一点，包括 Cloudflare 的网站性能如何影响转化率、Deloitte 的 Milliseconds Make Millions 以及 eBay.com 上的 Shopping for Speed，等等。
尽管速度问题显而易见，但许多公司仍难以确定可以提高网站速度的工作优先顺序，因为他们不了解网站速度对他们的用户以及最终业务的影响。
在缺少数据的情况下，很容易就会延迟网站速度，而只能专注于其他任务。常见的情形是，公司中的某些人认识到网站速度的重要性，但无法为此建立案例并说服多个利益相关方进行相应的投资。
本文概要介绍了如何利用 A/B 测试来评估网站速度对业务指标的影响，从而在这方面做出更有效的决策。
第 1 步：选择要进行 A/B 测试的网页
您的目标是测试网页速度与您的业务指标相关的假设。为简单起见，您最初可以将自己限制为仅确定单个页面进行分析。未来的工作可以扩展到相同类型的多个网页来验证发现结果，然后再扩展到网站的其他区域。此步骤的底部提供了一些有关从何处入手的建议。页面选择过程需满足几项要求：
- A/B 测试只能在移动用户设备上运行。在全球范围内，我们协助的合作伙伴网站平均有 50%以上（并且还在增长！）流量来自移动设备，但根据区域和行业，这一比例可能会显著增加。由于处理和内存限制以及网络稳定性较差，移动设备对速度较慢的网站更敏感。此外，随时随地使用模式意味着对速度的期望更高。
您选择用于测试的页面应该是转化漏斗的重要组成部分。每个网站的用途各不相同，因此每个网站跟踪的成功指标也不同。这些指标通常与使用漏斗分析的用户转化历程相关。例如，电子商务网站上的用户需要浏览首页、类别页、产品页和结账页才能完成购买。如果您针对转化进行优化，那么其中一个网页比较适合您。
网页应只有一个用途。除非网站具有非常明确的使命，否则最好不要使用首页进行测试。许多商业网站的首页都是通往各种功能的门户，这会使您的分析变得杂乱无章。例如，如果您要针对新闻网站的每次会话网页浏览量进行优化，那么最好排除网站的非商业部分，而专注于创收版块和报道。
所选网页应该获得足够的流量，这样您就不必等待很长时间就能获得具有统计显著性的结果。
所选页面的速度应该会相对较慢。实际上，越慢越好。这不仅意味着您可以更轻松地改进网页，还意味着数据会更加清晰。您可以快速浏览 Google Analytics（分析）“速度”报告或 Search Console“核心网页指标”报告，了解哪些网页的加载速度最慢。
网页应相对稳定。在测试完成之前，请勿更新网页（任何会影响业务指标的内容）。需要考虑的外部因素越少，分析就越简洁。
以上述内容为指导，应该更清楚地了解哪些页面适合进行测试。广告着陆页也是一个不错的选择，因为您可能有内置的业务指标、A/B 测试和分析功能供您自己使用。如果您仍不确定，请参考下面针对每个行业的一些建议：
- 内容网站：版块、文章
- 店面：类别页、产品页
- 媒体播放器：视频发现/搜索页、视频播放页
- 服务和发现（旅游、租车、服务注册等）： 初始表单输入页面
第 2 步：衡量效果
衡量指标的常用方法有两种：在实验室中衡量和在实际操作中。我们个人发现，测量指标（也称为实时用户监控 [RUM]）更加实用，因为它可以反映真实用户的体验。可帮助您报告 RUM 数据的库和服务示例包括 Perfume、Firebase Performance Monitoring 和 Google Analytics（分析）事件。
由于这些指标旨在捕获用户体验的不同方面，因此您可以从多个指标中进行选择。请注意，您的目标是最终确定速度与业务指标之间是否存在直接关系，因此跟踪一些速度指标可能有助于确定哪个指标与业务成功的相关性最高。一般情况下，我们建议您从核心 Web Vitals 入手。web-vitals.js 库可帮助您衡量现场的一些核心网页指标，不过请注意，浏览器支持并非 100%。 除了核心网页指标以外，其他网页指标也值得一试。您还可以定义自定义指标，如“首次广告点击所用的时间”。
第 3 步：制作速度性能变体
在此阶段，您将实施更改，以创建要针对当前版本进行测试的更快的页面版本。
请注意以下几点：
- 避免对界面或用户体验进行任何更改。除了一个页面比另一个页面更快之外，更改必须对用户不可见。
- 衡量也是此阶段的一个重要方面。在开发过程中，应使用 Lighthouse 等实验室测试工具来表明您所做的更改对性能的影响。请注意，对一个指标的更改通常会影响另一个指标。网页发布后，请务必使用 RUM 以获得更准确的评估。
制作效果变体有多种方式。出于测试目的，您需要尽可能简单地执行此操作。以下是一些选项。
创建速度更快的网页
- 使用 Squoosh 等工具手动优化测试页面上的图片
- 使用开发者工具代码覆盖率，仅针对该网页手动清除未使用的 JavaScript 或 CSS
- 高效加载第三方脚本
- 使用关键等工具拆分并内嵌关键 CSS
- 移除不会影响用户体验的非关键 JavaScript 代码（例如，某些第三方库）在测试时可以不用的代码
- 实现并非所有浏览器都支持的浏览器级延迟加载，但在支持该功能的情况下，仍有可能显著提高性能
- 移除非关键分析代码或异步加载这些代码
如需了解其他要考虑的优化措施，请参阅加载时间短和前端性能核对清单。您还可以使用 PageSpeed Insights 运行 Lighthouse，它可发现性能提升机会。
减慢网页加载速度
这可能是创建变体的最简单方法，可通过添加简单脚本、缩短服务器响应时间、加载较大的图片等来实现。《金融时报》在测试性能如何影响其业务指标时选择了此选项：请参阅更快的 FT.com。
加快网页加载速度
如果测试页面（假设是商品详情页面）大多从其他页面（比如首页）链接到其他页面，那么针对测试组直接从首页预提取或预呈现产品页面，可以加快页面的后续加载速度。请注意，在这种情况下，A/B 测试拆分（第 4 步）是在首页完成的。此外，所有这些因素都可能会拖慢搜索结果呈现速度，因此请务必衡量这一点，并在分析测试结果（第 5 步）时考虑这一点。
第 4 步：创建 A/B 测试
如果同一网页有两个版本速度快，下一步就是拆分流量以衡量影响。一般来说，有许多技术和工具可以执行 A/B 测试，但请注意，并非所有方法都能够很好地衡量速度性能影响。
如果您使用的是 Optimizely 或 Optimize 等 A/B 测试工具，我们强烈建议您设置服务器端测试而不是客户端测试，因为客户端 A/B 测试通常会隐藏网页内容，直到实验加载完成，这意味着 A/B 测试本身会使您想要衡量的指标出现偏差。如果您只能进行客户端测试，不妨考虑在其他网页上设置实验并更改测试页的链接以拆分流量。这样，客户端测试就不会将测试页面本身向下拖动。
通过服务器端测试对指定商品详情页面 (PDP) 的效果变化进行 AB 测试的示例：
请求发往后端，后端会将用户分配到网页的两个不同版本。虽然这通常是一个不错的设置，但通常需要 IT 资源来设置服务器端拆分。
下面是一个客户端测试设置示例，它使用上一页（下图中的首页）来运行测试 JavaScript：
测试 JavaScript 会操纵出站链接，为两个测试组的用户提供指向相关 PDP 的两个版本的链接。此功能可通过优化工具或优化工具等常见的 A/B 测试工具轻松设置和维护，而且不会影响性能测试，因为测试 JavaScript 是在其他网页上运行。
或者，您也可以选择两个行为和效果非常相似的网页（例如，为两个非常相似的商品）。将更改应用于其中某个指标，然后比较一段时间内的指标差异。这意味着您并没有进行正确的 A/B 测试，但仍然能够获得非常有益的参考价值。
如果您的测试页用作广告系列的着陆页，您可以使用广告网络内置的 A/B 测试工具，如 Facebook 广告拆分测试或 Google Ads 草稿和实验。如果无法做到这一点，您可以使用设置相同的两个广告系列，并将不同的着陆页设置为目标。
第 5 步：分析 A/B 测试
在运行测试足够长的时间并获得足够的数据对结果有信心后，您就可以将所有数据整合在一起并运行分析了。具体如何操作取决于测试的运行方式，我们来了解一下这些选项。
如果使用上述工具在广告着陆页上运行测试，分析结果应该与读取结果一样简单。如果您使用的是 Google 的“草稿和实验”功能，请使用 ScoreCard 查看比较结果。
优化工具或优化工具等平台还提供了简便的方法来解读结果并确定速度对网页的影响程度。
如果您使用的是 Google Analytics（分析）或类似工具，则必须自行汇总报告。幸运的是，使用 Google Analytics（分析）可以轻松构建自定义报告，您可以从这里开始。如果您使用自定义维度向 Google Analytics（分析）发送了速度数据，请参阅报告指南，了解如何设置这些数据并将其纳入自定义报告。请确保您的报告涵盖实验的日期，并配置为显示两个变体。此报告应包含哪些内容？
- 主要而言，您需要添加最关心的业务指标：转化次数、网页浏览量、广告浏览次数、转化率、电子商务指标、点击率等。
- 此外，跳出率、平均会话时长和退出百分比这三个标准网页指标也非常适合用来提升网站速度。
您可能还需要针对移动设备进行过滤，并确保排除漫游器流量和其他非用户流量。 更高级的分析还可以按区域、网络、设备、流量来源以及用户个人资料和类型（例如新用户和回访者）进行过滤。每组用户可能对速度较慢的敏感程度可能有所不同，识别这些速度也非常有帮助。
借助 Looker Studio（以前称为“数据洞察”）或其他数据可视化工具，您可以轻松集成各种数据源，包括 Google Analytics（分析）。这样，您就可以轻松进行分析，并创建信息中心，以便与运行现代网站所涉及的众多利益相关方共享，以获得进一步的支持。例如，《卫报》创建了一个自动警报系统，当最近发布的内容超出其页面大小或速度阈值并可能导致用户不满意时，该系统向编辑团队发出警告。
第 6 步：得出结论并确定后续措施
获得将性能与业务指标联系起来的数据后，您可以查看结果并开始得出结论。
如果您可以清楚地看到提高性能与改善业务指标之间的相关性，请汇总结果并在整个公司内报告结果。现在，您可以用“商业语言”谈论速度性能了，这样您就更有可能吸引不同利益相关方的注意力，并将网站速度性能作为大家的共同关注点。下一步是根据结果设置性能预算，并规划好满足这些预算的工作。因为您知道此类工作能带来什么价值，因此您可以相应地确定优先级。
如果您无法确定相关性，请查看以下注意事项，并评估是否应该在网站的其他位置（例如，通过整个购买漏斗或在不同类型的页面上）运行类似的测试。
注意事项
找不到网站速度指标与业务指标之间的显著关联的原因可能有以下几种：
- 所选页面对您所查看的业务指标没有太大的影响。例如，如果结账页非常不友好或速度很慢，则较快的商品页面可能不会对转化率产生重大影响。考虑查看更相关的指标，例如跳出率、添加到购物车率，或与您正在测试的网页更直接相关的任何其他指标。
- 两个版本在速度方面的差异并不明显。应根据您衡量的 RUM 指标进行评估。
- A/B 测试机制存在问题。流量可能未正确分配，或分析数据无法正确报告。为避免这种情况，不妨考虑运行一项 A/A 测试，在该测试中使用相同的测试机制测试网页的同一版本，并确保这样做的结果无差异。
- 网站速度实际上不会影响您的业务指标。这种情况很少见，但在以下情况下可能会发生：您的目标市场对速度不太敏感（例如，网站主要通过网络信号较强的设备访问），或者用户需求非常高且选择有限（例如，专门销售高需求节目门票的票务服务）。请注意，这并不意味着加载速度加快的网站不会改善用户体验，并因此影响品牌声誉。
总结
虽然我们很想针对整个网站启动速度优化措施，但从长远来看，首先了解加快网站速度对您的用户和公司意味着什么通常更有好处。这就是“我们将 FCP 提高了 1.5 秒”和“我们将 FCP 提高了 1.5 秒，将转化率提高了 5%”之间的区别。这样，您就可以确定后续工作的优先级，获得不同利益相关方的认可，并将网站速度提升为整个公司的工作。