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

Katie Hempenius
Katie Hempenius
X

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] カテゴリ内に [予算] セクションが表示されます。

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

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