[レベル: 中級]
Search Off the Record ポッドキャストのエピソード 98 では、John Mueller（ジョン・ミューラー）氏と Martin Splitt（マーティン・スプリット）氏が Lazy Loading（レイジーローディング）をテーマにディスカッションしました。
Lazy Loading は、画像や動画のような重要でないリソースの読み込みを、必要になるまで遅延させる技術です。
主にコアウェブバイタルを改善できるパフォーマンス最適化の手法です。
しかし、特にカスタムスクリプトによる不適切な実装は、インデックス登録やユーザーエクスペリエンスに悪影響を与える可能性があります。
この記事では、2 人のディスカッションのハイライトをまとめます。
Lazy Loading ディスカッションの主要ポイント
- 主な機能:
Lazy Loading の主な目的は、ユーザーのビューポートに入るまでリソースの読み込みを遅らせることによるパフォーマンスの向上である。これにより、ネットワークトラフィックとバッテリー消費が節約される。特に長いページで有益だが、ほぼすべてのページで役立つ。 - コアウェブバイタルを通じた SEO への影響:
Lazy Loading の主な SEO 効果は、コアウェブバイタルに影響を与えるパフォーマンスの改善である。特に、ページ読み込み時に即座に表示される領域（ファーストビュー）の画像に誤って Lazy Loading を適用すると、Largest Contentful Paint (LCP) のスコアに悪影響を及ぼす可能性がある。 - ネイティブ実装とカスタム実装:
最近のブラウザは、画像や iframe に対してネイティブのloading="lazy"属性をサポートしており、これが最もシンプルな方法である。しかし、低解像度のプレビューを読み込んだり、動画やコメントといった他のコンテンツを遅延読み込みしたりするなど、より高度な機能のためには依然としてカスタム JavaScript ライブラリが一般的に使用されている。 - カスタムスクリプトによるインデックス登録のリスク:
ネイティブの Lazy Loading がインデックス登録に与える影響は最小限であるが、カスタム JavaScript の実装は問題を引き起こす可能性がある。スクリプトが画像の URL を適切なsrc属性に配置できなかった場合、Googlebot がその画像を見つけてインデックス登録できないことがある。 - 実装の確認方法:
Lazy Loading が SEO に対して正しく機能しているかを確認するには、Google Search Console の URL 検査ツールを使用する。レンダリングされた HTML をレビューし、すべての画像が<img>タグのsrc属性にURL付きで表示されているか、また遅延読み込みされた他のコンテンツが完全に読み込まれているかを確認する。 - ファーストビューコンテンツのベストプラクティス:
ヒーロー画像など、ページの読み込み時に即座に表示される画像には Lazy Loading を適用すべきではない。これを行うと、ブラウザに重要な視覚要素の読み込みを不必要に遅らせるよう指示することになり、LCP とユーザーエクスペリエンスを損なう。 - Lazy Loading と動画:
リソースを大量に消費する動画は、 Lazy Loading の良い候補である。一般的な手法として、まずポスター画像（サムネイル画像）を表示し、ユーザーがその場所までスクロールするか再生ボタンをクリックしたときにのみ完全な動画を読み込むようにする。 - 無限スクロールと Lazy Loading:
無限スクロールは、ユーザーがページを下にスクロールするにつれて新しいコンテンツを順次読み込む関連技術である。これは、全く新しいコンテンツを読み込むのではなく、通常は同じページ内の重要でない部分のコンテンツを遅延させる Lazy Loading とは異なる。 - 装飾用の画像:
アイコンやカスタムの箇条書きマークなど、小さな装飾画像は、一般的に<img>タグではなく CSS で処理すべきである。これにより、主要なコンテンツと意味的に区別され、CSS 経由で読み込まれた画像は通常インデックス登録されない。
以上です。
LCP に該当する画像やファーストビューは素早く読み込まれるべきなのに Lazy Loading を設定するとかえって速度パフォーマンスを低下させてしまうことには注意が必要です。
また、装飾用の 画像にも Lazy Loading は使う必要はなく、CSS で読み込ませます。