Lighthouse はウェブサイトの自動監査ツールで、サイトのユーザー エクスペリエンスを改善するための最適化案や診断情報を提供します。このライブラリは、Chrome DevTools、npm(Node モジュールと CLI として)、またはブラウザの拡張機能(Chrome と Firefox)で使用できます。web.dev/measure や PageSpeed Insights など、多くの Google サービスを支えています。
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)でお問い合わせください。