Lighthouse の概要

Lighthouse は、ウェブページの品質を改善するためのオープンソースの自動化ツールです。公開されているウェブページでも、認証が必要なウェブページでも実行できます。パフォーマンス、ユーザー補助、SEO などの監査を行うことができます。

Lighthouse は、Chrome DevTools、コマンドライン、または Node モジュールとして実行できます。Lighthouse に監査する URL を指定すると、ページに対して一連の監査が実行され、ページのパフォーマンスに関するレポートが生成されます。不合格となった監査は、ページを改善するための指標として使用します。各監査には、監査が重要な理由と修正方法を説明する参照が含まれています。

Lighthouse CI を使用して、サイトの回帰を防ぐこともできます。

使ってみる

最適な Lighthouse ワークフローを選択します。

  • Chrome DevTools で、認証が必要なページを監査し、ブラウザからユーザー フレンドリーな形式でレポートを読み取ります。
  • コマンドラインから。シェル スクリプトを使用して Lighthouse の実行を自動化します。
  • Node モジュールとして。Lighthouse を継続的インテグレーション システムに統合する。
  • ウェブ UI から。Lighthouse を実行してレポートにリンクします。インストールは不要です。

Chrome DevTools で Lighthouse を実行する

Lighthouse には、Chrome DevTools に独自のパネルがあります。レポートを実行するには:

  1. パソコン版 Google Chrome をダウンロードします。
  2. Chrome を開き、監査する URL に移動します。ウェブ上の任意の URL を監査できます。
  3. Chrome DevTools を開きます。

  4. [Lighthouse] タブをクリックします。

    左側は、監査対象のウェブページのビューポートです。右側は Chrome DevTools の Lighthouse パネルです。

  5. [ページ読み込みを分析] をクリックします。DevTools に監査カテゴリのリストが表示されます。すべて有効のままにします。

  6. [監査を実行] をクリックします。30 ～ 60 秒後、Lighthouse からページに関するレポートが生成されます。

    Chrome DevTools の Lighthouse レポート。

Node コマンドライン ツールをインストールして実行する

Node モジュールをインストールするには:

  1. パソコン版 Google Chrome をダウンロードします。
  2. Node の最新の長期サポート バージョンをインストールします。
  3. Lighthouse をインストールします。-g フラグを使用すると、グローバル モジュールとしてインストールされます。
npm install -g lighthouse

監査を実行するには:

lighthouse <url>

すべてのオプションを表示するには:

lighthouse --help

Node モジュールをプログラムで実行する

Lighthouse を Node モジュールとしてプログラムで実行する例については、プログラムで使用するをご覧ください。

PageSpeed Insights を実行する

PageSpeed Insights で Lighthouse を実行するには:

  1. PageSpeed Insights に移動します。
  2. ウェブページの URL を入力します。

  3. [ANALYZE] をクリックします。

    PageSpeed Insights ウェブサイト。

Lighthouse を Chrome 拡張機能として実行する

拡張機能をインストールするには:

  1. パソコン版 Google Chrome をダウンロードします。
  2. Chrome ウェブストアから Lighthouse Chrome 拡張機能をインストールします。

監査を実行するには:

  1. Chrome で、監査するページに移動します。

  2. Chrome アドレスバーの横または Chrome の拡張機能メニューにある Lighthouse をクリックします。クリックすると、Lighthouse メニューが展開されます。

    レポートの生成を求めるメッセージが表示されます。

  3. [レポートを生成] をクリックします。Lighthouse は、���在フォーカスされているページに対して監査を実行し、結果のレポートを含む新しいタブを開きます。

    Lighthouse レポート（拡張機能から生成）。

オンラインでレポートを共有、表示する

Lighthouse Viewer を使用して、レポートをオンラインで表示、共有します。

Lighthouse 閲覧ツール

レポートを JSON として共有する

