lighthouseダウンロード - lighthouseソースコードのダウンロード

lighthouse

その他のソースコード

v12.2.2

ダウンロード

灯台

Lighthouse は Web アプリと Web ページを分析し、最新のパフォーマンス指標と開発者のベストプラクティスに関する洞察を収集します。

ライトハウスの使用
- Chrome DevTools での Lighthouse の使用
- Chrome拡張機能の使用
- ノード CLI の使用
  - CLI オプション
- ノードモジュールの使用
- レポートの表示
  - オンラインビューア
- ドキュメントとレシピ
- 灯台の発展
  - 設定
  - 走る
  - テスト
  - ドキュメント
関連製品およびプロジェクト
- Web Perf サービスにおける Lighthouse の統合
- 非 Web Perf サービスにおける Lighthouse の統合
- プラグイン
- 関連プロジェクト
よくある質問
- ライトハウスはどのように機能しますか?
- Lighthouse の実行を設定できますか?
- Lighthouse はネットワーク調整をどのように使用しますか?また、それを改善するにはどうすればよいですか?
- 結果はリモートサーバーに送信されますか?
- ローカライズされた Lighthouse の結果を取得するにはどうすればよいですか?
- Lighthouse を拡張するカスタム監査を作成するにはどうすればよいですか?
- どのように貢献すればよいでしょうか?

Chrome DevTools での Lighthouse の使用

Lighthouse は、Chrome DevTools の「Lighthouse」パネルに直接統合されています。

インストール：Chromeをインストールします。

実行します。Chrome DevTools を開き、Lighthouse パネルを選択して、[レポートの生成] をクリックします。

Chrome DevTools への Lighthouse の統合。

Chrome拡張機能の使用

Chrome 拡張機能は、Lighthouse が Chrome デベロッパーツールで利用可能になる前に利用可能であり、同様の機能を提供します。

インストール: Chrome ウェブストアから拡張機能をインストールします。

実行します。拡張機能のクイックスタートガイドに従います。

ノード CLI の使用

Node CLI は、Lighthouse の実行方法を最も柔軟に設定およびレポートできるようにします。より高度な使用法を希望するユーザー、または自動化された方法で Lighthouse を実行したいユーザーは、Node CLI を使用する必要があります。

注Lighthouse には Node 18 LTS (18.x) 以降が必要です。

インストール:

npm install -g lighthouse
# or use yarn:
# yarn global add lighthouse

実行してください: lighthouse https://airhorner.com/

デフォルトでは、Lighthouse はレポートを HTML ファイルに書き込みます。フラグを渡すことで出力形式を制御できます。

CLI オプション

 $ lighthouse --help

lighthouse <url> <options>

Logging:
  --verbose  Displays verbose logging  [boolean] [default: false]
  --quiet    Displays no progress, debug logs, or errors  [boolean] [default: false]

Configuration:
  --save-assets                  Save the trace contents & devtools logs to disk  [boolean] [default: false]
  --list-all-audits              Prints a list of all available audits and exits  [boolean] [default: false]
  --list-trace-categories        Prints a list of all required trace categories and exits  [boolean] [default: false]
  --additional-trace-categories  Additional categories to capture with the trace (comma-delimited).  [string]
  --config-path                  The path to the config JSON.
                                 An example config file: core/config/lr-desktop-config.js  [string]
  --preset                       Use a built-in configuration.
                                 WARNING: If the --config-path flag is provided, this preset will be ignored.  [string] [choices: "perf", "experimental", "desktop"]
  --chrome-flags                 Custom flags to pass to Chrome (space-delimited). For a full list of flags, see https://bit.ly/chrome-flags
                                 Additionally, use the CHROME_PATH environment variable to use a specific Chrome binary. Requires Chromium version 66.0 or later. If omitted, any detected Chrome Canary or Chrome stable will be used.  [string] [default: ""]
  --port                         The port to use for the debugging protocol. Use 0 for a random port  [number] [default: 0]
  --hostname                     The hostname to use for the debugging protocol.  [string] [default: "localhost"]
  --form-factor                  Determines how performance metrics are scored and if mobile-only audits are skipped. For desktop, --preset=desktop instead.  [string] [choices: "mobile", "desktop"]
  --screenEmulation              Sets screen emulation parameters. See also --preset. Use --screenEmulation.disabled to disable. Otherwise set these 4 parameters individually: --screenEmulation.mobile --screenEmulation.width=360 --screenEmulation.height=640 --screenEmulation.deviceScaleFactor=2
  --emulatedUserAgent            Sets useragent emulation  [string]
  --max-wait-for-load            The timeout (in milliseconds) to wait before the page is considered done loading and the run should continue. WARNING: Very high values can lead to large traces and instability  [number]
  --enable-error-reporting       Enables error reporting, overriding any saved preference. --no-enable-error-reporting will do the opposite. More: https://github.com/GoogleChrome/lighthouse/blob/main/docs/error-reporting.md  [boolean]
  --gather-mode, -G              Collect artifacts from a connected browser and save to disk. (Artifacts folder path may optionally be provided). If audit-mode is not also enabled, the run will quit early.
  --audit-mode, -A               Process saved artifacts from disk. (Artifacts folder path may be provided, otherwise defaults to ./latest-run/)
  --only-audits                  Only run the specified audits  [array]
  --only-categories              Only run the specified categories. Available categories: accessibility, best-practices, performance, seo  [array]
  --skip-audits                  Run everything except these audits  [array]
  --disable-full-page-screenshot Disables collection of the full page screenshot, which can be quite large  [boolean]

