遅延読み込みのWeb Vitals指標への影響

遅延読み込みとWeb Vitals

遅延読み込みは、リソースが必要になるまで（通常ビューポートに入るか近づくまで）読み込みを遅延させます。強力な最適化技術ですが、不適切に適用するとWeb Vitalsを悪化させる可能性があります。

遅延読み込みとLCP

LCP画像には絶対に遅延読み込みしないでください。 LCP画像は初期ロード時にビューポート内にあるため、遅延読み込みは不必要な遅延を追加します。

<!-- 悪い例：LCP画像に遅延読み込み -->
<img src="hero.webp" alt="ヒーロー" loading="lazy">

<!-- 良い例：LCP画像は即座に読み込む -->
<img src="hero.webp" alt="ヒーロー" fetchpriority="high">

<!-- 良い例：フォールド下の画像を遅延読み込み -->
<img src="gallery-3.webp" alt="ギャラリー" loading="lazy">

遅延読み込みとCLS

明示的なサイズ指定のない遅延読み込み画像は、読み込まれて0x0から自然なサイズに展開されるときにレイアウトシフトを引き起こします：

<!-- 良い例：スペースを確保 -->
<img src="photo.webp" alt="写真" loading="lazy" width="400" height="300">

ベストプラクティス

1. ファーストビューのコンテンツには遅延読み込みしない
2. 遅延読み込み画像には常にサイズを指定
3. シンプルさのためにネイティブloading="lazy"を使用
4. JS実装では読み込み閾値を検討（ビューポートの200-300px手前から読み込み開始）
5. 埋め込みコンテンツにはiframeを遅延読み込み