遅延読み込み
読み: ちえんよみこみ
ビューポート外の画像を初期読み込み時にはロードせず、スクロールで表示領域に近づいた時点で読み込む技術。初期表示速度を大幅に改善する。
遅延読み込み (Lazy Loading) は、ページの初期表示時にビューポート外にある画像のダウンロードを遅延させ、ユーザーがスクロールして表示領域に近づいた時点で読み込みを開始する技術である。ファーストビューの表示速度と LCP (Largest Contentful Paint) の改善に直結する。
HTML の loading="lazy" 属性を <img> タグに追加するだけで、ブラウザネイティブの遅延読み込みが有効になる。Intersection Observer API を使えば、読み込み開始のタイミングをより細かく制御できる。
注意点として、ファーストビュー内の画像 (ヒーロー画像やロゴ) には遅延読み込みを適用しない。これらは loading="eager" または fetchpriority="high" で優先的に読み込むべきである。画像最適化と組み合わせることで、画像が多いページでも初期転送量を最小限に抑えられる。レスポンシブ画像との併用で、デバイスに適したサイズの画像を必要な時だけ読み込む効率的な配信が実現する。