Output:
  --output       Reporter for the results, supports multiple values. choices: "json", "html", "csv"  [array] [default: ["html"]]
  --output-path  The file path to output the results. Use 'stdout' to write to stdout.
                   If using JSON output, default is stdout.
                   If using HTML or CSV output, default is a file in the working directory with a name based on the test URL and date.
                   If using multiple outputs, --output-path is appended with the standard extension for each output type. "reports/my-run" -> "reports/my-run.report.html", "reports/my-run.report.json", etc.
                   Example: --output-path=./lighthouse-results.html  [string]
  --view         Open HTML report in your browser  [boolean] [default: false]

Options:
  --version                            Show version number  [boolean]
  --help                               Show help  [boolean]
  --cli-flags-path                     The path to a JSON file that contains the desired CLI flags to apply. Flags specified at the command line will still override the file-based ones.
  --locale                             The locale/language the report should be formatted in
  --blocked-url-patterns               Block any network requests to the specified URL patterns  [array]
  --disable-storage-reset              Disable clearing the browser cache and other storage APIs before a run  [boolean]
  --throttling-method                  Controls throttling method  [string] [choices: "devtools", "provided", "simulate"]
  --throttling
  --throttling.rttMs                   Controls simulated network RTT (TCP layer)
  --throttling.throughputKbps          Controls simulated network download throughput
  --throttling.requestLatencyMs        Controls emulated network RTT (HTTP layer)
  --throttling.downloadThroughputKbps  Controls emulated network download throughput
  --throttling.uploadThroughputKbps    Controls emulated network upload throughput
  --throttling.cpuSlowdownMultiplier   Controls simulated + emulated CPU throttling
  --extra-headers                      Set extra HTTP Headers to pass with request
  --precomputed-lantern-data-path      Path to the file where lantern simulation data should be read from, overwriting the lantern observed estimates for RTT and server latency.  [string]
  --lantern-data-output-path           Path to the file where lantern simulation data should be written to, can be used in a future run with the `precomputed-lantern-data-path` flag.  [string]
  --plugins                            Run the specified plugins  [array]
  --channel  [string] [default: "cli"]
  --chrome-ignore-default-flags  [boolean] [default: false]

Examples:
  lighthouse <url> --view                                                                          Opens the HTML report in a browser after the run completes
  lighthouse <url> --config-path=./myconfig.js                                                     Runs Lighthouse with your own configuration: custom audits, report generation, etc.
  lighthouse <url> --output=json --output-path=./report.json --save-assets                         Save trace, screenshots, and named JSON report.
  lighthouse <url> --screenEmulation.disabled --throttling-method=provided --no-emulatedUserAgent  Disable device emulation and all throttling
  lighthouse <url> --chrome-flags="--window-size=412,660"                                          Launch Chrome with a specific window size
  lighthouse <url> --quiet --chrome-flags="--headless"                                             Launch Headless Chrome, turn off logging
  lighthouse <url> --extra-headers "{"Cookie":"monster=blue", "x-men":"wolverine"}"        Stringify'd JSON HTTP Header key/value pairs to send in requests
  lighthouse <url> --extra-headers=./path/to/file.json                                             Path to JSON file of HTTP Header key/value pairs to send in requests
  lighthouse <url> --only-categories=performance,seo                                               Only run the specified categories. Available categories: accessibility, best-practices, performance, seo

