Lighthouse はウェブサイトの監査ツールで、デベロッパーの皆様がサイトのユーザー エクスペリエンスを改善するための最適化案や診断情報を提供します。
Lighthouse 10 は、npm を使用するコマンドラインと Chrome Canary ですぐにご利用いただけます。今後数週間のうちに、Chrome 112 の Stable 版と PageSpeed Insights でリリースされる予定です。
スコアの変化
従来の「操作可能になるまでの時間（TTI）」指標は Lighthouse 10 から削除され、Lighthouse 8 で開始されたサポート終了プロセスが完了する運びとなりました。TTI の 10% のスコアの重み付けは、Cumulative Layout Shift（CLS）に移行し、全体的なパフォーマンス スコアの 25% を占めるようになります。
TTI は特定の時点を示しますが、その定義方法では、外れ値のネットワーク リクエストや長時間のタスクに過度に敏感になります。通常、Largest Contentful Paint（LCP）と速度インデックスは、アクティブなネットワーク リクエストの数よりも、ページのコンテンツが読み込まれたと感じられるためのヒューリスティックです。一方、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）は、実際のユーザーのページのパフォーマンスを向上させるのに役立つ非常に強力なツールの 1 つです。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 ディスカッション フォーラムで質問してください。
- Lighthouse チームには、Twitter（@____lighthouse）でお問い合わせください。