Lighthouse 8.4 はコマンドラインと Chrome Canary ですぐに入手できます。 Chrome 95 で Chrome Stable として提供され、1 週間以内に PageSpeed Insights で利用できるようになります。
Lighthouse Node CLI を試すには、次のコマンドを使用します。
npm install -g lighthouse
lighthouse https://www.example.com --view
変更の完全なリストについては、8.4 の変更履歴をご覧ください。
新しい監査
Largest Contentful Paint 画像を遅延読み込みしない
画像の遅延読み込みは、画面外の画像を遅らせることで、スクロールせずに見える範囲のコンテンツの読み込みを妨げないようにする効果的な方法です。
ただし、ページの LCP 要素が画像の場合、遅延読み込みを行うと LCP に重大な悪影響を及ぼす可能性があります。ブラウザは、画像をすぐにダウンロードするのではなく、その画像をキューに入れて、先に他のリソースをフェッチする場合があります。WordPress の遅延読み込みに関する最近の調査によると、一部のサイトでは、最初のビューポートの画像の遅延読み込みをしない場合、LCP が最大 15% 改善されることがわかりました。
Lighthouse では、LCP 要素が遅延読み込みの画像であるかどうかが検出され、そこから loading 属性を削除することをおすすめします。
詳しくは、最初の提案および実装の pull リクエストをご覧ください。
モバイル ビューポートを設定して初回入力遅延を改善する
viewport の監査は長年、ベスト プラクティス カテゴリの一部でしたが、8.4 ではパフォーマンス カテゴリでもこのアドバイスを歓迎しています。
多くのモバイル ブラウザは「ダブルタップでズーム」に対応していますモバイル画面向けではないコンテンツ（モバイルの <meta name="viewport"> が明示されていないコンテンツ）を簡単に拡大できるようになりました。つまり、ブラウザはユーザーがタップしてから 2 回目のタップが続くかどうかを確認するために 300 ミリ秒も待つ必要があり、その間はページが最初のタップに反応しないことになります。これは、数百ミリ秒の FID の失敗を意味します。
HTTP Archive のデータに関する最近の調査では、Lighthouse のスコアが 90 以上のものの 1 つ以上の Core Web Vitals で不合格となったサイトの半数以上が、モバイル ビューポートが設定されておらず、FID で不合格となっていました。その結果、何も見つからなかった場合は、次のようなビューポートを追加することをおすすめします。
<meta name="viewport" content="width=device-width">
詳しくは、プロポーザルの問題と実装の pull リクエストをご覧ください。
Lighthouse チームへのお問い合わせ
新機能やバージョン 8.4 での変更点など、Lighthouse の関連情報についてのディスカッション:
- Lighthouse GitHub リポジトリから問題を報告するか、フィードバックを送信します。
- Twitter（@____lighthouse）で Lighthouse チームに連絡します。