画像の遅延読み込み loading=lazy

<img loading="lazy" src="...">は、画像がビューポートに入る直前までブラウザーが画像のダウンロードを遅らせるよう指示します。最新の主要ブラウザーがすべてネイティブで対応しているため、画像の多いページでは最も簡単にパフォーマンスを向上できます。

ブラウザーは、小さなヒューリスティック上の余白（通常はフォールド位置より数千ピクセル下）を使用します。ユーザーが画像までスクロールする頃には完全に描画されるよう早めに読み込みを開始するため、丁寧にスクロールするユーザーには遅延読み込みが意識されません。

ファーストビュー内の画像や、LCP（Largest Contentful Paint）の候補となる画像には、決してloading="lazy"を設定しないでください。読み込みを遅延させると最も重要な視覚要素の表示が遅れ、体感速度とCore Web Vitalsの両方に悪影響を与えます。

遅延読み込みを効果的に機能させるには、<img>に明示的なwidthとheight（またはaspect-ratio CSS）を指定してください。寸法がないとブラウザーはスペースを確保できず、スクロール時にレイアウトが再配置され、遅延読み込みのヒューリスティックも正しく機能しません。

同じ属性を<iframe>にも使用できます。<iframe loading="lazy">を指定すると、フォールドより下にある地図、動画、ソーシャル埋め込みの読み込みを遅延させられます。これらは通常、ページを表示するたびに数メガバイトのサードパーティーJavaScriptを読み込む要因になります。

デフォルト値はloading="eager"（すぐに読み込む）で、通常は明示的に記述しません。ファーストビュー内の画像にeagerを設定すると、レビュー担当者にその選択が意図的であることを示すドキュメントとして役立つ場合があります。

遅延読み込みはレスポンシブ画像と完全に組み合わせて使用できます。ブラウザーは引き続きsrcsetから適切な候補を選択し、ダウンロードだけを遅延させます。loading="lazy"とsrcsetの間で追加の調整を行う必要はありません。

遅延読み込みとdecoding="async"を組み合わせると、ブラウザーはメインスレッド外で画像をデコードできます。長いスクロールの後に多数の画像が同時に読み込まれる場合でも、入力処理がブロックされるのを防げます。

CSSのbackground-imageはネイティブには遅延読み込みできません。ファーストビュー内のヒーロー背景であれば問題ありませんが、フォールドより下の背景にはIntersectionObserverを使用し、要素がビューポートに近づいたときにURLを設定してください。

ページを印刷するとき、ブラウザーはloading="lazy"に関係なくすべての画像を eager に読み込み、印刷物が完全になるようにします。印刷用スタイルシートで遅延読み込み画像を特別扱いする必要はありません。

Lighthouseの「Defer offscreen images」監査には、loading="lazy"を設定すべきすべての画像が一覧表示されます。Networkパネルで「Img」に絞り込み、「Waterfall」ビューを表示すると、遅延読み込みによる段階的な読み込みを確認できます。画像ギャラリーでは初期リクエストが大幅に減少します。

ページ上部のヒーロー画像にloading="lazy"を設定すると、なぜ問題になるのでしょうか。

画面外の<img>要素や<iframe>要素にloading="lazy"を設定するだけで、パフォーマンスを向上できます。明示的なwidth/height（スペースを確保するため）、srcset（レスポンシブ対応のため）、decoding="async"（スクロールを滑らかに保つため）と組み合わせてください。LCP画像や初期ビューポートに表示される要素には、決して適用しないでください。