Lazy Loadとは？仕組みや使い方など注意点もわかりやすく解説

2025年10月3日

Webサイトの表示速度改善に欠かせない「Lazy Load（遅延読み込み）」について仕組みから実践的な使い方まで、SEO効果まで初心者にもわかりやすく解説します。

また、「Lazy Load」の施策はLCPの改善にも大きく影響してくるものなので、改善したいという方は是非ご覧下さい。

LCPについて詳しくは「LCPとは？重要性から計測の仕組み」の記事をご覧下さい。

Lazy Loadとは？

Lazy Load（遅延読み込み）とは、Webページに含まれる画像や動画を「遅延読み込み」する技術のことです。

通常、ブラウザはページを開いた瞬間にすべての画像を一括で読み込もうとしますが、Lazy Loadを導入すると、ユーザーが実際に見ている画面範囲（ビューポート）内の画像のみを優先的に読み込みます。

※読み込みイメージ

画面外にある画像は、ユーザーがスクロールして画像が表示範囲に近づいた時点で初めて読み込みを開始します。

この仕組みにより、初回のページ表示速度が劇的に向上し、データ通信量の削減とユーザー体験の改善を同時に実現できます。

Lazy LoadはLCP指標やSEOにも重要

通常、画像や読み込みに時間のかかるコンテンツが多いサイトでは、すべての画像を一度に読み込むと初期表示に時間がかかります。

そうなると、ユーザー体験も損なわれ、ユーザーの離脱率が上がってしまいます。

Lazy Loadを導入すれば表示時間を短縮でるため、ユーザー体験も向上し離脱率低下にも貢献してくれます。

GoogleのCore Web VitalsにあるLCPの指標にも関わってくる要素で、LCPの表示速度が改善されることで検索順位の改善も期待できます。

ここで関連してくるLCPについても「LCPの改善方法」のページで是非チェックしておきましょう。

現代のWebサイトでは表示速度がユーザー体験とSEO評価に直結するため、Lazy Loadの導入が不可欠です。

Core Web Vitalsに関しては「Core Web Vitalsとは」の記事をご覧下さい。

Lazy Loadの仕組みをわかりやすく

Lazy Loadは「必要な時だけ画像を読み込む」仕組みです。

通常、Webページを開くとすべての画像が一度にダウンロードされますが、Lazy Loadでは最初に軽量なダミー画像を表示し、実際の画像データは後から読み込みます。

ユーザーがページをスクロールして、Lazy Loadさせた画像が画面に近づくと、システムが自動的に検知して本物の画像に置き換えます。

まるで「見えそうになったら慌てて準備する」ような動作で、初回のページ表示を高速化できます。

この技術により、大量の画像があるサイトでもスクロールで必要になった部分だけが読み込まれ、軽快に動作しデータ通信量も大幅に削減されます。

Lazy Loadを使った場合の読み込み方法の違い

Lazy Loadを使った場合と使わない場合の読み込みの違いについてまとめました。

下記が違いをまとめた表になります。

項目	通常の読み込み	Lazy Load読み込み
読み込みタイミング	ページ表示と同時に全画像を一括読み込み	ユーザーのスクロールに応じて段階的に読み込み
初期表示データ量	全画像分のデータを一度に取得	ビューポート内の画像のみ取得
初期表示速度	遅い（全画像待ち）	速い（必要最小限の読み込み）
データ通信量	多い（未表示画像も含む）	少ない（表示される画像のみ）
サーバー負荷	高い（同時リクエスト多数）	低い（分散されたリクエスト）

通常の画像読み込みでは、ページを開いた瞬間にすべての画像を一括でダウンロードするため、初期表示に時間がかかります。

例えば5つの画像があれば、1つ目のimgタグ発見時点から5つ目まで順次読み込みが開始され、すべての画像が揃うまでページ表示が完了しない仕組みになっています。

一方、Lazy Loadでは画面に表示される画像のみを優先的に読み込み、画面外の画像はユーザーがスクロールした時点で段階的に取得します。

