サイト制作
画像に全部loading=lazyを付けていい？最初に見える画像は分けて考える
2026-11-01
この記事には広告・アフィリエイトリンクが含まれます。
画像の遅延読み込みは、画面の外にある画像で役立ちます。最初に表示したい大きな画像まで待たせないための判断手順を整理します。
最初に見せたい画像を待たせない
loading=lazyは、画像を必要になる頃まで遅らせて読み込むための指定です。長い記事の下にある写真などが候補になります。一方、ページを開いてすぐ見える大きな画像は、最初から読み込む対象として考えます。特にLCPの対象となる主要画像を遅延させると、その表示を待たせる原因になります。すべての画像に一括で付ける前に、スマートフォンで最初に何が見えるかを確認しましょう。
lazyでも寸法の指定は必要
画像には内容に合うwidthとheightを設定し、読み込み前にも縦横比を確保します。画像が届いてから突然余白が広がると、読んでいた文章や押そうとしたボタンが動くことがあります。遅延読み込みは画像を小さくする処理ではありません。元の画像が過大なら、表示サイズに合うファイルやsrcsetなどの配信方法も別に見直します。lazyを付けたことだけで軽量化が終わったとは判断できません。
優先度の指定と遅延を混同しない
fetchpriority=highは重要な画像の読み込み優先度をブラウザーに伝えるヒントです。lazyと組み合わせても、遅延対象の画像が必ず最初から取得されるわけではありません。主要画像の扱いを先に整理し、必要な場合に優先度を検討します。画面外のどの距離から取得するかはブラウザーなどの条件で変わります。「スクロールして見えた瞬間にだけ読む」とは限りません。
変更前後を同じ条件で見る
確認するのは属性の有無だけではなく、実際の表示です。端末の幅、通信条件、キャッシュの状態をそろえて、主要画像の表示とスクロール先の写真を見比べます。最初の写真は早くても、次の写真が長く空白なら調整の余地があります。数値と画面の両方を見て、読者が待つ場所を減らしていきましょう。
