loading="lazy"属性は、ブラウザに画像またはiframeの読み込みを延期するよう指示します。ビューポートに入る直前まで遅延させることで、帯域幅を節約し、初期読み込みを高速化します。JavaScriptは不要です。
html
< = = = = = />
lazy — スクロールでビューポート付近に近づいた場合のみ読み込み。eager (デフォルト) — 位置に関わらず、即座に読み込み。ブラウザはマージンを使用します(要素がビューに入る直前に読み込み)ため、ユーザーがそれを見るころには、通常は画像が準備できています。
<img src="x.jpg" loading="lazy" width="800" height="600" />
寸法(またはaspect-ratio)がなければ、遅延読み込みされた画像に予約スペースがないため、読み込まれるとページがジャンプし、Cumulative Layout Shift (CLS)を損傷します。常にスペースを予約してください。
<!-- ❌ the hero/LCP image should load eagerly — lazy delays it -->
<img src="hero.jpg" loading="lazy" />
<!-- ✅ -->
<img src="hero.jpg" loading="eager" fetchpriority="high" />
最大のコンテンツペイント画像の遅延読み込みは、実際にはパフォーマンスを損傷し、最も重要なピクセルを遅延させます。画面外のメディアのみ遅延読み込みしてください。
// the old manual approach native lazy-loading replaced
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => { if (e.isIntersecting) e.target.src = e.target.dataset.src; });
});
ネイティブloading="lazy"は、ほとんどの場合このニーズを排除しました(ただしIntersectionObserverはカスタムロジックには依然として有用です)。
ネイティブ遅延読み込みは、多くの画像を持つ長いページの初期バイトとリクエストを削減します — モバイルの大きな勝利 — 無料です。
ニュアンスが重要です:CLSを保護するために寸法を予約し、ビューポート上部/LCP画像をeagerに保ちます(さらにfetchpriority="high")。重要なコンテンツが確実に高速に読み込まれます。