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 ディスカッション フォーラムで質問してください。
- Lighthouse チームには、Twitter（@____lighthouse）でお問い合わせください。