Lighthouse Viewer には、Lighthouse レポートの JSON 出力が必要です。次のように JSON 出力を生成します。

  • Lighthouse レポートから作成する。メニューの をクリックし、 [JSON として保存] をクリックします。
  • コマンドライン。実行: shell lighthouse --output json --output-path <path/for/output.json>

レポートデータを表示するには:

  1. Lighthouse Viewer を開きます。
  2. JSON ファイルをビューアにドラッグするか、ビューアの任意の場所をクリックしてファイル ナビゲータを開き、ファイルを選択します。

レポートを GitHub Gist として共有する

JSON ファイルを手動で渡さない場合は、レポートをシークレット GitHub gist として共有することもできます。Gist のメリットの一つは、無料のバージョン管理です。

レポートを gist としてエクスポートするには:

  1. メニューをクリックし、 [ビューアで開く] をクリックします。レポートは https://googlechrome.github.io/lighthouse/viewer/ にあります。
  2. ビューアで メニューをクリックし、 [Gist として保存] をクリックします。初め�������操作を������、GitHub の基本データへのアクセス権と、gist の読み取りと書き込みの権限を求めるポップアップが表示されます。

CLI バージョンの Lighthouse からレポートを gist としてエクスポートするには、gist を手動で作成し、レポートの JSON 出力を gist にコピーして貼り付けます。JSON 出力を含む gist ファイル名は、.lighthouse.report.json で終わる必要があります。コマンドライン ツールから JSON 出力を生成する方法の例については、レポートを JSON として共有するをご覧ください。

ギスとして保存されたレポートを表示するには:

  • ?gist=<ID> をビューアの URL に追加します。ここで、<ID> は gist の ID です。 text https://googlechrome.github.io/lighthouse/viewer/?gist=<ID>
  • ビューアを開き、ギスティングの URL を貼り付けます。

Lighthouse の拡張性

Lighthouse は、すべてのウェブ デベロッパーにとって関連性があり、実用的なガイダンスを提供することを目的としています。そのため、Lighthouse を特定のニーズに合わせてカスタマイズできる 2 つの機能があります。

スタック パック

デベロッパーは、さまざまなテクノロジー（バックエンド、コンテンツ管理システム、JavaScript フレームワーク）を使用してウェブページを構築します。Lighthouse は、一般的な推奨事項を表示するのではなく、使用しているツールに応じて、関連性の高い実用的なアドバイスを提供します。

スタックパックを使用すると、Lighthouse はサイトが構築されているプラットフォームを検出し、スタックベースの特定の推奨事項を表示できます。これらの推奨事項は、コミュニティのエキスパートによって定義され、キュレートされています。

スタックパックをコントリビュートするには、コントリビューション ガイドラインをご覧ください。

Lighthouse プラグイン

Lighthouse プラグインを使用すると、ドメイン エキスパートはコミュニティの特定のニーズに合わせて Lighthouse の機能を拡張できます。Lighthouse が収集したデータを使用して、新しい監査を��成できます。Lighthouse プラグインは、Lighthouse によって実行され、新しいカテゴリとしてレポートに追加される一連のチェックを実装するノード モジュールです。

独自のプラグインを作成する方法については、Lighthouse GitHub リポジトリのプラグイン ハンドブックをご覧ください。

Lighthouse を統合する

提供しているプロダクトやサービスの一部として Lighthouse を統合している企業や個人は、ぜひご利用ください。Google は、できるだけ多くのユーザーに Lighthouse をご利用いただきたいと考えています。

Lighthouse の統合に関するガイドラインとブランド アセットを参照して、Lighthouse が使用されていることを示しながら、Google のブランドを保護します。

Lighthouse に貢献する

Lighthouse はオープンソースであり、コントリビューションも歓迎です。リポジトリの問題トラッカーで、修正可能なバグや、作成または改善できる監査を確認します。問題は、パフォーマンス指標、新しい監査のアイデア、Lighthouse に関連するその他の問題について話し合う場所として適しています。