使用 AutoWebPerf 自动执行审核

新的模块化工具,支持自动从多个来源收集性能数据。

Gilberto Cocchi
Gilberto Cocchi

什么是 AutoWebPerf (AWP)?

AutoWebPerf (AWP) 是一种 模块化工具,可让您从多个平台中自动收集性能数据, 来源。目前,许多工具 可用于衡量 不同范围(实验和 字段),例如 Chrome 用户体验报告、PageSpeed Insights 或 WebPageTest。AWP 优惠集成 并借助各种审核工具进行简单设置,以便您持续监控 集中衡量网站性能

网页指标指南发布后, 对网页进行主动监控变得越来越重要。通过 这款工具背后的工程师多年来一直在进行性能审核,他们 创建了 AWP,以自动执行手动、重复且耗时的部分工作 。今天,AWP 已经达到了成熟程度,可以 让所有人都能从它带来的自动化中受益。

您可在 AutoWebPerf 公共代码库 。

AWP 的用途是什么?

尽管有几种工具和 API 可用来监控网页性能, 网页,大多数网页都会公开在特定时间衡量的数据。充分 监控网站并保持关键网页的表现良好,建议 持续衡量核心网页指标 Android Vitals 和观察趋势。

AWP 提供引擎和预构建的 API 集成,让这一过程变得更轻松 您可以采用编程方式对其进行配置,以自动执行周期性查询, 各种性能监控 API

例如,借助 AWP,您可以在首页上设置每日测试,以捕获 CrUX API 中的实测数据和实验室数据 从 来自 PageSpeed Insights 的 Lighthouse 报告。 随着时间的推移,这些数据可以写入和存储,例如在 Google 表格,然后在 数据洞察信息中心。 AWP 可自动完成整个流程中繁杂的工作, 解决方案,跟踪实验室和现场趋势随时间的变化情况。请参阅可视化审核 返回数据洞察

架构概览

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

  • 引擎
  • connector 模块
  • gatherer 模块

引擎会从连接器(例如,从 通过所选收集器(例如 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

或者,您也可以设置 crontab 将 AWP 作为日常 cron 作业运行 AWP 的类似 Unix 环境:

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

您可以在以下位置找到更多方法来自动执行日常审核和收集结果: AWP GitHub 代码库

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

除了持续衡量核心网页指标,您还要能够 根据实际用户指标评估趋势并发现潜在的回归问题 或 Chrome 用户体验报告 (CrUX) 数据。请注意, Chrome 用户体验报告 (CrUX) 汇总的是为期 28 天的移动数据,因此建议使用 还可以使用自己的 RUM 数据和 CrUX,以便发现回归问题 加快实施速度。

数据洞察是一款免费的可视化工具,您可以轻松加载 以及以图表形式绘制趋势例如,时间序列图表 根据 Chrome 用户体验报告数据,显示了 Core Web Vitals。其中一个图表 显示 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 提供了一种简单的集成方式,可最大限度地降低设置 持续监控流水线,用于衡量 Core Web Vitals 和其他性能 指标。到目前为止,AWP 涵盖了最常见的应用场景,并将继续 在将来的其他用例中提供更多功能。

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