使用 AutoWebPerf 自动执行审核

一种新的模块化工具,可以从多个来源自动收集效果数据。

Gilberto Cocchi
Gilberto Cocchi

什么是 AutoWebPerf (AWP)?

AutoWebPerf (AWP) 是一款模块化工具,支持从多个来源自动收集性能数据。目前,可以使用多种工具来衡量不同范围(实验室和现场)的网站性能,例如 Chrome 用户体验报告、PageSpeed Insights 或 WebPageTest。AWP 只需简单设置即可与各种审核工具集成,以便您在一个位置持续监控网站性能。

网页指标指南的发布意味着,密切主动监控网页变得越来越重要。该工具背后的工程师多年来一直在执行性能审核,他们打造了 AWP,以自动执行日常活动中那些需要手动执行且耗时耗力的部分。如今,AWP 已达到一定的成熟度,已准备好广泛共享,因此任何人都可以从它带来的自动化功能中受益。

您可以在 GitHub 上的 AutoWebPerf 公共代码库中访问该工具。

AWP 的用途

尽管有多种工具和 API 可用于监控网页的性能,但其中大多数都会公开在特定时间测量的数据。为了充分监控网站并保持关键网页的良好效果,建议您随着时间的推移持续衡量核心网页指标并观察趋势。

AWP 提供引擎和预构建的 API 集成,您可以通过编程方式对其进行配置,以自动执行针对各种性能监控 API 的周期性查询,从而更轻松地实现上述目的。

例如,借助 AWP,您可以在首页上设置每日测试,以便从 CrUX API 捕获实测数据,并从 PageSpeed Insights 中的 Lighthouse 报告捕获实验室数据。 系统可以不断地写入和存储此类数据,例如在 Google 表格中,然后在数据洞察信息中心直观呈现这些数据。AWP 可自动完成整个流程中繁重繁重的部分,因此是持续跟踪实验室和现场趋势的理想解决方案。如需了解详情,请参阅下文的在数据洞察中直观呈现审核结果

架构概览

AWP 是一个基于模块化的库,包含三种不同类型的模块:

  • 引擎
  • connector 模块
  • gatherer 模块

该引擎会从连接器(例如,从本地 CSV 文件)中获取测试列表,通过所选收集器(例如 PageSpeed Insights)运行性能审核,并将结果写入输出连接器(例如,Google 表格)。

AWP 架构图。

AWP 附带许多预先实现的收集器和连接器:

使用 AWP 自动执行审核

AWP 通过您的首选审核平台(如 PageSpeed InsightsWebPageTestCrUX API)自动执行性能审核。AWP 可让您灵活地选择在何处加载测试列表,以及将结果写入何处。

例如,您可以对存储在 Google 表格中的一系列测试运行审核,并使用以下命令将结果写入 CSV 文件:

PSI_APIKEY=<YOUR_KEY> SHEETS_APIKEY=<YOUR_KEY> ./awp run sheets:<SheetID> csv:output.csv

周期性审核

您可以每天、每周或每月定期运行审核。例如,您可以对本地 JSON 中定义的测试列表运行每日审核,如下所示:

{
  "tests": [
    {
      "label": "web.dev",
      "url": "https://web.dev",
      "gatherer": "psi"
    }
  ]
}

以下命令从本地 JSON 文件中读取审核测试列表,在本地机器上运行审核,然后将结果输出到本地 CSV 文件:

PSI_APIKEY=<YOUR_KEY> ./awp run json:tests.json csv:output.csv

如需每天作为后台服务持续运行审核,您可以改用下面的命令:

PSI_APIKEY=<YOUR_KEY> ./awp continue json:tests.json csv:output.csv

或者,您可以在类似于 Unix 的环境中设置 crontab,将 AWP 作为每日 Cron 作业运行:

0 0 * * * PSI_APIKEY=<YOUR_KEY> ./awp run json:tests.json csv:output.csv

您可以在 AWP GitHub 代码库中找到更多方法来自动执行每日审核和结果收集。

在数据洞察中直观呈现审核结果

除了持续衡量核心网页指标之外,您还必须能够通过 AWP 收集的真实用户指标 (RUM) 或 Chrome 用户体验报告 (CrUX) 数据评估趋势和发现潜在回归问题。请注意,Chrome 用户体验报告 (CrUX) 是一个 28 天移动汇总报告,因此建议您同时将自己的 RUM 数据与 CrUX 结合使用,以便尽早发现回归问题。

数据洞察是一款免费的可视化工具,您可以轻松地将性能指标加载到其中,并以图表的形式绘制趋势。例如,下面的时间序列图表根据 Chrome 用户体验报告数据来显示核心网页指标。其中一个图表显示最近几周内 Cumulative Layout Shift 有所增加,这意味着某些页面的布局稳定性有所下降。在这种情况下,您需要优先考虑分析这些网页的根本问题。

数据洞察中 Core Web Vitals 结果的屏幕截图。

要简化从数据收集到可视化的端到端流程,您可以运行包含网址列表的 AWP,并使用以下命令将结果自动导出到 Google 表格:

PSI_APIKEY=<YOUR_KEY> SHEETS_APIKEY=<YOUR_KEY> ./awp run sheets:<SheetID> csv:output.csv

在电子表格中收集每日指标后,您可以创建一个数据洞察信息中心,用于直接从电子表格加载数据,并在时间序列图表中绘制趋势图。查看 Google 电子表格 API 连接器,了解有关如何使用电子表格作为数据源来设置 AWP,以在数据洞察中直观呈现的详细步骤。

后续操作

AWP 提供了一种简单且集成的方法,可最大限度地减少设置持续监控流水线以衡量核心网页指标和其他性能指标的工作量。目前,AWP 涵盖了最常见的用例,未来将继续提供更多功能以解决其他用例的问题。

如需了解详情,请参阅 AutoWebPerf 代码库。