For more information on Lighthouse, see https://developers.google.com/web/tools/lighthouse/.

出力例

lighthouse
# saves `./<HOST>_<DATE>.report.html`

lighthouse --output json
# json output sent to stdout

lighthouse --output html --output-path ./report.html
# saves `./report.html`

# NOTE: specifying an output path with multiple formats ignores your specified extension for *ALL* formats
lighthouse --output json --output html --output-path ./myfile.json
# saves `./myfile.report.json` and `./myfile.report.html`

lighthouse --output json --output html
# saves `./<HOST>_<DATE>.report.json` and `./<HOST>_<DATE>.report.html`

lighthouse --output-path= ~ /mydir/foo.out --save-assets
# saves `~/mydir/foo.report.html`
# saves `~/mydir/foo-0.trace.json` and `~/mydir/foo-0.devtoolslog.json`

lighthouse --output-path=./report.json --output json
# saves `./report.json`

ライフサイクルの例

必要に応じて、 --gather-mode ( -G ) および--audit-mode ( -A ) CLI フラグを使用して、Lighthouse のライフサイクルのサブセットを実行できます。

lighthouse http://example.com -G
# launches browser, collects artifacts, saves them to disk (in `./latest-run/`) and quits

lighthouse http://example.com -A
# skips browser interaction, loads artifacts from disk (in `./latest-run/`), runs audits on them, generates report

lighthouse http://example.com -GA
# Normal gather + audit run, but also saves collected artifacts to disk for subsequent -A runs.


# You can optionally provide a custom folder destination to -G/-A/-GA. Without a value, the default will be `$PWD/latest-run`.
lighthouse -GA=./gmailartifacts https://gmail.com

エラー報告に関する注意事項

初めて CLI を実行すると、Lighthouse がランタイム例外を匿名で報告できるかどうかを尋ねるメッセージが表示されます。 Lighthouse チームはこの情報を使用して新しいバグを検出し、回帰を回避します。オプトアウトしても、Lighthouse の使用には一切影響しません。もっと詳しく知る。

ノードモジュールの使用

Node モジュールを使用して Lighthouse をプログラム的に使用することもできます。

開始方法については、「プログラムによる Lighthouse の使用」を参照してください。
利用可能な構成オプションの詳細については、「Lighthouse 構成」を参照してください。

レポートの表示

Lighthouse はレポートを JSON または HTML として生成できます。

HTML レポート:

オンラインビューア

--output=jsonフラグを指定して Lighthouse を実行すると、実行の JSON ダンプが生成されます。 https://googlechrome.github.io/lighthouse/viewer/ にアクセスし、ファイルをアプリにドラッグすると、このレポートをオンラインで表示できます。 Lighthouse HTML レポートの上部にある [エクスポート] ボタンを使用して、レポートを Lighthouse Viewer で開くこともできます。

ビューアーでは、右上隅にある共有アイコンをクリックし、GitHub にサインインすることでレポートを共有できます。

注: 共有レポートは、GitHub のアカウントの下に秘密の Gist として保存されます。

ドキュメントとレシピ

始めるのに役立つドキュメント、例、レシピ。

ドキュメント

差異への対処
Lighthouse をプログラムで使用する
認証を使用してサイトをテストする
プラグインの開発
新しい監査の作成
モバイルデバイスでのテスト
灯台の建築

レシピ

プラグイン - Lighthouse プラグインの例
カスタム監査の例 - Lighthouse を拡張し、独自の監査を実行します

動画

Google I/O 2018 のセッションでは、新しいパフォーマンスエンジン、今後の Lighthouse REST API、実際のユーザーデータを評価するための Chrome UX レポートの使用について説明します。