この違いにより初期表示時間を短縮し、データ通信量も削減できるため、ユーザー体験が大幅に改善されます。

読み込みのタイムラインのイメージを比較

通常の場合とLazy Loadの場合で読み込み方の違いをタイムラインで解説してみます。

通常の読み込みの場合は、下記のようなタイムラインとなります。

通常の読み込みだと、画像などのコンテンツが同時に読み込まれていることがわかります。

インターネット回線には帯域幅という制限があり、5つの画像を同時に読み込むと限られた帯域幅を5分割して使うため、1つあたりの速度が大幅に低下します。

Lazy Loadさせた場合のタイムラインのイメージが下記となります。

LCPになる画像だけ通常の読み込みをさせ、それ以外の画像をLazy Loadさせた例です。

上記のようにLCP画像だけ先に読み込まれることで、1つの画像だけが読み込まれるため圧倒的に読み込みから表示までの速度が上がります。

重要度の低い画像や、画面に表示されてない画像はLazy Loadで後から読み込ませている例です。（黄色いライン）

上記の画像はあくまで例ですが、早く表示させたいLCP画像に関して通常7秒かかっていた画像が4秒で表示されるような効果が期待できます。

Lazy Loadの使い方をわかりやすく

Lazy Loadのさせ方は簡単で、Lazy Loadさせたい要素に「loading="lazy"」を追記するだけで使えます。

下記は画像のHTMLソース例で、通常のHTMLとLazy Load対応のHTMLの例です。

<!-- 従来の書き方 -->
<img src="image.jpg" alt="説明文">

<!-- Lazy Load対応 -->
<img src="image.jpg" loading="lazy" alt="説明文">

上記のようにLazy Loadが必要な部分に「loading="lazy"」を追記してあげましょう。

更に実践的な使用例です。

<body>
    <!-- LCP画像（すぐ表示したいので通常読み込み） -->
    <img src="hero-image.jpg" alt="メイン画像" width="800" height="400">
    
    <!-- ページ下部にある画像など（遅延読み込み）-->
    <img src="gallery1.jpg" loading="lazy" alt="ギャラリー1" width="400" height="300">
    <img src="gallery2.jpg" loading="lazy" alt="ギャラリー2" width="400" height="300">
    <img src="gallery3.jpg" loading="lazy" alt="ギャラリー3" width="400" height="300">
</body>

上記のようにLCP画像など、すぐに表示したい要素のHTMLはそのまま記載し、優先度の低い要素には全て「loading="lazy"」を追記しています。

すぐに表示が必要なものと、必要ではないものを使い分けることがポイントです。

Lazy Load使用時の注意点

Lazy Loadは表示速度も早くするために必須の手段ではありますが、注意点もありますので解説していきます。

ファーストビュー画像への適用禁止

「loading="lazy"」はファーストビュー画像には使用せず、通常読み込みをさせるようにしましょう。

ファーストビュー画像にLazy Loadを使用してしまうと、ページを読み込んだ際になかなか画像が表示されずユーザー体験が悪くなり離脱率が上がる要因ともなりえます。

GoogleのCore Web VitalsのLCP（最大コンテンツ描画時間）指標が大幅に悪化し、SEO評価が下がってしまうためでもあります。

loading="lazy"で指定できるリソースは2つだけ

loading="lazy"で指定できるリソースは画像（img要素）とiframe要素の2つだけになります。

画像では写真やイラストなどの静的コンテンツが対象となり、iframeではYouTube動画の埋め込み、Googleマップ、外部サイトの埋め込みコンテンツなどが遅延読み込み可能です。

loading="lazy"で指定できるリソース例

<img>（画像）
<iframe>（インラインフレーム）

video要素やaudio要素、背景画像（CSS background-image）には直接適用できないため、これらを遅延読み込みしたい場合はJavaScriptライブラリや独自実装が必要になります。

つまり、HTMLだけで簡単に遅延読み込みできるのはこの2種類のリソースに限定されています。

レイアウトシフト（CLS）対策も同時に行っておく

Lazy Load導入時は必ずレイアウトシフト（CLS）対策を同時に行いましょう。

