Lighthouse でパフォーマンス バジェットがサポートされるようになりました。LightWallet として知られるこの機能は、5 分未満で設定でき、パフォーマンス指標、ページリソースのサイズと量に関するフィードバックを提供します。
Lighthouse をインストールする
LightWallet は、Lighthouse v5 以降のコマンドライン バージョンで利用できます。
始めに、Lighthouse をインストールします。
npm install -g lighthouse
予算の作成
budget.json
という名前のファイルを作成します。このファイルに次の JSON を追加します。
[
{
"path": "/*",
"timings": [
{
"metric": "interactive",
"budget": 3000
},
{
"metric": "first-meaningful-paint",
"budget": 1000
}
],
"resourceSizes": [
{
"resourceType": "script",
"budget": 125
},
{
"resourceType": "total",
"budget": 300
}
],
"resourceCounts": [
{
"resourceType": "third-party",
"budget": 10
}
]
}
]
この例の budget.json
ファイルでは、5 つの個別の予算を設定しています。
- 操作可能になるまでの時間の予算が 3,000 ミリ秒。
- First Meaningful Paint のバジェットは 1,000 ミリ秒
- ページ上の JavaScript の合計量に対する予算は 125 KB です。
- ページの全体的なサイズの予算は 300 KB です。
- サードパーティ オリジンに対して送信されるリクエスト数の予算が 10 リクエスト。
サポートされているパフォーマンス指標とリソースタイプの一覧については、Lighthouse のドキュメントのパフォーマンス バジェットのセクションをご覧ください。
Lighthouse を実行する
--budget-path
フラグを使用して Lighthouse を実行します。このフラグは、予算ファイルの場所を Lighthouse に伝えます。
lighthouse https://example.com --budget-path=./budget.json
結果を表示する
LightWallet が正しく設定されている場合、Lighthouse レポートの [Performance] カテゴリ内に [Budgets] セクションが表示されます。
Lighthouse レポートの JSON 版では、Lightwallet の結果が performance-budget
監査の監査結果に含まれています。