Lighthouse 9.0 の新機能

Brendan Kenny
Brendan Kenny

Lighthouse は、サイトのユーザー エクスペリエンスを改善するための最適化案と診断をデベロッパーに提供するためのウェブサイト監査ツールです。

Lighthouse 9.0 は、コマンドライン、Chrome CanaryPageSpeed Insights ですぐに利用できます。Chrome 98 以降の Chrome Stable で実装されます。

API の変更

このリリースでは、ほとんどのユーザーがワークフローの互換性を損なう変更を行うことはありません。Lighthouse のカスタム監査を実行する場合や、Lighthouse レポートの JSON に含まれる詳細情報に依存するツールを使用する場合、9.0 では注意が必要ないくつかの破壊的変更が行われている場合があります。

変更点の一覧については、9.0 の変更履歴をご覧ください。

ユーザーフローの Lighthouse

Lighthouse では、ユーザーフロー API が新しく使用されており、ページ期間中であればいつでもラボテストが可能です。

Puppeteer は、ページ読み込みのスクリプト化とユーザー インタラクションの合成のトリガーに使用されます。Lighthouse は複数の方法で呼び出して、それらのインタラクション中に重要な分析情報を取得できます。つまり、ページの読み込み中とページでのインタラクション中にパフォーマンスを測定できます。

Lighthouse のユーザーフロー レポート: ウェブサイトを読み込んで操作する複数のステップと、各ステップの Lighthouse 監査結果

詳しくは、Lighthouse のユーザーフローのチュートリアルとコードサンプルをご覧ください。

レポートの更新

Lighthouse レポートが一新され、読みやすくなりました。また、レポートのソースと実行方法がわかりやすくなりました。

レポートの上部に最終的なスクリーンショットが埋め込まれており、テスト対象のページが正しく読み込まれ、想定された形式になっているかどうかをひと目で確認できます。

Lighthouse 9.0 のレポート: 主要なパフォーマンス指標が目立つように一覧表示され、パフォーマンス レポートのページの最終的な外観のスクリーンショットが埋め込まれている

レポートの下部にあるサマリー情報もデザインが一新され、Lighthouse の実行方法やレポートの収集方法がわかりやすくなりました。

Lighthouse レポートの設定セクションが更新され、ページをキャプチャした日時、使用したページ エミュレーションの種類、テストを行った Chrome のバージョンなどの項目の概要が表示されるようになりました。

新しいレポートの動作を確認するには、Lighthouse 9.0 をお試しいただくか、こちらのサンプル レポートをご覧ください。

ユーザー補助の問題としてよくあるのは、ページ内で一意であるはずのものが一意でない場合です。たとえば、aria-labelledby 属性で参照されている ID が複数の要素で使用されている場合などです。

Lighthouse では以前からこの状況について警告が行われてきましたが、繰り返し ID を持つ要素の最初のインスタンスしかリストアップされていなかったため、一部のユーザーは「すべての要素が表示されている」と思い込んで混乱を招きがちです。Lighthouse では 1 つの要素しか表示されていないため、1 つの要素が重複として報告されたバグによるものと考えられます。

Lighthouse 9.0 では、この ID を共有するすべての要素が一覧表示されます。

「すべてのフォーカス可能な要素には一意の `id` が必要であり、2 つの要素がどちらも同じ `id` である」という Lighthouse の監査では、

この「関連ノード」はの機能は axe-core によって提供されるため、他のユーザー補助機能の監査でも表示されることがあります。

詳しくは、ユーザー レポートの収集に関する問題実装の pull リクエストをご覧ください。

ランニング中の灯台

Lighthouse は、Chrome DevTools、npm(Node モジュールおよび CLI)、ブラウザ拡張機能(ChromeFirefox)で利用できます。web.dev/measurePageSpeed Insights などの多くの Google サービスで使用されています。

Lighthouse Node CLI を試すには、次のコマンドを使用します。

npm install -g lighthouse
lighthouse https://www.example.com --view

Lighthouse チームに問い合わせる

新機能、9.0 リリースでの変更点、Lighthouse のその他の関連情報についてのディスカッション: