複数のソースからパフォーマンス データを自動的に収集できる新しいモジュール式ツールです。
AutoWebPerf（AWP）とは
AutoWebPerf（AWP）は、複数のソースからパフォーマンス データを自動的に収集できるモジュール式ツールです。現在、Chrome UX レポート、PageSpeed Insights、WebPageTest など、さまざまな対象（ラボとフィールド）でウェブサイトのパフォーマンスを測定できる多くのツールが提供されています。AWP は、簡単な設定でさまざまな監査ツールを統合できるため、サイトのパフォーマンスを 1 か所で継続的にモニタリングできます。
ウェブに関する指標のガイダンスのリリースにより、ウェブページを緊密かつ積極的にモニタリングすることがますます重要になっています。このツールを支えているエンジニアは、長年にわたってパフォーマンス監査を行ってきました。そして、日常業務のうち、繰り返し発生する手動部分を自動化するために AWP を作成しました。現在、AWP は成熟レベルに達しており、広く共有できるようになっているため、誰もがその自動化のメリットを享受できます。
このツールは、GitHub の AutoWebPerf 公開リポジトリから入手できます。
AWP の目的
ウェブページのパフォーマンスをモニタリングするためのツールや API はいくつかありますが、その多くは特定の時点で測定されたデータを公開します。ウェブサイトを適切にモニタリングし、主要なページのパフォーマンスを良好に保つには、ウェブに関する主な指標を長期にわたって継続的に測定し、傾向を観察することをおすすめします。
AWP では、エンジンと事前構築済みの API 統合が提供されるため、さまざまなパフォーマンス モニタリング API への繰り返しクエリを自動化するようにプログラムを構成できます。
たとえば、AWP では、CrUX API からフィールド データを取得し、PageSpeed Insights の Lighthouse レポートからラボデータを取得する、ホームページの日次テストを設定できます。このデータは、Google スプレッドシートなどに長期にわたって書き込んで保存し、データポータル ダッシュボードで可視化できます。AWP は手間のかかるプロセス全体を自動化するため、研究室や現場のトレンドを経時的に把握するのに最適なソリューションです。詳しくは、後述のデータポータルで監査結果を可視化するをご覧ください。
アーキテクチャの概要
AWP はモジュラー ベースのライブラリで、次の 3 種類のモジュールがあります。
- エンジン
- connector モジュール
- gatherer モジュール
エンジンはコネクタ（ローカル CSV ファイルなど）からテストのリストを取得し、選択した収集ツール（PageSpeed Insights など）でパフォーマンス監査を実行し、結果を出力コネクタ（Google スプレッドシートなど）に書き込みます。
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 UX レポート（CrUX）データを使用して傾向を評価し、潜在的な回帰を発見できることが重要です。なお、Chrome UX レポート（CrUX）は 28 日間の移動集計であるため、すぐに回帰を発見できるように、CrUX と併せて独自の RUM データを使用することをおすすめします。
データポータルは、パフォーマンス指標を簡単に読み込んでトレンドをグラフとして描画できる無料の可視化ツールです。たとえば、以下の時系列グラフは、Chrome UX レポートデータに基づく Core Web Vitals を示しています。グラフの 1 つでは、ここ数週間で Cumulative Layout Shift が増加していることがわかります。これは、特定のページのレイアウトの安定性が低下していることを示しています。このシナリオでは、これらのページの根本的な問題を分析する取り組みを優先する必要があります。
データの収集から可視化までのエンドツーエンドのプロセスを簡素化するには、次のコマンドを使用して、URL のリストを使用して AWP を実行し、結果を Google スプレッドシートに自動的にエクスポートします。
PSI_APIKEY=<YOUR_KEY> SHEETS_APIKEY=<YOUR_KEY> ./awp run sheets:<SheetID> csv:output.csv
スプレッドシートで日次指標を収集したら、スプレッドシートから直接データを読み込み、傾向を時系列グラフにプロットするデータポータル ダッシュボードを作成できます。データソースとしてスプレッドシートを使用してデータポータルで可視化する AWP を設定する詳しい手順については、Google スプレッドシート API コネクタをご覧ください。
次のステップ
AWP は、Core Web Vitals やその他のパフォーマンス指標を測定するための継続的なモニタリング パイプラインを設定する労力を最小限に抑えるためのシンプルで統合された方法を提供します。現時点では、AWP は最も一般的なユースケースに対応していますが、将来的には他のユースケースにも対応できるよう機能をさらに追加していく予定です。
詳細については、AutoWebPerf リポジトリをご覧ください。