Lighthouse はウェブサイトの監査ツールです。Lighthouse は、サイトのユーザー エクスペリエンスを改善するための最適化案と診断情報を提供します。
Lighthouse 10 は、npm によるコマンドラインと Chrome Canary ですぐに利用できます。Chrome 112 の Chrome Stable 版と、今後数週間以内に PageSpeed Insights に実装される予定です。
スコアの変更
従来の Time To Interactive（TTI）指標は Lighthouse 10 で削除され、Lighthouse 8 で開始されたサポート終了プロセスは終了となります。TTI の 10% のスコアの重みは Cumulative Layout Shift（CLS）に移行され、全体的なパフォーマンス スコアの 25% を占めるようになります。
TTI は特定の時点をマークしますが、その定義方法では、外れ値のネットワーク リクエストや長いタスクに対して過度に敏感になります。Largest Contentful Paint（LCP）と Speed Index は通常、アクティブなネットワーク リクエストの数よりも、ページのコンテンツが読み込み済みのと感じる場合のヒューリスティックに優れています。一方、Total Blocking Time（TBT）は、長いタスクとメインスレッドの可用性をより堅牢に処理します。直接的な代替手段ではありませんが、現場で測定される Core Web Vitals との相関性が高い傾向があります。
CLS の重みの増加は、TTI の削除に伴うものですが、Core Web Vitals としての重要性をより適切に反映しており、不必要にレイアウト シフトを行うサイトに重点を置くことが理想的です。
これにより、ほとんどのページのパフォーマンス スコア。ほとんどのページのスコアが TTI よりも CLS で高い傾向にあります。最新の HTTP Archive 実行での 1,300 万回のページ読み込みを分析したところ、これらのページの 90% で Lighthouse のパフォーマンス スコアが改善され、50% のページで 5 ポイント以上のパフォーマンス改善が確認されました。
なんらかの理由で（CI アサーションなどで）Lighthouse の TTI 値が引き続き必要な場合は、Lighthouse JSON 出力では変更せずにスコアの重みが 0 となり、HTML レポートでは非表示となります。JSON 値へのスクリプトによるアクセスは、変更なしで引き続き機能します。
新しい監査
Lighthouse 10 では、まったく新しいパフォーマンス監査と重要な変更が行われます。
バックフォワード キャッシュ
バックフォワード キャッシュ（bfcache）は、実際のユーザーにとってのページ パフォーマンスを向上させるための最も強力なツールです。bfcache から読み込まれたページは、通常のブラウザ キャッシュのほかに、ページ レイアウトと実行状態がほぼ瞬時に復元されます。ページ読み込みのアクティビティはほぼすべてスキップされ、ユーザーが履歴を前後に移動するとすぐにページが表示されます。
ただし、ブラウザが bfcache からページを復元できないようにする方法はいくつかあります。この新しい Lighthouse 監査では、テストページから離れ、再び bfcache 可能かどうかをテストし、失敗した場合はその理由をリストします。
詳しくは、bfcache 監査のドキュメントをご覧ください。
ペースト防止の入力
従来のベスト プラクティスの監査「ユーザーによるパスワード欄への貼り付けを許可する」が拡張され、任意の（読み取り専用以外の）入力フィールドへの貼り付けが機能することを確認しました。ほとんどのサイトでは、貼り付けを禁止するとユーザー エクスペリエンスにマイナスの影響が及ぶことになり、安全性やユーザー補助に関する正当なワークフローの妨げとなります。
新しい監査は、[ユーザーによる入力フィールドへの貼り付けを許可する] になりました。（paste-preventing-inputs）。
ノードユーザー
Lighthouse を Node ライブラリとして使用する場合、このリリースには、プログラムによる互換性を破る変更がいくつか加えられ、考慮しなければならない場合があります。詳しくは、10.0 の変更履歴をご覧ください。
Lighthouse 10 には TypeScript の型宣言もすべて含まれています。lighthouse からインポートしたものをすべて型入力するようになりました。これは、Lighthouse ユーザーフローをスクリプト化する場合に特に便利です。
タイプを試してみて、その使用で問題が発生した場合はお知らせください。
ランニング中の灯台
Lighthouse は、Chrome DevTools、npm（Node モジュールおよび CLI ツール）、ブラウザ拡張機能（Chrome、Firefox）で利用できます。また、PageSpeed Insights をはじめとするいくつかの Google サービスにも採用されています。
Lighthouse Node CLI を試すには、次のコマンドを使用します。
npm install -g lighthouse
lighthouse https://www.example.com --view
Lighthouse チームに問い合わせる
新機能や Lighthouse 10 リリースでの変更点など、Lighthouse に関連する内容についての意見交換:
- Lighthouse GitHub Issue Tracker で問題を報告するか、フィードバックを送信します。
- Lighthouse GitHub ディスカッション フォーラムで質問してください。
- Twitter（@____lighthouse）で Lighthouse チームに連絡します。