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 以上であっても Core Web Vitals が 1 件以上不合格となったサイトの半数以上は、モバイル ビューポートが設定されておらず、FID に失敗していました。そのため、Lighthouse のパフォーマンス セクションでは、ビューポートが見つからない場合は、次のようなビューポートを追加することが推奨されます。
<meta name="viewport" content="width=device-width">
詳しくは、プロポーザルの問題と pull リクエストの実装をご覧ください。
Lighthouse チームへのお問い合わせ
新機能、バージョン 8.4 での変更点、その他 Lighthouse 関連の問題について説明するには:
- 問題の報告やフィードバックの送信には、Lighthouse GitHub リポジトリをご利用ください。
- Lighthouse チームには、Twitter（@____lighthouse）でお問い合わせください。