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 つの異なる予算が設定されています。
- Time to Interactive に 3,000 ミリ秒の予算を設定します。
- First Meaningful Paint に 1,000 ms のバジェット
- ページ上の JavaScript の合計量に対して 125 KB の予算がある。
- ページ全体のサイズに対して 300 KB を割り当てる。
- サードパーティの送信元へのリクエストの数に対する 10 件のリクエストの予算。
サポートされているパフォーマンス指標とリソースタイプの一覧については、Lighthouse のドキュメントのパフォーマンス バジェット セクションをご覧ください。
Lighthouse の実行
--budget-path
フラグを使用して Lighthouse を実行します。このフラグは、予算ファイルの場所を Lighthouse に指示します。
lighthouse https://example.com --budget-path=./budget.json
結果を表示する
LightWallet が正しく構成されていれば、Lighthouse レポートの [Performance] カテゴリ内に [予算] セクションが表示されます。
JSON バージョンの Lighthouse レポートでは、performance-budget
監査の監査結果の中に Lightwallet の結果が表示されます。