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 によって提供されるため、他のユーザー補助機能の監査でも表示されることがあります。
詳しくは、ユーザー レポートの収集に関する問題と実装の pull リクエストをご覧ください。
ランニング中の灯台
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 Issue Tracker で問題を報告するか、フィードバックを送信します。
- Lighthouse GitHub ディスカッション フォーラムで質問してください。
- Twitter（@____lighthouse）で Lighthouse チームに連絡します。