AutoWebPerf - 智能化网页性能审计框架

2024-05-20 13:19:19作者：韦蓉瑛

AutoWebPerf Logo

AutoWebPerf（AWP） 是一个灵活且可扩展的框架，用于使用像WebPageTest和PageSpeedInsights这样的任意审计工具运行网页性能审计。这个库让开发者能够一致地收集指标，并将数据存储在本地JSON文件、Google Sheets、BigQuery或内部SQL数据库中。

详细信息见：https://web.dev/autowebperf

工作原理

AutoWebPerf从任意数据存储平台（如本地JSON、Google Sheets、BigQuery或自托管SQL数据库）获取测试列表。然后，它基于每个测试配置执行审计，将各个数据源的指标收集到结果列表中。

审计过程通过特定的采集器（Gatherer）定义，与数据输出格式和自动化逻辑解耦。读取和写入数据平台的逻辑则由连接器（Connector）实现。

功能亮点

可插入任何平台的网页审计自动化库，如Google Sheets、GCP App Engine或简单定时任务，记录到JSON文件。
提供定制化频率（每日、每周、每月等）、网络条件和其他审计配置的重复测试能力。
采集器模块设计为独立于输出数据格式和自动化逻辑。
连接器模块设计用于以特定数据格式或平台读取测试列表并写入审计结果，例如针对CSV文件的连接器。

与其他谷歌速度测量工具的对比

AutoWebPerf作为性能审计聚合器，通过多个速度测量工具（包括WebPageTest、PageSpeedInsights和Chrome UX报告）自动化审计过程和指标收集。每个单独的速度测量工具提供审计指标，而AutoWebPerf聚合这些结果，并将其写入您选择的数据存储平台。

快速开始

首先克隆AWP仓库并运行npm install：

git clone https://github.com/GoogleChromeLabs/AutoWebPerf.git
npm install

安装完成后，使用以下命令检查安装是否成功，同时运行一个示例测试：

./awp run examples/tests.json output/results.json

这将会使用examples/tests.json中的测试列表，并将结果写入output/results.json。

要设置重复测试，你需要在测试文件中添加recurring.frequency属性，并使用./awp recurring命令来设定下次触发时间和进行一次性测试。

示例用法

单个URL测试：使用PageSpeedInsights测试单个URL：

./awp run url:https://www.thinkwithgoogle.com/ json:output/results.json

指定采集器：使用指定采集器（如PageSpeedInsights或WebPageTest）测试单一URL：
```
./awp run --gatherers=psi url:https://web.dev json:output/results.json
```
CSV文件测试：运行CSV文件中的测试并把结果写入JSON文件：
```
./awp run csv:examples/tests.csv json:output/results.json
```

更多示例用法，请参阅文档。

可用采集器

WebPageTest - 查看docs/webpagetest.md了解详情。
PageSpeed Insights - 查看docs/psi.md了解详情。
Chrome UX Report API - 查看docs/cruxapi.md了解详情。
Chrome UX Report BigQuery - 查看docs/cruxbigquery.md了解详情。

可用连接器

JSON 连接器 - 读写本地JSON文件。当未指定连接器时，默认使用此连接器。例如：
```
./awp run examples/tests.json output/results.json
```
或者指定测试路径和结果路径使用JSON连接器：
```
./awp run json:/examples/tests.json json:output/results.json
```
CSV 连接器 - 读写本地CSV文件。指定测试路径和结果路径使用CSV连接器：
```
./awp run csv:/examples/tests.csv csv:output/results.csv
```
URL 连接器 - 仅用于生成包含特定URL的单一Test进行审计。使用URL连接器只对Tests路径有效，不适用于Results路径。
Google Sheets 连接器查看docs/sheets-connector.md获取详细指导。

在Node CLI上使用AWP

运行测试

要打印CLI用法，任何时候都可以运行：

./awp --help

要运行测试，可以使用如下的CLI命令和给定的测试JSON文件（如examples/tests.json），其中包含一个测试列表。查看examples/tests.json了解更多关于测试数据结构的信息。

./awp run examples/tests.json output/results.json

这将在给定路径results.json中生成结果对象。

默认情况下，AWP会使用JSON作为默认连接器来读取测试和写入结果。或者你可以为Tests和Results路径指定不同的连接器，格式为<connector>:<path>。

例如，从CSV文件读取测试并在JSON中写入结果：

./awp run csv:examples/tests.csv json:output/results.csv

获取测试结果

对于WebPageTest之类的某些审计平台，每个测试可能需要几分钟才能获取实际结果。对于这种异步审计，每个结果将保持“已提交”状态。你需要稍后明确获取最终指标。

运行以下命令从results.json中获取所有审计平台的最终指标：

./awp retrieve examples/tests.json output/results.json

这将在output/results.json中的Result对象中更新为最终指标。你可以查看examples/results.json了解Result对象的详细信息。

运行周期性测试

如果希望设置周期性测试，可以在Test对象中定义recurring对象，包含frequency。

./awp recurring examples/tests-recurring.json output/results.json

这会在results.json中生成结果对象并更新tests.json中原有的测试对象的nextTriggerTimestamp。例如，更新后的Test对象看起来像这样：

{
  "label": "web.dev",
  "url": "https://web.dev",
  "recurring": {
    "frequency": "Daily",
    "nextTriggerTimestamp": 1599692305567,
    "activatedFrequency": "Daily"
  },
  "psi": {
    "settings": {
      "locale": "en-GB",
      "strategy": "mobile"
    }
  }
}

nextTriggerTimestamp将基于之前的日期更新到下一天，防止同一个测试重复运行，保证每天只执行一次。

设置cron作业运行周期性测试

大多数类Unix操作系统，可以设置cron作业定期运行AWP CLI。

例如，在macOS中，可以使用以下命令设置每天中午12点运行的cron作业。注意这是基于系统时间运行AWP的时间。

# 用文本编辑器编辑cronjob。
EDITOR=nano crontab -e

向crontab添加以下行，用于每日常规运行。请注意，这是基于系统时间运行AWP的。

0 12 * * * PSI_APIKEY=SAMPLE_KEY cd ~/workspace/awp && ./awp run examples/tests.json csv:output/results-recurring.csv

扩展功能

扩展是一个辅助AWP运行带附加处理和计算的测试的模块。例如，budgets扩展可以添加性能预算并计算目标与结果指标之间的差值。

使用扩展运行：

./awp run examples/tests.json output/results.json --extensions=budgets

测试与结果

定义测试

测试列表就是一个测试对象数组，如下所示，或查阅src/examples/tests.js获取详细的测试列表示例。

[
  {
    "label": "Test-1",
    "url": "example1.com",
    "webpagetest": {
      ...
    }
  },
  {
    "label": "Test-2",
    "url": "example2.com",
    "psi": {
      ...
    }
  }
]