Skip to content
概要 ブログ 学習する 探検 パターン Case studies
このページ内
  • Lighthouseをインストールします
  • Budgetを作成する
  • 灯台を実行します
  • 結果を確認します
  • Home
  • All articles

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

Jun 14, 2019 — 更新済み Apr 3, 2020
Available in: English、Español、Português、Русский、中文、한국어
Appears in: 読み込み時間の高速化
Katie Hempenius
Katie Hempenius
TwitterGitHubGlitchHomepage
このページ内
  • Lighthouseをインストールします
  • Budgetを作成する
  • 灯台を実行します
  • 結果を確認します

現在 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
注:budgetファイルの名前はbudget.jsonではなくても問題ありません。

結果を確認します #

LightWalletが正しく構成されている場合、LighthouseレポートにはPerformance カテゴリ内のBudgetsセクションが含まれます。

'Lighthouse レポートのBudgetセクション

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

パフォーマンス
最終更新: Apr 3, 2020 — 記事を改善する
Return to all articles
共有する
サブスクライブする

Contribute

  • バグを報告する
  • ソースを表示する

関連性のあるコンテンツ

  • developer.chrome.com
  • Chrome のアップデート
  • ケーススタディ
  • ポッドキャスト
  • ショー

接続する

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • すべての製品
  • 利用規約とプライバシーポリシー
  • コミュニティガイドライン

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.