CLSとは、画像読み込み完了時にページのレイアウトが突然ズレる現象で、ユーザー体験を大きく損ないます。

対策は簡単で、img要素にwidth・height属性を事前に指定するだけです。

width・height属性を記述した例

<img loading="lazy" width="600" height="400">

画像読み込み前にブラウザが適切なスペースを確保し、読み込み完了後もレイアウトが動きません。

この対策を怠ると、ユーザーが文章を読んでいる最中に画像が突然表示されて文字位置がずれ、読み直しを強いられます。

Core Web VitalsのCLSスコアも悪化するため、SEO評価にも悪影響があります。

CLSについて詳しくは「CLSとは」の記事をご覧ください。

ブラウザのサポート状況も確認しておきましょう

Lazy Load導入時はブラウザサポート状況の確認が重要です。

HTML標準のloading="lazy"属性は、Chrome・Firefox・Safari・Edgeで対応済みで全体の93.5%をカバーしますが、Internet Explorerや古いSafariでは未対応です。

ブラウザ	状況	代替手段
Internet Explorer	全バージョン未対応	JavaScriptライブラリ必須
古いSafari（15.3以前）	未対応	フォールバック処理必要
古いAndroidブラウザ	一部未対応	段階的グレースフル・デグラデーション

特に企業サイトでは古いブラウザ使用率が5-15%あるため注意が必要です。

未対応ブラウザでは単純に通常読み込みとなり、サイトは正常動作しますが効果は得られません。

Lazy Loadは「オフスクリーン画像の遅延読み込み」に影響

PageSpeed Insightsの「オフスクリーン画像の遅延読み込み」は、Lazy Loadが最も直接的に改善する項目です。

オフスクリーンとは画面外（ビューポート外）を意味し、ユーザーが最初に見えない範囲にある画像を指します。

通常、これらの画像も初回読み込み時に一括取得されるため、初期表示が遅くなります。

Lazy Loadを導入すると、画面外の画像読み込みが自動的に遅延され、「このページでは◯◯秒短縮できます」という具体的な改善提案が消えます。

PageSpeed Insightsで表示される内容

改善内容は下記のように解説されています。

下記のような説明が記述されています。

オフスクリーンの非表示の画像は、重要なリソースをすべて読み込んだ後に遅れて読み込むようにして、操作可能になるまでの時間を短縮することをご検討ください。

簡単にまとめると、見えない部分の画像は後から読み込むようにして、画面に表示されている部分が早く読み込まれるようにして欲しいということです。

オフスクリーン画像の遅延読み込みでわかる内容

計測されたページで具体的に改善が必要な画像部分が把握できます。

それ以外にもLazy Loadで改善後にどの程度データ量を減らせるかもわかるので、重要度の高いものから改善していけます。

PageSpeed Insightsの「オフスクリーン画像の遅延読み込み」の項目で実際にLazy Loadが正しく使用できているかもチェックしておくといいでしょう。

Lazy Loadのまとめ

Webサイトの表示速度でお悩みの方へ、この記事ではLazy Load（遅延読み込み）の解決策をご紹介しました。

HTMLに「loading="lazy"」を追加するだけで、初期表示速度が大幅に改善され、ユーザーの離脱率も下がります。

表示速度に課題を感じている方は、今回学んだポイントを参考に、ぜひLazy Loadの導入を検討してみてください。

きっとサイトのパフォーマンス向上を実感していただけるはずです。

記事を書いた人

井上寛生

LandingHub 執行役員 / 事業責任者 / 技術責任者

大学院では情報工学を専攻し、修了後に株式会社TeNへ新卒入社。当時は社内唯一のエンジニアながら、開発部門をゼロから立ち上げ、採用・育成を一手に担い、全員が未経験からスタートした精鋭エンジニアチームを組成。2021 年にはWEBサイト高速化プラットフォーム「LandingHub」を立ち上げ、プロダクトオーナー兼事業責任者として企画・開発・グロースを牽引。現在は執行役員として、会社の技術戦略と事業成長の双方をリードしている。

コラム一覧に戻る