Lighthouse を使用してパフォーマンス バジェットを設定する

Katie Hempenius
Katie Hempenius

Lighthouse でパフォーマンス バジェットがサポートされるようになりました。LightWallet と呼ばれるこの機能は 5 分以内に設定でき、パフォーマンス指標、ページ リソースのサイズと量に関するフィードバックを提供します。

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 レポートの [パフォーマンス] カテゴリに [予算] セクションが表示されます。

Lighthouse レポートの [予算] セクション

JSON バージョンの Lighthouse レポートでは、Lightwallet の結果は performance-budget 監査の監査結果に表示されます。