概要

Lighthouse は、ウェブページの品質向上に役立つよう開発された、オープンソースの自動化されたツールです。任意の Web ページ、公開 Web ページ、認証が必要な Web ページに対して実行できます。パフォーマンス、ユーザー補助、プログレッシブ ウェブアプリ、SEO などの監査を行うことができます。

Lighthouse のロゴ

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

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

Lighthouse の使用方法と貢献方法について詳しくは、Google I/O の以下の動画をご覧ください。

始める

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

  • Chrome DevTools で、認証が必要なページを簡単に監査し、使いやすい形式でレポートを確認できます。
  • コマンドラインから。シェル スクリプトを使用して Lighthouse の実行を自動化します。
  • ノード モジュール。Lighthouse を継続的インテグレーション システムに統合します。
  • ウェブ UI から。Lighthouse を実行し、デバイスをインストールせずにレポートにリンクする。

Chrome DevTools で Lighthouse を実行する

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

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

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

    <ph type="x-smartling-placeholder">
    </ph> Chrome DevTools の Lighthouse パネル <ph type="x-smartling-placeholder">
    </ph> 左側は監査対象のページのビューポートです。右側は Chrome DevTools の [Lighthouse] パネルです。Lighthouse を利用しています。
    をご覧ください。

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

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

    Chrome DevTools の Lighthouse レポート
    Chrome DevTools の Lighthouse レポート

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

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

  1. パソコン版 Google Chrome をダウンロードします。
  2. 現行バージョンのノードの長期サポートをインストールします。
  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 の UI
    PageSpeed Insights の UI

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

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

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

監査を実行するには:

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

  2. Lighthouse 拡張機能のアイコン Lighthouse をクリックします。Chrome のアドレスバーの横にあります。表示されない場合は、Chrome の拡張機能メニューを開いてそこからアクセスしてください。クリックすると、Lighthouse メニューが展開されます。

    Lighthouse 拡張機能
    Lighthouse 拡張機能パネル

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

    <ph type="x-smartling-placeholder">
    </ph> Lighthouse 表示オプション レポート <ph type="x-smartling-placeholder">
    </ph> 拡張機能からの Lighthouse レポート
    をご覧ください。

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

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

<ph type="x-smartling-placeholder">
</ph> Lighthouse 閲覧者 <ph type="x-smartling-placeholder">
</ph> Lighthouse 閲覧者
をご覧ください。

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

Lighthouse ビューアには、Lighthouse レポートの JSON 出力が必要です。以下のリストに、使用している Lighthouse ワークフローに応じて JSON 出力を取得する方法を示します。

  • Lighthouse レポート。右上の メニュー アイコン メニューを開き、[JSON 形式で保存] ボタン [JSON として保存] をクリックします。
  • コマンドライン。実行: shell lighthouse --output json --output-path <path/for/output.json>

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

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

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

JSON ファイルを手動で渡さない場合は、レポートをシークレット GitHub gist として共有することもできます。gists の利点として、料金が発生しないバージョン管理が挙げられます。

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

  1. （すでにビューアにいる場合は、この手順をスキップしてください）右上の メニュー アイコン メニューを開き、ビューアで開くボタン [ビューアで開く] をクリックします。https://googlechrome.github.io/lighthouse/viewer/ にあるビューアでレポートが開きます。
  2. ビューアで、右上の メニュー アイコン メニューを開き、[ビューアで開く] ボタン [Gist として保存] をクリックします。初めてこれを行う場合、ポップアップが表示され、基本的な GitHub データへのアクセス権限と、gist に対する読み取りと書き込みの権限が求められます。

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

要点として保存したレポートを表示するには:

  • 閲覧者の URL に ?gist=<ID> を追加します。ここで、<ID> は gist の ID です。 text https://googlechrome.github.io/lighthouse/viewer/?gist=<ID>
  • [ビューア] を開き、gist の URL を貼り付けます。

Lighthouse の拡張性

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

スタックパック

デベロッパーは、さまざまな技術（バックエンド/CMS/JavaScript フレームワーク）を使用してウェブページを構築しています。Lighthouse では、一般的な推奨事項を表示するだけでなく、使用するツールに応じて、より関連性が高く実用的なアドバイスを提供できるようになりました。

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

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

Lighthouse プラグイン

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

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

Lighthouse を統合する

Lighthouse を、提供しているプロダクトやサービスの一部として統合される企業または個人の方には、まず第一に、皆様にご利用いただき、ありがとうございます。Google は、できるだけ多くのユーザーに Lighthouse をご利用いただきたいと考えています。このLighthouse の統合に関するガイドラインとブランド アセットは、Google のブランドを保護しながら、Lighthouse が内部で動作していることを簡単に示すことを目的としています。

Lighthouse に貢献する

Lighthouse はオープンソースであり、貢献を歓迎しています。リポジトリの Issue Tracker で、修正できるバグや、作成または改善が可能な監査をご確認ください。また、この Issues トラッカーではパフォーマンス指標や新しい監査のアイデアなど、Lighthouse に関するさまざまな内容を話し合うことができます。