画像の遅延読み込みは、画像がビューポートに近づくまで読み込みを遅らせます。正しく実装すると、画像の多いページの初期ページウェイトを 40〜70% 削減できます。誤った実装 — 最もよくあるケースは LCP 画像を遅延読み込みすること — では、最も重要なパフォーマンス指標に 500 ms 以上が加算されます。

ネイティブ遅延読み込み

最もシンプルな実装は loading="lazy" HTML 属性です。ブラウザサポートは現在 96%+ です。サポートしていないブラウザは属性を無視して即座に読み込みます — JavaScript フォールバックは不要です。

LCP の罠：ヒーロー画像に遅延読み込みを絶対に使わない

最も一般的な遅延読み込みのミスは、ページの最初の表示画像（多くの場合 LCP 候補のヒーローやバナー画像）に loading="lazy" を追加することです。LCP 画像が遅延読み込みされると、ブラウザはトリガーが発火するまでリクエストを遅延させ、LCP に 300〜600 ms が加算されます。

修正: above-the-fold 画像には loading="lazy" を追加しないでください。代わりに fetchpriority="high" を追加します。

遅延読み込みと WebP の組み合わせ

遅延読み込みは初期ロード時に取得する画像数を削減します。WebP への変換は各リクエストのサイズを削減します。Picovert で画像を変換しましょう。

Next.js での遅延読み込み

Next.js の next/image はデフォルトですべての画像に loading="lazy"を適用します。LCP 画像には priority prop を追加して無効化します。priority は loading="eager"・プリロードリンク・fetchpriority="high" の 3 つすべてのシグナルを設定します。

よくあるミスのチェックリスト

above-the-fold 画像の遅延読み込み。
遅延読み込み画像への width・height の指定漏れ。
遅延読み込みを圧縮の代替として使用。 まず圧縮しましょう。
すぐに表示されるカルーセル画像の遅延読み込み。