遅延読み込み

遅延読み込みでは、最初のページ読み込み時にビューポートに表示されるコンテンツのみを読み込むことでパフォーマンスが向上します。スクロールせずに見える範囲にある画像は、ユーザーが画像に向かってスクロールして実際の画像のダウンロードが開始されるまで、軽量のプレースホルダーとして残ります。 HTML のloading='lazy' 属性によるネイティブの遅延読み込みは、最新のすべてのブラウザでサポートされており、JavaScript は必要ありません。 Intersection Observer API は、カスタム実装をより詳細に制御します。スクロールせずに見える範囲のヒーロー画像の場合、遅延読み込みを無効にする必要があります。これらの画像は、最大コンテンツフル ペイントを最適化するために即時読み込みする必要があります。表示されるコンテンツを遅延させる積極的な遅延読み込みは、知覚されるパフォーマンスに悪影響を及ぼします。バランスは、表示されているコンテンツについては即​​時ロードされ、その他すべてについては遅延ロードとなります。