このページは Cloud Translation API によって翻訳されました。

AutoWebPerf による監査の自動化

複数のソースからパフォーマンスデータを自動的に収集できる新しいモジュラーツール。

Antoine Bisch

Gilberto Cocchi

Jonathan Chen

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 のアーキテクチャの図。

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 つのグラフは、ここ数週間の累積レイアウトシフトの増加を示しています。これは、特定のページのレイアウトの安定性が低下していることを意味します。このシナリオでは、これらのページの根本的な問題を分析する作業に優先順位を付ける必要があります。

データの収集から可視化までのエンドツーエンドプロセスを簡素化するには、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 リポジトリをご覧ください。