Google I/O 2017 のセッションでは、アーキテクチャ、カスタム監査の作成、GitHub/Travis/CI 統合、ヘッドレス Chrome などが取り上げられています。

画像をクリックすると YouTube でビデオがご覧いただけます。

開発する

Lighthouse のハッキングの基本については、以下をお読みください。詳細については、「貢献」も参照してください。

設定

 # yarn should be installed first

git clone https://github.com/GoogleChrome/lighthouse

cd lighthouse
yarn
yarn build-all

走る

node cli http://example.com
# append --chrome-flags="--no-sandbox --headless --disable-gpu" if you run into problems connecting to Chrome

開始のヒント: node --inspect-brk cli http://example.com使用して Chrome DevTools を開き、アプリ全体をステップ実行します。詳細については、「Chrome DevTools を使用した Node.js のデバッグ」を参照してください。

テスト

 # lint and test all files
yarn test

# run all unit tests
yarn unit

# run a given unit test (e.g. core/test/audits/byte-efficiency/uses-long-cache-ttl-test.js)
yarn mocha uses-long-cache-ttl

# watch for file changes and run tests
#   Requires http://entrproject.org : brew install entr
yarn watch

# # run linting, unit, and smoke tests separately
yarn lint
yarn unit
yarn smoke

# # run tsc compiler
yarn type-check

ドキュメント

一部のドキュメントには、デフォルトで CI でのみ実行されるテストが含まれています。ドキュメントを変更するには、 yarn build-pack && yarn test-docsローカルで実行して、パスすることを確認する必要があります。

追加の依存関係

brew install jq

Web Perf サービスにおける Lighthouse の統合

このセクションでは、Lighthouse データを統合したサービスについて詳しく説明します。 Lighthouse を統合するクールなプロジェクトに取り組んでいて、ここで取り上げたい場合は、このリポジトリに問題を提出するか、@_____lighthouse にツイートしてください。

