パフォーマンス予算にLighthouseを使用する
— 更新済み
Appears in: 読み込み時間の高速化
現在 Lighthouseは、performance budgetをサポートできるようになりました。この機能であるLightWalletは、5分以内にセットアップでき、パフォーマンスメトリックとページリソースのサイズと量に関するフィードバックを提供します。
Lighthouseをインストールします #
LightWalletは、Lighthouse v5 +のコマンドラインバージョンで使用できます。
開始するには、Lighthouseをインストールします。
npm install -g lighthouse
Budgetを作成する #
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つの個別のbudgetを設定します。
- 3000ミリ秒であるTime to Interactiveのbudget
- 100ミリ秒であるFirst Meaningful Paintのbudget
- 125KBであるページ上のJavaScriptの合計量のbudget
- 300KBであるページ全体のサイズのbudget
- 10リクエストであるサードパーティのオリジンに対して行われたリクエストの数に対するbudget
サポートしたパフォーマンスメトのリクスとリソース種類の完全なリストについては、LighthouseドキュメントのPerformance Budgetsセクションを参照してください。
灯台を実行します #
--budget-path
フラグを使用してLighthouseを実行します。このフラグは、Lighthouseにbudgetファイルの場所を通知します。
lighthouse https://example.com --budget-path=./budget.json
結果を確認します #
LightWalletが正しく構成されている場合、LighthouseレポートにはPerformance カテゴリ内のBudgetsセクションが含まれます。

LighthouseレポートのJSONバージョンでは、Lightwalletの結果は、 performance-budget
監査の監査結果内にあります。