AutoWebPerf
1.0.0
AutoWebperfは、WebPagetestやPageSpeedInsightsなどの任意の監査ツールでWebパフォーマンス監査を実行するための柔軟でスケーラブルなフレームワークを提供します。このライブラリにより、開発者はメトリックを一貫して収集し、メトリックをローカルJSONファイル、Googleシート、BigQuery、または社内のSQLデータベースなどの優先データストアに保存できます。
はじめにhttps://web.dev/autowebperfをご覧ください。
AutoWebperfは、ローカルJSON、Googleシート、BigQuery、自己ホストのSQLデータベースなど、任意のデータストアプラットフォームからテストのリストを撮影します。テストのリストを使用すると、各テスト構成に基づいて監査を実行し、個々のデータソースからメトリックを収集して結果のリストに収集します。
測定ツール（WebPagetestなど）を介して監査を実行するプロセスは、個々の集まりで定義されています。データプラットフォーム（Local JSONなど）を使用した読み書きの論理は、コネクタに実装されています。
src/connectors/csv-connectorを参照してください）AutoWebperfは、WebPagetest、PagesSpeedInsights、Chrome UXレポートなどの複数の速度測定ツールを使用して、パフォーマンス監査とメトリックコレクションのプロセスを自動化するパフォーマンス監査アグリゲーターとして機能します。個々の速度測定ツールが監査メトリックを提供するため、AutoWebperfは結果を集計し、ローカルJSON、クラウドベースのデータベース、GoogleSheetsなどの優先データストレージプラットフォームに書き込みます。
まず、クローンAWPリポジトリとNPMインストールを実行します。
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プロパティを含めて、テストファイルに次のトリガーを設定する必要があります。次のトリガー時間をセットアップし、1回限りのテストを実行するには、 recurring.frequencyプロパティをテストに追加した後、このコマンドを使用してください。
./awp recurring examples/tests-recurring.json output/results.json
これが成功した場合、トリガー時間は選択した頻度のベースを更新し、結果がoutput/results.jsonに書き込まれていました。
トリガー時間が正しく設定されたら、次のTriger時間でテストをcontinueコマンドで自動実行できます。
./awp continue examples/tests-recurring.json output/results.json
これにより、指定された頻度で各テストが自動的に実行されます。詳細については、以下の「Run Recurring Tests」セクションを以下にご覧ください。
単一のURL： PagesPeedInsightsを介して単一のURLをテストするには：
./awp run url:https://www.thinkwithgoogle.com/ json:output/results.json
選択者を選ぶ： PagesSpeedInsightsや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
PagesPeedInsights API： APIキーを使用してPagesPeedInsightsテストを実行するには：
PSI_APIKEY=SAMPLE_KEY ./awp run examples/tests.json output/results.json
WebPageTest API： WebPageTestテストを実行するには：
WPT_APIKEY=SAMPLE_KEY ./awp run examples/tests-wpt.json output/results.json
オーバーライドvs.追加：テストを実行し、出力ファイルに既存の結果をオーバーライドする
./awp run examples/tests.json output/results.json --override-results
./awp run examples/tests.json output/results.json
または、 TestsパスとResultsパスにJSONコネクタを使用して指定するには、
./awp run json:/examples/tests.json json:output/results.json
TestsパスとResultsパスにCSVコネクタを使用することを指定するには： ./awp run csv:/examples/tests.csv csv:output/results.csv
Testを生成します。特定のURLを使用して1つのTestで監査を実行するには： ./awp run url:https://example.com csv:output/results.csv
このコネクタは、 Resultsパスではなく、 Testsパスでのみ動作することに注意してください。
CLI使用量を印刷するために、いつでも以下を実行できます。
./awp --help
テストを実行するには、 examples/tests.jsonのテストJSONを使用して次のCLIコマンドを実行できます。これには、テストの配列が含まれています。テストのデータ構造については、 examples/tests.jsonを確認できます。
./awp run examples/tests.json output/results.json
これにより、 results.jsonへの指定されたパスで結果オブジェクトが生成されます。
デフォルトでは、AWPは、読み取りテストと執筆結果の両方のデフォルトコネクタとしてJSONを使用します。または、 <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の結果オブジェクトを更新します。結果オブジェクトの詳細については、 examples/results.jsonをご覧ください。
繰り返しテストを設定する場合は、そのテストのfrequencyを含むrecurringオブジェクトを定義できます。
./awp recurring examples/tests-recurring.json output/results.json
これにより、 results.jsonで結果オブジェクトが生成され、次のトリガー時間をtests.jsonの元のテストオブジェクトに更新します。たとえば、更新されたnextTriggerTimestampを使用して、更新されたテストオブジェクトが次のようになります。
{
"label": "web.dev",
"url": "https://web.dev",
"recurring": {
"frequency": "Daily",
"nextTriggerTimestamp": 1599692305567,
"activatedFrequency": "Daily"
},
"psi": {
"settings": {
"locale": "en-GB",
"strategy": "mobile"
}
}
}
nextTriggerTimestampは、以前のタイムスタンプに基づいて翌日に更新されます。これは、同じテストで繰り返される実行を防ぎ、このテストが1日に1回のみ実行されることを保証するためです。
ほとんどのUNIXのようなオペレーティングシステムでは、CRONジョブを設定してAWP CLIを定期的に実行できます。
たとえば、MacOSでは、次のコマンドを実行して、AWPで毎日のCronジョブを設定できます。
# Edit the cronjob with a text editor.
EDITOR=nano crontab -e
正午の12:00に毎日走るために、クロンタブに次の行を追加します。これは、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": {
...
}
}]
各Testオブジェクトは、 gatherers Propertyを定義することにより実行する監査を定義します。たとえば、最初のTestには、WebPagetest監査の実行の構成を定義するwebpagetestプロパティがあります。 2番目のTestには、PagesPeedInsights監査を実行する方法を定義するpsiプロパティがあります。
テストを実行した後、以下のようにResultsのリストが生成されます。各Resultには、WebPagetestやPageSpeedInsightsなどの事前定義されたgatherersに対応するメトリックが含まれています。以下の例を参照してください。
[{
"label": "Test-1",
"url": "example1.com",
"webpagetest": {
"metrics": {
FirstContentfulPaint: 900,
...
}
}
}, {
"label": "Test-2",
"url": "example2.com",
"psi": {
"metrics": {
FirstContentfulPaint: 900,
...
}
}
}]
一部のコネクターまたはギャザーは、APIキーやサービスへのパスなど、1つ以上の環境変数を必要とする場合があります。たとえば、Crux API Gathererで実行するには、Crux APIキーが必要です。
CLIの環境変数を渡すには、環境の定期的な使用でコマンドを実行します。
CRUX_APIKEY=<YOUR_KEY> ./awp run url:https://wev.dev/ json:output/results.json
AWPは次の監査集団をサポートしています。詳細については、対応するドキュメントをご覧ください。
WebPagetest Gathererは、パブリックWebPageTestエンドポイントまたはカスタムプライベートWebPagetestインスタンスのいずれかを通じてテストを実行します。
WebPagetest Gathererの使用については、詳細については、docs/webpagetest.mdを参照してください。
PagesSpeed Insights Ghatryerは、PaperSpeed Insights APIを通じてテストを実行します。
PSI Gathererの使用については、詳細については、docs/psi.mdを参照してください。
Crux API Gathererは、Chrome UXレポートAPIを介してパフォーマンスメトリックを収集します。
Crux API Gathererの使用については、詳細については、docs/cruxapi.mdを参照してください。
Crux BigQuery Gathererは、Chrome UXレポートを通じてパブリックGoogle BigQueryプロジェクトを通じてパフォーマンスメトリックを収集します。 Public BigQueryテーブルを照会するために、Google Cloudプロジェクトをセットアップする必要があることを確認してください。
Crux API Gathererの使用については、詳細については、docs/cruxbigquery.mdを参照してください。
AWPは、WebPagetest、PagesPeedInsights、またはその他のツールで監査を実行するためのモジュール、JSON、GoogleSheets、Cloud Serviceなどのデータプラットフォームからデータを読み書きするためのモジュールを含むモジュールを使用して設計されています。
高レベルのビューには、3つのタイプのモジュールがあります。
AWPエンジンは、監査を実行し、メトリックを収集するために2つの主要なJavaScriptオブジェクト構造を使用しています。
examples/tests.jsonを参照できます。examples/results.jsonを参照できます。WebPagetestのような非同期監査ツールを扱うために、AWPは監査サイクルを3つのアクションに分けます。
Testsのリストを取得し、 Resultsオブジェクトのリストを生成します。Testsのリストを取得し、 Resultsのリストを生成し、各繰り返しTestの次のtriggertimestampを更新します。このアクションは、Cron Jobなどの定期的またはタイマーベースのタスクで実行する場合に役立ちます。Retrievedステータスにない場合にメトリックを収集します。モジュールとその構成をセットアップするには、JavaScriptオブジェクトとして全体的なAWP構成が必要です。
AWP構成には、次の必要なプロパティがあります。
connector ：コネクタの名前。helper ：APIハンドラーやその他のヘルパー機能を含む特定のコネクタのヘルパー。これは、ギャラーズやエクステンションで使用されます。dataSources ： webpagetestやpsiなどの監査ソースの配列。各データソースにはsrc/gatherersフォルダーに対応するGathererファイルが必要です。extensions ：拡張機能の配列。各拡張子にはsrc/extensionsに対応する拡張ファイルが必要です。その他のオプションプロパティ：
verbose ：冗長なメッセージを印刷するかどうか。debug ：デバッグメッセージを印刷するかどうか。次の構成例はexamples/awp-config.jsからのものです。
{
connector: 'JSON',
helper: 'Node',
dataSources: ['webpagetest'],
json: { // Config for JSON Connector.
tests: 'tests.json',
results: 'results.json',
},
extensions: [
'budgets',
],
budgets: { // Config for Budgets extension.
dataSource: 'webpagetest',
},
verbose: true,
debug: false,
}
上記の例を使用すると、テストと結果をJSONファイルとして読み取り、書き込むJSONコネクタを使用します。 examples/tests.jsonおよびexamples/results.jsonを参照してください。
基本的な特性に加えて、モジュールで使用されるいくつかの追加のプロパティがあります。
jsonプロパティ。budgetsプロパティは、予算セクシェンスの構成としてAWPの新しいインスタンスを作成する例：
let awp = new AutoWebPerf({
connector: 'JSON',
helper: 'Node',
dataSources: ['webpagetest'],
extensions: extensions,
json: { // Config for JSON connector.
tests: argv['tests'],
results: argv['results'],
},
verbose: verbose,
debug: debug,
});
すべてのテストを送信するには：
awp.run();
フィルターを使用して特定のテストを送信するには：これにより、ID = 1および選択された= Trueプロパティを持つテストが実行されます。
awp.run({
filters: ['id="1"', 'selected'],
});
保留中のすべての結果を取得するには、ステータスでフィルタリング！== "取得"。
awp.retrieve({
filters: ['status!=="Retrieved"'],
});
src/utils/pattern-filter.jsをチェックしてください。定期的なテストを実行するには：
// This will run the actual audit and update the nextTriggerTimestamp.
awp.recurring();
特定の拡張機能でテストを実行するには：
// This will override the extension list defined in the awpConfig.
awp.run({
extensions: ['budgets']
})
Gathererクラスはsrc/gatherers/gatherer.jsを拡張し、次の方法をオーバーライドします。
constructor(config, apiHelper, options) ：
config ：AWP構成にこの集会者の名前を含むプロパティで定義された構成。 WebPageTestやPageSpeedInsightsなどの一部の監査ツールには、APIキーが必要です。 GathererのAPIキーは、 config.apiKeyにあります。options ： verboseやdebugなどの追加設定。 run(test, options) ：
test ：この監査実行のTestオブジェクト。この収集者に必要なデータ（設定やメタデータなど）は、Gathererの名前が付いたプロパティにあります。たとえば、WebPageTestのデータは、このTestオブジェクトのwebpagetestになります。options ：追加設定。 retrieve(result, options) ：
result ： Resultメトリックを取得する結果。この収集者に必要なデータは、集団の名前が付いた施設にあります。たとえば、データとメトリックは、このResultオブジェクトのwebpagetestになります。options ： verboseやdebugなどの追加設定。コネクタクラスはsrc/connectors/connector.jsを拡張し、次の方法をオーバーライドします。
constructor(config, apiHandler) ：
config ：AWP構成にこのコネクタ名を持つプロパティで定義された構成。apiHandler ：API呼び出しの作成に使用されるAPIハンドラーインスタンス。 getConfig() ：コネクタの追加構成オブジェクトを返す方法。この構成オブジェクトは、このコネクタがギャザー用のAPIキーを含む追加の設定を保存する場所に依存します。たとえば、jsonConnectorはtests.jsonを使用し、各ギャザーのAPIキーを含むconfigプロパティから追加の設定を読み取ります。
getTestList(options) ：アレイとしてTestsのリストを返す方法。
updateTestList(newTests, options) ：新しいTestsのリストを与えられたTestsリストを更新する方法。
getResultList(options) ： Resultsのリストを配列として返す方法。
appendResultList(newResults, options) ：現在のResultsリストの最後に新しいResultsを追加する方法。
updateResultList(newResults, options) ：現在のResultsリストに既存のResultsを更新する方法。
拡張クラスはsrc/extensions/extension.jsを拡張し、次の方法をオーバーライドします。
constructor(config) ：config ：AWP構成にこの拡張子の名前を持つプロパティで定義された構成。beforeRun(context) ： Testの実行ステップを実行する前のメソッド。context.test ：対応するTestオブジェクト。afterRun(context) ： Testの実行ステップを実行した後のメソッド。context.test ：対応するTestオブジェクト。context.result ：対応するResultオブジェクト。beforeAllRuns(context) ：実行ステップを実行する前のメソッド。context.tests ：この実行中のすべてのTestオブジェクト。afterAllRuns(context) ：実行ステップを実行した後のメソッド。context.tests ：この実行中のすべてのTestオブジェクト。context.results ：この実行中のすべてのResultオブジェクト。beforeRetrieve(context) ： Resultのために取得ステップを実行する前のメソッド。context.result ：対応するResultオブジェクト。afterRetrieve(context) ： Resultのために取得ステップを実行した後のメソッド。context.result ：対応するResultオブジェクト。beforeAllRetrieves(context) ：取得ステップを実行する前の方法。context.result ：対応するResultオブジェクト。afterAllRetrieves(context) ：取得ステップを実行した後の方法。context.result ：対応するResultオブジェクト。標準のTestオブジェクトには、次のプロパティが含まれています。
（例については、 examples/tests.jsonを参照できます。）
selected ：このTestの実行を実行するかどうか。label ：このTestの名前。url ：監査へのURL。recurring ：定期的な監査の設定。frequency ： src/common/frequency.jsで定義された周波数文字列。例：「毎日」、「毎週」、または「毎月」。集会者固有の設定は、採集者の名前が小文字で、自分の財産にあります。たとえば、 webpagetestsの設定は次のとおりです。
webpagetestsettings ：オブジェクトの設定には、監査の場所、接続などが含まれます。metadata ：メタデータオブジェクトには、WebPageTestsのID、JSON URLなどが含まれています。標準のResultオブジェクトには、次のプロパティが含まれています。
selected ：このResultの取得を実行するかどうか。id ：このResultの自動生成一意のID。type ： SingleまたはRecurring監査。status ： Submitted 、 RetrievedまたはError 。詳細については、 src/common/status.jsを参照してください。label ：このResultの文字列ラベル。このラベルは、元のTestオブジェクトから継承されます。url ：監査されたURL。createdTimestamp ：このResultが作成されたとき。modifiedTimestamp ：このResultが最後に変更されたとき。AWPで使用されるすべてのメトリック名は、ケースに敏感な名前に従うために必要です。 src/common/metrics.jsの標準化されたメトリックの完全なリストを参照してください
タイミングメトリック
TimeToFirstByteFirstPaintFirstMeaningfulPaintFirstContentfulPaintVisualCompleteSpeedIndexDOMContentLoadedLoadEventTimeToInteractiveTotalBlockingTimeFirstCPUIdleFirstInputDelayLargestContentfulPaintリソースサイズ
HTMLJavascriptCSSFontsImagesVideosリソースカウント
DOMElementsConnectionsRequestsリソーススコア
PerformanceProgressiveWebApp主要関数のすべてのソースコードは、 srcフォルダーにあります。ファイルは次のサブフォルダーに編成されます。
common ：ステータス、頻度、メトリックなどの一般的なクラスと定義。connectors ：コネクタクラス。extensions ：拡張クラス。gatherers ：集まりのクラス。utils ：ユーティリティとツール。 次のコマンドを実行して、ユニットテストを実行します。
npm test
個々のテスト仕様を実行するには、Jest NPMモジュールをローカルマシンにインストールできます。
npm install -g jest
jest test/some-module.test.js
ユニットテストは、JESTユニットテストフレームワークに基づいています。すべてのユニットテストは、 ./test Testフォルダーに配置されており、 srcフォルダーと同じ構造として、独自のサブフォルダーに編成されています。
