使用 AutoWebPerf 自动执行审核

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

Gilberto Cocchi
Gilberto Cocchi

什么是 AutoWebPerf (AWP)?

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

网页指标指南的发布意味着对网页进行密切和主动监控变得越来越重要。此工具背后的工程师多年来一直在进行性能审核,他们创建了 AWP 来自动执行日常中耗时的手动工作。如今,AWP 已达到成熟阶段,可以广泛共享,让所有人都能受益于它带来的自动化功能。

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

AWP 有什么用途?

虽然有多个工具和 API 可用于监控网页的性能,但其中大多数工具和 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 代码库中找到更多自动每日审核和结果收集的方法。

在数据洞察中可视化审核结果

除了持续衡量 Core Web Vitals 之外,您还必须能够根据 AWP 收集的真实用户指标 (RUM) 或 Chrome 用户体验报告 (CrUX) 数据来评估趋势并发现潜在的回归方式。请注意,Chrome 用户体验报告 (CrUX) 是 28 天移动汇总数据,因此建议您将自己的 RUM 数据与 CrUX 搭配使用,以便更快发现回归问题。

数据洞察是一款免费的可视化工具,您可以轻松将效果指标加载到图中,并以图表形式绘制趋势。例如,下方的时间序列图表显示了基于 Chrome 用户体验报告数据的核心网页指标。其中一个图表显示,过去几周的累计布局偏移值有所增加,这意味着某些网页的布局稳定性出现了回归。在这种情况下,您应优先分析这些网页的根本问题。

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

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

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

在电子表格中收集每日指标后,您可以创建一个 Data Studio 信息中心,以便直接从电子表格加载数据,并将趋势绘制到时间序列图表中。请参阅 Google 表格 API 连接器,详细了解如何将 Google 表格作为数据源设置 AWP,以便在 Data Studio 中进行可视化。

后续操作

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

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