Lighthouse は、サイトのユーザー エクスペリエンスを改善するための改善点と診断情報をデベロッパーに提供するウェブサイト監査ツールです。
Lighthouse 9.0 は、コマンドライン、Chrome Canary、PageSpeed Insights ですぐに利用できます。Chrome 98 の Chrome Stable にリリースされます。
API の変更
ほとんどのユーザーは、このリリースでワークフローを中断する変更に遭遇することはありません。カスタム Lighthouse 監査を実行する場合や、Lighthouse レポートの JSON の詳細に依存するツールを使用している場合は、9.0 で破壊的変更がいくつか行われるため、注意が必要です。
変更点の一覧については、9.0 の変更ログをご覧ください。
Lighthouse のユーザーフロー
Lighthouse に、ページのライフサイクル内の任意の時点でラボテストを実行できる新しいユーザーフロー API が追加されました。
Puppeteer は、ページの読み込みをスクリプト化し、合成ユーザー操作をトリガーするために使用されます。Lighthouse は複数の方法で呼び出して、これらの操作中に重要な分析情報を取得できます。つまり、ページの読み込み中とページの操作中にパフォーマンスを測定できます。
詳しくは、Lighthouse のユーザーフロー チュートリアルとコードサンプルをご覧ください。
レポートの更新
Lighthouse レポートが更新され、読みやすさが向上し、レポートのソースと実行方法が明確になりました。
テスト対象のページが正しく読み込まれ、想定どおりの形式になっているかどうかをひと目で確認できるように、最終的なスクリーンショットがレポートの上部に埋め込まれています。
レポートの下部にある概要情報も、Lighthouse の実行方法とレポートの収集方法をよりわかりやすく伝えられるように再設計されました。
新しいレポートの動作を確認するには、Lighthouse 9.0 を試すか、こちらのサンプル レポートをご覧ください。
関連するユーザー補助要素
一般的なユーザー補助の問題は、ページ内で一意であるはずのものが、一意でない場合です。たとえば、aria-labelledby 属性で参照されている ID が複数の要素で使用されている場合などです。
Lighthouse ではこれまで、この状況について警告してきましたが、ID が重複している要素の最初のインスタンスのみをリストしていました。そのため、問題の原因となっている要素がすべて表示されていると思われるユーザーも多く、混乱を招くことがありました。Lighthouse に表示される要素が 1 つしかないため、1 つの要素が重複として報告されるのはバグであると推測されます。
Lighthouse 9.0 では、その ID を共有するすべての要素が一覧表示されます。
この「関連ノード」機能は axe-core によって提供されるため、他のユーザー補助監査にも表示される場合があります。
詳しくは、ユーザー レポートを収集する問題と実装プル リクエストをご覧ください。
Lighthouse の実行
Lighthouse は、Chrome DevTools、npm（Node モジュールと CLI として）、ブラウザ拡張機能（Chrome と Firefox）で利用できます。web.dev/measure や PageSpeed Insights など、多くの Google サービスで使用されています。
Lighthouse Node CLI を試すには、次のコマンドを使用します。
npm install -g lighthouse
lighthouse https://www.example.com --view
Lighthouse チームに問い合わせる
新機能、9.0 リリースの変更点、Lighthouse に関連するその他の点について話し合うには:
- 問題を報告する、またはフィードバックを送信するには、Lighthouse GitHub の問題トラッカーを使用してください。
- Lighthouse GitHub ディスカッション フォーラムで質問する。
- Twitter の Lighthouse チーム（@____lighthouse）にお問い合わせください。