画像の遅延読み込み（Lazy Load）とは、ページを開いた際にすべての画像を読み込むのではなく、画面に表示されるタイミングに合わせて画像を読み込む仕組みです。

適切に設定することで、初期表示時の通信量を抑え、ページの表示速度やユーザー体験の改善につながります。

本記事では、画像の遅延読み込みの仕組みや設定方法に加え、実際のページを使った改善前後の比較結果、Chrome DevToolsで読み込み状況を確認する手順を解説します。

画像の遅延読み込みとは？

画面に表示される直前まで画像の読み込みを遅らせる仕組み

通常の読み込みでは、ページ下部にある画像も初期表示時にまとめて取得するため、画像数が多いページでは通信量が増え、表示速度に影響する場合があります。

遅延読み込みを設定すると、ファーストビューなど最初に表示される画像を優先し、画面外の画像はユーザーがスクロールして表示位置に近づいたタイミングで読み込みます。

これにより、初期表示時の通信量を抑え、ページの表示速度やユーザー体験の改善につながります。

画像を遅延読み込みするメリット

ページ表示時の通信量を削減できる

画像を遅延読み込みすると、ページを開いた直後に発生する通信量を削減できます。

通常は、ユーザーがすぐに閲覧しないページ下部の画像も含め、ページ内の画像をまとめて読み込むため、画像数が多いページではデータ転送量が増加します。

特に、高画質な画像や画像を多く使用したLP・ECサイトでは、初期表示時の通信負荷が大きくなる場合があります。

遅延読み込みを設定すると、画面外の画像は読み込みを後回しにし、ユーザーがスクロールして表示位置に近づいたタイミングで取得します。

そのため、初期表示に必要な通信量を抑えられ、重要な画像やコンテンツを優先して表示しやすくなります。

モバイル通信環境では、通信量の節約やページ表示の安定化にもつながります。

表示速度の改善につながる

画像の遅延読み込みは、ページの初期表示時に読み込む画像を減らすことで、表示速度の改善につながります。

通常の読み込みでは、ページ下部にある画像も含めて多くのファイルを同時に取得するため、通信回線やブラウザの処理に負荷がかかり、重要なコンテンツの表示が遅くなる場合があります。

遅延読み込みを設定すると、画面外の画像を後から読み込むため、ファーストビューに必要な画像やテキストの表示を優先しやすくなります。

特に画像数が多いLPやECサイトでは、初期表示時の通信量を抑える効果が期待できます。

ただし、ファーストビューやLCPの対象となる重要な画像まで遅延読み込みすると、かえって表示速度が低下する可能性があるため、設定する画像を適切に選ぶことが重要です。

モバイル環境で効果を発揮しやすい

画像の遅延読み込みは、通信速度や端末性能の影響を受けやすいモバイル環境で、特に効果を発揮しやすい施策です。

スマートフォンでは、Wi-Fiだけでなく4G・5Gなどのモバイル回線を利用するため、通信状況によっては画像の読み込みに時間がかかる場合があります。

また、パソコンと比べて処理性能やメモリが限られる端末では、多数の画像を一度に読み込むことでページの表示や操作が重くなる可能性もあります。

遅延読み込みを設定すると、画面外の画像を後回しにし、最初に表示されるコンテンツを優先して読み込めるため、初期表示時の通信量や端末への負荷を抑えられます。

画像数が多いLPやECサイトでは、表示速度の改善やユーザー体験の向上につながることが期待できます。

【独自検証】画像の遅延読み込みの比較・検証の方法

実際に検証用で用意したページを活用し、遅延読み込みした場合としていない場合のビフォーアフターを検証しました。

どの程度、何が変わるのか解説していきます。

検証環境

下記の内容で検証を実施しました。

検証方法

画像の左側のページには画像の遅延読み込みの属性の挿入は無し

画像の右側のページにはページの上から2番目以降の画像全てに遅延読み込みの属性（loading="lazy"）を挿入。

※HTMLの内容は上記の箇所以外、全く同じページとなります。

上記画像のように右側のページ画像には一番上の画像以外、全てloading="lazy"を挿入している状態で計測します。

この状態で一緒にページを読み込みそれぞれの数値を計測していきます。

計測する数値について

画像の遅延読み込みの検証結果

まずは先に結果からお伝えします。

画像の遅延読み込みを実施するにあたり、下記のような結果が出ました。

※全てファーストビュー表示時点の数値です。

ファーストビュー表示時点で、画像の遅延読み込みを実施したページでは読み込みに大きな差が生まれました。

初期リクエスト数、初期転送量、LCPの数値それぞれに表示速度の改善が見られています。

また、今回の検証ページは比較的読み込みが軽めなページであったため、あまり大きな変化がなかったので記載してはいませんが、java scriptなどが多いページ等、読み込みが重いページの場合、画像の遅延読み込みで読み込みが減る分、接続の帯域に余裕が生まれる点からFCPの数値なども良くなることも期待できます。

