パフォーマンス予算にLighthouseを使用する

Jun 14, 2019 — 更新済み Apr 3, 2020

Available in: English, Español, Português, Русский, 中文, and 한국어

Appears in: 読み込み時間の高速化

Katie Hempenius

TwitterGitHubGlitchHomepage

現在　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監査の監査結果内にあります。