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. [Run audit] をクリックします。30 ～ 60 秒後にページに関するレポートが表示されます。

    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 Gists として共有する

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

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

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

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>
  • ビューアを開き、gist の URL を貼り付けます。

Lighthouse の拡張性

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

スタック パック

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

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

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

Lighthouse プラグイン

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

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

Lighthouse を統合する

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

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

Lighthouse に貢献する

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