使用 AutoWebPerf 自动执行审核

一款新的模块化工具，可自动从多个来源收集性能数据。

Antoine Bisch

Gilberto Cocchi

Jonathan Chen

什么是 AutoWebPerf (AWP)？

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

Web Vitals 指南的发布意味着，密切且主动地监控网页变得越来越重要。此工具背后的工程师多年来一直在进行性能审核，他们创建 AWP 的目的是为了自动执行日常活动中手动、重复且耗时的部分。如今，AWP 已达到成熟的水平，可以广泛分享，让任何人都能受益于它带来的自动化。

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

AWP 的用途是什么？

虽然有多种工具和 API 可用于监控网页的性能，但大多数工具和 API 都会公开在特定时间测得的数据。为了充分监控网站并保持关键网页的良好性能，建议您持续测量核心网页指标，并观察趋势。

AWP 提供了一个引擎和预构建的 API 集成，可以以编程方式进行配置，以自动执行对各种性能监控 API 的重复查询，从而简化了这一过程。

例如，借助 AWP，您可以对首页设置每日测试，以从 CrUX API 中捕获实际数据，并从 PageSpeed Insights 的 Lighthouse 报告中捕获实验室数据。这些数据可以随时间写入和存储，例如存储在 Google 表格中，然后在数据洞察信息中心中进行可视化。 AWP 可自动执行整个过程中的繁重工作，使其成为跟踪实验室和实际趋势的绝佳解决方案。如需了解详情，请参阅下文的在数据洞察中可视化审核结果。

架构概览

AWP 是一个基于模块的库，包含三种不同类型的模块：

引擎
连接器 模块
收集器 模块

引擎从连接器（例如，从本地 CSV 文件）获取测试列表，通过选定的收集器（例如 PageSpeed Insights）运行性能审核，并将结果写入输出连接器（例如 Google 表格）。

AWP 的架构图。

AWP 附带了许多预实现的收集器和连接器：

预实现的收集器：
预实现的连接器：
- Google 表格
- JSON
- CSV

使用 AWP 自动执行审核

AWP 通过您首选的审核平台（例如 PageSpeed Insights、 WebPageTest或 CrUX 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

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

接下来怎么做？

AWP 提供了一种简单且集成的方式，可最大限度地减少设置持续监控流水线以测量核心网页指标和其他效果指标的工作量。目前，AWP 涵盖了最常见的用例，未来将继续提供更多功能来满足其他用例的需求。

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

使用 AutoWebPerf 自动执行审核 使用集合让一切井井有条 根据您的偏好保存内容并对其进行分类。