画像の遅延読み込みの検証内容を詳しく解説

実際に検証してみた結果を動画で撮影しました。

下記で実際の検証している動画が見れます。

動画の内容は下記のような構成になっています。

1. loading="lazy"挿入の内容確認
2. LCPの計測結果
3. ファーストビューの読み込み状況の確認（ウォーターフォール）
4. スクロール時の読み込み状況の確認（ウォーターフォール）

１つ１つ下記で解説していきます。

LCPの数値の変化

検証の結果、左側（画像の遅延読み込みなし）のLCPは4.17sとなり

右側（画像の遅延読み込みあり）のLCPは1.04sとなりました。

※LCPについて詳しくはLCPとはをご覧ください。

これはファーストビュー内の一番大きなコンテンツ（この場合は一番上の画像）が表示されるまでにかかった時間となります。

遅延読み込みなしの場合は、ページ下部にある画像も同時に読み込むため、ファーストビュー画像を完全に読み込めるまでに約4秒近くかかっていることがわかります。

遅延読み込みありの場合は、ファーストビューに必要な画像だけ読み込むだけなので、約1秒で読み込みが完了したことになります。

おおよそ4倍近くの差が生まれていることがわかります。

読み込み方の変化

こちらはファーストビューからの読み込み方をウォーターフォールを使って確認した画像です。

赤い枠で表示しているように、左側（画像の遅延読み込み無し）は下部の画像もファーストビューが表示され始めてる段階で読み込みが始まっていることがわかります。

右側の（画像の遅延読み込みあり）はファーストビューに必要な要素の読み込みが終わるとそれ以降の画像は読み込まれてはいないことがわかります。

こうなることで、画像の遅延読み込みありの方はファーストビューに必要最低限の読み込みで済むため、ファーストビュー画像の読み込みも早くなるということになります。

スクロール時の変化

こちらはスクロール時の動きの違いを検証した画像です。（動画内でも見れます）

上記画像は左側（画像の遅延読み込みなし）のスクロール時の動きを示した画像です。

既にページ下部の画像まで読み込まれているため、スクロールしてもこれ以上読み込みが発生しません。

上記画像は右側（画像の遅延読み込みあり）のスクロール時の動きを示した画像です。

下にスクロールしていくにつれ、まだ読み込まれていなかったページ下部の画像が順次読み込まれていきます。

（画像でわかりにくい場合は動画をご覧ください。）

画像の遅延読み込みは、スクロールしながら必要なタイミングで必要な分の画像を読み込んでいくため、画像が多いページでも読み込みが遅く感じることは少ないと思います。

画像を遅延読み込みする方法

HTMLで画像タグに「loading="lazy"」を設定するだけ

コード例

<img
  src="image.webp"
  alt="画像の説明"
  loading="lazy"
>

imgタグにloading="lazy" を追加すると、ブラウザが画像の読み込みを遅延させます。

この属性を入れるだけで指定した画像を遅延読み込みさせることができます。

Chrome DevToolsで遅延読み込み状況を確認する方法

手順1｜Chrome DevToolsを開く

まずは下記の手順でChrome DevToolsを開きます。

1. 対象ページを開く
2. 右クリック
3. 「検証」を選択
4. DevToolsを開く

Chrome DevToolsを開くと下記のような画面になります。

手順2｜Networkタブを選択する

Chrome DevToolsの上部にあるネットワークタブをクリックして開きます。

赤枠にある「キャッシュを無効化」にもチェックを入れるようにしましょう。

キャッシュが残っていると、画像の通信が正しく確認できない場合があるためです。

また、必須ではありませんが下記のように画像を選択すると画像の通信状況だけ見れるようになり、画像の遅延読み込み状況や効果がわかりやすくなります。

手順3｜ページを再読み込みする

手順２まで準備ができたら、その状態からページを再読み込みします。

すると、下記のように読み込まれたファイルと読み込みにかかった時間の割合がわかります。（ウォーターフォール）

更に、この画面では下記の情報も確認することができます。

• 初期表示時に何枚の画像が読み込まれたか（リクエスト数）
• ページ下部の画像が通信されていないか（読み込まれたファイルを確認）
• 初期転送量はどの程度か（転送量）

遅延読み込みができているか？リクエスト数や転送量は実際に減っているか？

これらをチェックして、遅延読み込みの効果や変化をチェックすることができます。

手順4｜ページをスクロールする

画像の左側にあるページの部分をスクロールします。

すると遅延読み込みができている場合は、スクロール後に下部の画像ファイルが順次読み込まれていきます。

ポイント

• スクロール後に画像通信が発生するか
• 画面に近づいた画像だけが読み込まれるか

これらをチェックして、正しく遅延読み込みができているか確認していくことをお勧めします。

画像の遅延読み込みで注意すべきポイント

ファーストビューの画像には設定しない