Web ページテスト— 実際のデバイス上で Web ページのパフォーマンスを測定および分析するためのオープンソースツール。ユーザーは、WebPageTest 結果の分析と並行して Lighthouse レポートを作成することを選択できます。
HTTPArchive - HTTPArchive は、Web ページテストで 500,000 ページをクロールすることで Web がどのように構築されているかを追跡し、Lighthouse の結果も含めて情報を BigQuery に保存し、公開します。
Calibre - Calibre は、Lighthouse 上で実行される包括的なパフォーマンス監視プラットフォームです。 GitHub Pull Request Reviewsを使用して、本番環境に入る前に作業のパフォーマンスへの影響を確認します。サードパーティのスクリプトの影響を追跡します。開発者優先の Node.js API を使用してパフォーマンスシステムを自動化します。 15 日間の無料トライアルで Calibre を試してください。
DebugBear - DebugBear は、Lighthouse に基づく Web サイト監視ツールです。それぞれの変化の原因を理解することに重点を置き、時間の経過とともにスコアと指標がどのように変化したかを確認します。 DebugBear は、30 日間の無料トライアルが付いた有料製品です。
Treo - Treo はサービスとしての Lighthouse です。回帰テスト、地理的リージョン、カスタムネットワーク、GitHub および Slack との統合を提供します。 Treo は、個人開発者およびチーム向けのプランを備えた有料製品です。
PageVitals - PageVitals は、Lighthouse、CrUX、およびフィールドテストを組み合わせて、Web サイトのパフォーマンスを監視します。 Web サイトのパフォーマンスが時間の経過とともにどのように変化するかを確認し、速度が遅すぎる場合は警告を受け取ります。ドリルダウンして、パフォーマンスの問題の本当の原因を見つけます。 PageVitals は、14 日間の無料トライアルが付いた有料製品です。
Screpy - Screpy は、Web サイトのすべてのページを 1 つのダッシュボードで分析し、チームで監視できる Web 分析ツールです。 Lighthouse を利用しており、いくつかの異なる分析ツール (SERP、W3C、Uptime など) も含まれています。 Screpy には無料プランと有料プランがあります。
Siteimprove Performance — Siteimprove Performance は、マーケティング担当者、マネージャー、または意思決定者が Web サイトの読み込み時間を理解し、最適化できるようにする Web パフォーマンス監視ソリューションです。迅速かつインパクトのある勝利に焦点を当てた、使いやすい分析情報を入手します。 Siteimprove Performance は、14 日間の無料トライアルが付いた有料製品です。
SpeedCurve — SpeedCurve は、さまざまなブラウザ、デバイス、地域にわたる Web パフォーマンスを継続的に監視するツールです。複数のページやサイトにわたる Lighthouse スコアを含むあらゆる指標を集計でき、Slack や電子メールアラートを使用してパフォーマンス予算を設定できます。 SpeedCurve は、30 日間の無料トライアルが付いた有料製品です。
Foo - 無料プランとプレミアムプランを提供するサービスとしての Lighthouse。 CircleCI、GitHub、その他の統合を使用して、Lighthouse 監査のモニタリングと履歴レポートを提供します。 Slack 通知、PR コメントレポートなどの機能が含まれます。
Apdex - Apdex は Web サイトのパフォーマンスサービスです。主な機能は、過去の Lighthouse レポートの視覚化、モバイル/デスクトップオプション、アラート、稼働時間モニタリングなどです。柔軟な有料プランと 30 日間の無料トライアルがあります。
Websu - Websu は、シンプルな HTTP REST API を通じて Lighthouse-as-a-Service を提供するオープンソースプロジェクトです。主な機能は、独自の環境でホストおよびデプロイできる機能と、過去の Lighthouse レポートの概要です。
DTEKT.IO - DTEKT は、Web サイトのパフォーマンスと稼働時間を監視するサービスです。 Lighthouse を使用して、複数のデバイス上の複数の場所から Web サイトのパフォーマンスを可視化します。 3か月の無料トライアルと有料プランが提供されます。
SpeedVitals - SpeedVitals は、複数のデバイスや場所にわたる Web パフォーマンスを測定する Lighthouse を利用したツールです。レイアウトシフト視覚化、ウォーターフォールチャート、フィールドデータ、リソースグラフなどのさまざまな機能を備えています。 SpeedVitals は無料プランと有料プランの両方を提供します。
Lighthouse メトリクス- Lighthouse メトリクスは、単一のテストでグローバルなパフォーマンスに関する洞察を提供します。 Web サイトを毎日または時間ごとに監視することもできます。 Lighthouse Metrics は、14 日間の無料トライアル付きの有料機能として、無料のグローバルワンタイムテストとパフォーマンスモニタリングを提供します。
Auditzy - Auditzy™ は、Web ページのプリユーザージャーニーを分析できる強力な Web サイト監査および監視ツールです。競合他社の健全性指標、コア Web バイタル、テクノロジーを分析します。自社の Web ページを競合他社と比較して、どこでリードしているのか、どこで遅れているのかを把握します。 Slackによるリアルタイム通知。複数のチームとのシームレスなコラボレーションが可能です。監査を時間ごと、毎日、毎週などで自動化します。従量課金制プランの無料トライアルがあります。
Lighthouse Metrics China - 中国向けに特別に設計された最初の Lighthouse メトリクスツール。 Lighthouse で比類のない Web サイト監視機能を体験してください。中国のグレートファイアウォールの領域内でのスコアとメトリクスの変動に関する洞察を得ることで、各変化に影響を与える要因を包括的に理解できるようになります。 Lighthouse Metrics China は無料プランと有料プランの両方を提供しています。
DeploymentHawk - DeploymentHawk は、Lighthouse を利用した自動サイト監査ツールです。パフォーマンス、アクセシビリティ、SEO の問題をユーザーに影響を与える前に簡単に発見します。 DeploymentHawk は、7 日間の無料トライアルが付いた有料製品です。
Guardius - Guardius は、Lighthouse を統合して自動化された Web パフォーマンス分析を提供する DevOps および DevSecOps SaaS プラットフォームです。メトリクスの評価と自動スキャンを提供するだけでなく、さまざまな期間にわたるパフォーマンスの比較や長期にわたる継続的な観察も可能になります。さらに、Guardius は、特定の要件に合わせて調整された事前定義およびカスタマイズされたアラートを提供します。ユーザーは Guardius の無料バージョンを利用して、その機能を試すことができます。

非 Web Perf サービスにおける Lighthouse の統合

