複数のソースからパフォーマンス データを自動的に収集できる新しいモジュール式ツール。
AutoWebPerf（AWP）とは
AutoWebPerf（AWP）は、複数のソースからパフォーマンス データを自動的に収集できるモジュール式のツールです。現在、Chrome ユーザー エクスペリエンス レポート、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 リポジトリをご覧ください。
データポータルで監査結果を可視化する
ウェブに関する主な指標を継続的に測定することに加えて、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 リポジトリをご覧ください。