注意点としては、ファーストビューの画面上で表示される画像については、遅延読み込みの属性は設置させないということです。

LCP画像に loading="lazy" を設定すると、画像の読み込み開始が遅れ、LCPが悪化する可能性があります。

これはファーストビューの画像は、優先的に読み込ませる必要があるためです。

効果を最大限得るにはファーストビューから外れる画像には、全てloading="lazy"を設置することをお勧めします。

LCP画像は優先して読み込む

画像の遅延読み込みを導入する際は、LCP（Largest Contentful Paint）の対象となる画像をプリロードし、優先的に読み込むことで更に効果を得れる場合があります。

LCP画像はファーストビュー内で最も大きく表示される画像であり、トップページのメインビジュアルや商品画像などが該当します。

これらの画像はページの表示速度に大きな影響を与えるため、loading="lazy"を設定せず、<link rel="preload">を利用して早い段階で取得することが推奨されます。適切に設定することで、ブラウザは重要な画像を優先的に読み込み、LCPの改善やユーザー体験の向上につなげることができます。

参考ソース

<link
  rel="preload"
  as="image"
  href="mainvisual.webp"
>

画像が表示されるまで時間がかかる場合がある

画像の遅延読み込みは表示速度の改善に効果的ですが、設定方法によっては、ユーザーがスクロールした際に画像の表示が間に合わず、一時的に空白の領域が表示されることがあります。

特に、通信速度が遅い環境や画像サイズが大きい場合は、この現象が起こりやすくなります。対策としては、画像が画面内に表示される直前ではなく、少し手前の段階から読み込みを開始することが重要です。

また、Intersection Observer APIを利用している場合は、rootMarginの値を調整し、監視範囲を広げる方法も有効です。

さらに、WebPやAVIF形式を利用した画像の圧縮や、不要な高解像度画像の見直しを行うことで、表示の遅延を抑えられます。

画像の遅延読み込みに関するよくある質問

Q. 遅延読み込みはSEOに効果がありますか？

間接的な効果が期待できます。画像の遅延読み込みによって表示速度が改善されると、Core Web Vitalsの指標向上につながる可能性があります。

Googleはページ体験をランキング要素の一つとしているため、適切な設定を行うことでSEOにも良い影響を与える場合があります。

ただし、遅延読み込み自体が順位を直接上げるわけではありません。

Q. すべての画像に遅延読み込みを設定しても問題ありませんか？

すべての画像に設定することはおすすめできません。ファーストビューに表示されるメイン画像まで遅延読み込みの対象にすると、LCPの悪化を招く可能性があります。

特に、ヒーロー画像やロゴ、重要なバナーなどは通常どおり読み込み、画面外の画像だけに適用することが大切です。

Q. HTMLだけで遅延読み込みを実装できますか？

はい、可能です。現在の主要なブラウザでは、loading="lazy" 属性を追加するだけで遅延読み込みを実装できます。

JavaScriptライブラリを導入する必要がないため、比較的簡単に導入できる点も大きなメリットです。

ただし、古いブラウザでは十分に機能しない場合があるため、事前に対応状況を確認しましょう。

Q. JavaScriptを使った遅延読み込みと何が違いますか？

HTMLのloading="lazy"はブラウザの標準機能を利用する方法であり、実装が簡単という特徴があります。

一方、JavaScriptのIntersection Observer APIを利用する方法は、表示タイミングを細かく制御できるというメリットがあります。

柔軟性を重視する場合はJavaScript、手軽さを重視する場合はHTML属性の利用がおすすめです。

Q. 遅延読み込みで画像が表示されない場合の原因は？

画像の遅延読み込みを設定したにもかかわらず画像が表示されない場合は、設定ミスやブラウザの動作が原因であることが少なくありません。

代表的な原因としては、画像のURLが間違っている、loading="lazy" の設定位置が適切ではない、JavaScriptのエラーが発生している、CSSによって画像が非表示になっている、といったケースが挙げられます。

また、Intersection Observer API を利用している場合は、監視対象の設定が正しく行われていない可能性もあります。

Chrome DevToolsの「Network」タブで画像の取得状況を確認し、「Console」タブでエラーが発生していないかを調査することで、原因を特定しやすくなります。

画像の遅延読み込みまとめ

画像の遅延読み込みは、画面に表示されていない画像の取得を後回しにすることで、初回表示時の通信量やリクエスト数を削減する仕組みです。

HTMLのloading="lazy"属性を追加するだけで簡単に導入でき、表示速度の改善やユーザー体験の向上につながります。

ただし、ファーストビューに表示されるLCP画像まで遅延読み込みの対象にすると、かえって表示速度が低下する可能性があるため注意が必要です。

また、効果を正確に把握するには、Chrome DevToolsのNetworkタブやPerformanceタブを利用し、同じ通信環境・同じ端末条件で比較を行うことが重要です。

適切に活用することで、LPやECサイトのパフォーマンス改善に大きく貢献します。