PageWatch — PageWatch は、Web サイト上で問題のあるページを見つけるツールです。スペルミス、レイアウトの問題、遅いページ (Lighthouse を利用) などに関する洞察が得られます。 PageWatch は無料プランと有料プランで提供されます。
Fluxguard - Fluxguard は、Google Puppeteer と連携し、Lighthouse によって監査される Web サイトの DOM 変更モニタリングを提供します。 Fluxguard はフリーミアム製品で、毎月最大 75 ページを無料で監視できます。
Microlink — Microlink は API としてのクラウドブラウザです。 Lighthouse レポートをオンデマンドで提供し、その上に任意のサービスを簡単に構築できるようにします。同様の機能は、ブラウザレスという名前の基盤となるオープンソースプロジェクトを通じて利用できます。
Wattspeed — Wattspeed は、Lighthouse スコア、テクノロジーのリスト、W3C HTML 検証結果、DOM サイズ、混合コンテンツ情報などを含む Web ページの履歴キャプチャであるスナップショットを生成する無料ツールです。

プラグイン

lighthouse-plugin-field-performance - Chrome UX レポートのデータを使用して、URL の実際のユーザーパフォーマンスメトリクスを追加するプラグイン。
lighthouse-plugin-publisher-ads - 一連の自動監査を通じて広告の速度と全体的な品質を向上させるツールです。現時点では、これは主に Google Ad Manager を使用しているサイトを対象としています。このツールは、発見された問題の解決に役立ち、実用的なフィードバックを提案しながら、反復的な変更の有効性を評価するために使用されるツールを提供します。
lighthouse-plugin-crux - Chrome UX Report API から実際のユーザー指標データを迅速に収集するプラグイン。

よくある質問

ライトハウスはどのように機能しますか?

「灯台の建築」を参照してください。

なぜパフォーマンススコアがこれほど低いのでしょうか?私には大丈夫そうに見えます。

Lighthouse は、4G 接続と中間層の ~200 ドルの携帯電話を使用する一般的なモバイルユーザーが経験するパフォーマンスメトリクスをレポートします。デバイスやネットワーク上でサイトがすぐに読み込まれたとしても、他の環境のユーザーはサイトのエクスペリエンスが大きく異なります。

詳細については、スロットルに関するガイドをご覧ください。

なぜパフォーマンススコアがこれほど変化するのでしょうか?

Lighthouse のパフォーマンススコアは、コードが変更されていない場合でも、Web およびネットワークテクノロジに固有の変動性により変化します。パフォーマンスに影響を与える変更について結論を出す前に、一貫した環境でテストし、Lighthouse を複数回実行し、変動に注意してください。

詳細については、ばらつきを減らすためのガイドをご覧ください。

Lighthouse の実行を設定できますか?

はい！詳細については、Lighthouse の構成を参照してください。

Lighthouse はネットワーク調整をどのように使用しますか?また、それを改善するにはどうすればよいですか?

良い質問ですね。 Lighthouse の実行では、ネットワークと CPU のスロットルがデフォルトで適用されます。ネットワークは遅い 4G 接続をエミュレートしようとし、CPU はマシンのデフォルト速度の 4 倍遅くなります。スロットルなしで Lighthouse を実行したい場合は、CLI を使用し、上記の--throttling.*フラグで無効にする必要があります。

詳細については、ネットワークスロットルに関するガイドをご覧ください。

結果はリモートサーバーに送信されますか?

いいえ。 Lighthouse はローカルで実行され、マシンにインストールされているローカルバージョンの Chrome ブラウザを使用してページを監査します。レポート結果が処理されたり、リモートサーバーに送信されたりすることはありません。

CLI を介してローカライズされた Lighthouse の結果を取得するにはどうすればよいですか?

Lighthouse 8.0 以降、Lighthouse はネイティブのIntlサポートに完全に依存し、 Intlポリフィルを使用しなくなりました。ノード 14 以降を使用している場合、ノードはデフォルトでfull-icuで構築されるため、問題はありません。

ただし、 small-icuノードビルドを使用している場合は、ロケールが利用できないことに関する Lighthouse ログメッセージが表示される場合があります。これを解決するには、起動時にfull-icuモジュールと--icu-data-dirノードフラグを使用して、ICU データを手動でインストールします。