複数のソースからパフォーマンス データを自動的に収集できる新しいモジュラー ツール。
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 種類のモジュールがあります。
- エンジン
- コネクタ モジュール
- 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 レポートのデータに基づくウェブに関する主な指標を示しています。1 つのグラフは、ここ数週間の累積レイアウト シフトの増加を示しています。これは、特定のページのレイアウトの安定性が低下していることを意味します。このシナリオでは、これらのページの根本的な問題を分析する作業を優先する必要があります。
データの収集から可視化までのエンドツーエンド プロセスを簡素化するには、URL のリストを使用して AWP を実行し、次のコマンドを使用して結果を Google スプレッドシートに自動的にエクスポートします。
PSI_APIKEY=<YOUR_KEY> SHEETS_APIKEY=<YOUR_KEY> ./awp run sheets:<SheetID> csv:output.csv
スプレッドシートに日次指標を収集したら、スプレッドシートからデータを直接読み込み、トレンドを時系列グラフにプロットする Data Studio ダッシュボードを作成できます。スプレッドシートをデータソースとして AWP を設定し、データポータルで可視化する方法について詳しくは、Google スプレッドシート API コネクタをご覧ください。
次のステップ
AWP は、Core Web Vitals などのパフォーマンス指標を測定するための継続的なモニタリング パイプラインのセットアップに必要な労力を最小限に抑えることができる、シンプルで統合された方法です。現時点では、AWP は最も一般的なユースケースに対応していますが、今後は他のユースケースに対応する機能も提供される予定です。
詳細については、AutoWebPerf リポジトリをご覧ください。