画像の遅延読み込み（Lazy Loading）とは？実装で期待できる効果と実装方法

Webサイトの表示速度に悩んでいませんか？特に画像が多いサイトでは、読み込み速度が遅くなってユーザーの離脱率が高くなってしまいがちです。

実際、サイトの表示速度が1秒遅くなると、コンバージョン率が7%低下するというデータもあります。これは、ECサイトやランディングページを運営する方にとって非常に深刻な問題ですよね。

そこで今回は、Webサイトの表示速度を劇的に改善する「画像の遅延読み込み」について、初心者の方でもわかりやすく詳しく解説します。この記事を読めば、あなたのサイトも高速化できるはずです。

画像の遅延読み込み（Lazy Loading）とは？

画像の遅延読み込み（Lazy Loading）とは、Webページを表示する際に、画面に見えている部分（ファーストビュー）の画像だけを最初に読み込み、画面外の画像は必要になったタイミングで読み込む技術のことです。

通常、Webページを開くと、ページ内に含まれる全ての画像が一度に読み込まれます。

通常のWEBサイトの読み込みイメージは下記の通りです。

ユーザーが実際に見るのは画面に表示されている部分だけとなりますが、遅延読み込みの設定を行わないと表示するページの画像を一気に読み込もうとしてしまい、画像が表示されるまでに時間がかかります。

遅延読み込みの設定がされていると、下記の画像のように表示領域だけ先に読み込まれ、非表示の領域にある画像は後から読み込まれるという仕組みになります。

そのため、表示領域の画像の読み込みが早くなります。

画像の遅延読み込みを実装した場合とそうでない場合の事例

こちらは弊社の「LandingHub」を導入している事例の動画です。

動画の左側が、画像の遅延読み込みを実装していない場合で、右側が画像の遅延読み込みを実装している場合です。

画像の遅延読み込みを実装している場合の方が、ファーストビューの領域の画像が全て表示されるまでの時間が速いことがわかります。

画像の遅延読み込みを実装することで期待できる効果

遅延読み込みを導入することで、以下のような効果が期待できます。

項目	具体的な効果	改善数値のポイント
初期表示速度の向上	ページ読み込み時間の短縮による離脱率の改善	離脱低下によるアクセスアップ
データ通信量の削減	不要な画像読み込みを回避サーバーコスト低下	サーバー費用の軽減
サーバー負荷の分散	アクセスの集中にも対応できる	流入の取りこぼし軽減
SEO効果（検索順位の向上）	Core Web Vitals改善 PageSpeed Insightsの評価向上	オーガニック流入増加
コンバージョン率向上	表示速度改善による成約率UP	売上・問い合わせ増加

初期表示速度の向上による離脱率の改善

画像の遅延読み込みを実施し初期表示速度を上げることで、離脱率の大幅改善も見込めます。

Googleの調査によれば、表示速度が1秒から3秒に遅くなると離脱率は32%増加し、6秒では106%、10秒では123%も増加します。

また、Amazonの研究では表示が0.1秒遅くなるごとに売上が1%減少するという明確な相関が判明しています。

ユーザーの98%は遅い表示速度にストレスを感じ、約79%は二度とそのサイトを訪問しないと報告されています。

画像の遅延読み込みによるデータ通信量の削減

画像の遅延読み込み（Lazy Loading）により、初期表示時のデータ通信量を大幅に削減できます。

見えていない画像を読み込まないため、ユーザーがスクロールしなかった部分の画像データは一切ダウンロードされません。

これによりデータ通信量の削減が可能で、サーバーコスト削減にもつながります。

アクセスの集中時のサーバー負荷の分散効果

画像の遅延読み込みは、アクセス集中時のサーバー負荷分散にも効果的です。

通常ページ読み込み時にすべての画像を一度に要求する代わりに、ユーザーがスクロールして表示圏内に入った時点で順次読み込みます。

これによりサーバーへのリクエスト数が時間的に分散され、同時接続数のピークが緩和されます。

特に多数の画像を含むページでは、初期アクセス時のサーバー負荷を軽減し、アクセス集中によるサーバーダウンリスクを大幅に低減できます。

さらにCDNと組み合わせることで、地理的にも負荷を分散させ、安定したサービス提供が可能になります。

Core Web Vitals改善に伴うSEO効果

画像の遅延読み込み(Lazy Loading)は、Core Web Vitalsの改善を通じてSEO効果を高めます。

正しく実装すれば、ファーストビュー外の画像読み込みを遅延させることでLCP(Largest Contentful Paint)が改善され、初期表示が高速化します。

またwidth/height属性を設定することでCLS(Cumulative Layout Shift)も防止できます。

Googleは2021年からCore Web Vitalsをランキング要因に組み込んでおり、競合サイトと同等のコンテンツ品質の場合、これらの指標が優れたサイトが上位表示されるため、SEO競争力の向上につながります。

画像の遅延読み込みによるコンバージョン率向上

画像の遅延読み込み（Lazy Loading）は、ファーストビュー以外の画像読み込みを後回しにすることで初期表示速度を高速化し、コンバージョン率向上に直接貢献します。

特にLP（ランディングページ）など、直接CV（コンバージョン）に結びつくページは特に影響力があります。

実際に表示速度1秒改善だけでもCVRの向上につながります、ページ離脱防止によるコンバージョン機会の最大化に効果を発揮します。

画像の遅延読み込みを実装する方法3つ

画像の遅延読み込みを実装する方法は、大きく分けて以下の3つがあります。

画像の遅延読み込みの実装する3つの方法

<img>にloading属性を使用する方法（推奨）
JavaScriptライブラリを使用する方法

<img>にloading属性を使用する方法（推奨）

最も簡単で効果的な方法が、loading属性を使用することです。

これはブラウザがネイティブでサポートしている機能なので、追加のライブラリが不要でとても軽量です。

基本的な実装方法

下記実際の実装したコード例です。

<img src="image.jpg" loading="lazy" alt="画像の説明" width="800" height="600">

イメージタグに「 loading=”lazy”」を追加するだけで実装が可能なため、簡単に実装することができます。

また、loading属性には下記のような値をつけることができるので、ケースバイケースで使い分けましょう。

値	説明	挙動	使用すべき場面
lazy	遅延読み込み	画像やiframeは、ユーザーがスクロールして要素がビューポート（表示領域）に近づいたときのみ読み込まれます。それまでは読み込まれません。	ファーストビュー（初期画面）外の画像や、ページ下部にある大きな画像・動画など、初期表示に必須でないコンテンツ
eager	即時読み込み	従来の動作と同じく、ページ読み込み時に即座に画像やiframeを読み込みます。ビューポート外の要素も含め、すべて読み込みます。	ファーストビュー内の重要な画像、メインコンテンツの画像、LCP（最大コンテンツ描画）の対象となる画像など
auto	ブラウザ判断	ブラウザがネットワーク環境などの条件を考慮して、eager（即時）かlazy（遅延）かを自動的に決定します。	特定の環境での最適化を希望する場合や、ブラウザの判断に委ねたい場合

また、loading属性は<iframe>タグにも実装することができるため改善できそうな場合は、<iframe>にも適用していくと良いでしょう。

loading属性を実装する際の注意点

注意点

ファーストビュー画像にloading="lazy"を設定しない
widthとheight属性を必ず指定する

ファーストビューの画像にはloading="lazy"を設定しないでください。

最初に表示される画像を遅延読み込みしてしまうと、逆に表示速度が遅くなる可能性があります。

また、widthとheight属性を必ず指定しましょう。

これらの属性がないと、画像が読み込まれる際にレイアウトがずれて「CLS（Cumulative Layout Shift）」の指標にも問題が発生します。

2. JavaScriptライブラリを使用する方法

より細かい制御が必要な場合や、古いブラウザをサポートする必要がある場合は、JavaScriptライブラリを使用する方法もあります。

それぞれの実装方法を解説していきます。

Lazy Load（jQuery不要）を活用した方法

最も人気のあるライブラリの一つです。軽量で使いやすく、多くの機能を提供しています。

実装手順

1. ライブラリの読み込み

<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.min.js"></script>

2. HTMLマークアップ

<img class="lazyload" data-src="image.jpg" alt="画像の説明" width="800" height="600">

3. 初期化

<script>
  lazyload();
</script>

lazysizes（高機能）

lazysizesは、より高機能な遅延読み込みライブラリです。レスポンシブ画像や背景画像の遅延読み込みにも対応しています。

実装例

<script src="https://cdn.jsdelivr.net/npm/lazysizes@5.3.2/lazysizes.min.js"></script>

<img class="lazyload" data-src="image.jpg" alt="画像の説明" width="800" height="600">

3. Intersection Observer APIを使用する方法

より詳細な制御が必要な場合は、Intersection Observer APIを使用してカスタム実装することも可能です。

<script>
document.addEventListener("DOMContentLoaded", function() {
  const lazyImages = document.querySelectorAll("img.lazy");
  
  if ("IntersectionObserver" in window) {
    const imageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          const image = entry.target;
          image.src = image.dataset.src;
          image.classList.remove("lazy");
          imageObserver.unobserve(image);
        }
      });
    });
    
    lazyImages.forEach(function(image) {
      imageObserver.observe(image);
    });
  }
});
</script>

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

・

画像の遅延読み込みのメリット・デメリット

主なメリット

主なデメリット（ミス設定がある場合も含む）

デメリット項目	具体的な問題	発生条件	影響度	対処難易度
画像読み込み遅延	高速スクロール時の画像表示が遅くなる	高速スクロール時	★★★★★	★☆☆☆☆
CLS（レイアウトシフト）	画像読み込み時にページがズレる	width/height属性未指定	★★★★☆	★☆☆☆☆
古いブラウザ非対応	IE、古いSafariで機能しない	loading属性使用時	★★★☆☆	★★★☆☆
JavaScript依存	JSオフ環境で動作しない	ライブラリ使用時	★★☆☆☆	★★★☆☆
デバッグの複雑さ	問題の特定が困難	複雑な実装時	★★★☆☆	★★★★☆

なぜ画像の遅延読み込みが重要なのか？

1. ユーザーエクスペリエンスの向上

現代のWebユーザーは非常にせっかちです。ページの読み込みが3秒以上かかると、約40%のユーザーが離脱すると言われています。特にスマートフォンユーザーは、より短い時間で判断を下す傾向があります。

画像の遅延読み込みを実装することで、ユーザーは「サクサク動く」と感じられるサイトを体験できます。これは、ユーザーの満足度向上に直結するんです。

2. SEO効果の向上

Googleは2010年から「サイト速度」を検索ランキングの要因として組み込んでいます。さらに、2021年6月からは「Core Web Vitals」という新しい指標も導入され、表示速度はSEOにおいてますます重要な要素となっています。

特に以下の指標で改善効果が期待できます：

LCP（Largest Contentful Paint）：最大コンテンツの描画時間
FID（First Input Delay）：初回入力遅延
CLS（Cumulative Layout Shift）：累積レイアウトシフト

3. コンバージョン率の改善

Amazon社の調査によると、ページ表示速度が100ms改善されると、売上が1%向上するという結果が出ています。つまり、画像の遅延読み込みによる表示速度改善は、直接的に売上向上に繋がるということです。

これは、LandingHubのようなランディングページ作成ツールを使っている方にとって特に重要な要素ですね。

WordPressでの画像の遅延読み込みの実装方法

WordPressを使用している場合は、より簡単に実装できます。

1. WordPress標準機能（バージョン5.5以降）

WordPress 5.5以降では、画像の遅延読み込みが標準機能として搭載されています。特別な設定は不要で、コンテンツエリア内の2番目以降の画像に自動的にloading="lazy"が付与されます。

2. プラグインを使用する方法

EWWW Image Optimizer

画像圧縮で有名なプラグインですが、遅延読み込み機能も搭載しています。

プラグインをインストール・有効化
設定画面で「基本」タブを開く
「遅延読み込み」にチェックを入れる

Autoptimize

総合的なパフォーマンス最適化プラグインです。

プラグインをインストール・有効化
設定画面で「Images」タブを開く
「Lazy-load images」にチェックを入れる

実装時の注意点とベストプラクティス

1. ファーストビュー画像の扱い

ファーストビュー（画面に最初に表示される部分）の画像には遅延読み込みを適用しないでください。これらの画像は、ユーザーがページを開いた瞬間に見る重要な要素だからです。

逆に、遅延読み込みを適用すると表示が遅くなり、ユーザーエクスペリエンスが悪化します。

2. width・height属性の指定

CLS（Cumulative Layout Shift）を防ぐため、必ずwidthとheight属性を指定しましょう。

<img src="image.jpg" loading="lazy" alt="画像の説明" width="800" height="600">

CSSでサイズを指定する場合も同様です：

<img src="image.jpg" loading="lazy" alt="画像の説明" style="width: 800px; height: 600px;">

3. alt属性の設定

SEO効果を最大化するため、必ずalt属性を設定しましょう。画像の内容を的確に説明することで、検索エンジンからの評価が向上します。

4. プレースホルダーの活用

画像が読み込まれるまでの間、プレースホルダーを表示することで、ユーザーエクスペリエンスを向上させることができます。

<img src="placeholder.jpg" data-src="actual-image.jpg" class="lazyload" alt="画像の説明" width="800" height="600">

decoding=”async”との組み合わせ

画像の遅延読み込みと併用できる技術として、decoding="async"があります。これは、画像のデコード処理を非同期で行うことで、ページのレンダリングをブロックしないようにする技術です。

<img src="image.jpg" loading="lazy" decoding="async" alt="画像の説明" width="800" height="600">

decoding属性の値

async：非同期でデコード（推奨）
sync：同期でデコード
auto：ブラウザが最適な方法を選択（デフォルト）

効果測定の方法

遅延読み込みの効果を測定するには、以下のツールを使用しましょう：

1. PageSpeed Insights

PageSpeed Insightsは、Googleが提供する無料のサイト速度測定ツールです。「オフスクリーン画像の遅延読み込み」という項目で、改善効果を確認できます。

2. Chrome DevTools

Chrome DevToolsのNetworkタブで、画像の読み込みタイミングを詳細に確認できます。

F12キーでDevToolsを開く
「Network」タブを選択
ページをリロードして、画像の読み込み順序を確認

3. Lighthouse

Chrome DevToolsに搭載されているLighthouseでも、詳細なパフォーマンス分析が可能です。

よくある問題とトラブルシューティング

1. 画像が表示されない

原因： JavaScriptライブラリが正しく読み込まれていない、または初期化されていない

解決方法：

ライブラリのCDNリンクが正しいか確認
初期化スクリプトが正しく配置されているか確認
JavaScriptエラーがないかDevToolsで確認

2. 遅延読み込みが動作しない

原因： ブラウザがloading属性をサポートしていない

解決方法： JavaScriptライブラリをフォールバックとして使用

<script>
if ('loading' in HTMLImageElement.prototype) {
  // loading属性がサポートされている場合
  const images = document.querySelectorAll('img[loading="lazy"]');
  images.forEach(img => {
    img.src = img.dataset.src || img.src;
  });
} else {
  // フォールバック：JavaScriptライブラリを使用
  const script = document.createElement('script');
  script.src = 'https://cdn.jsdelivr.net/npm/lazysizes@5.3.2/lazysizes.min.js';
  document.head.appendChild(script);
}
</script>

3. レイアウトがズレる

原因： widthとheight属性が設定されていない

解決方法： 画像の実際のサイズをwidthとheight属性で指定

さらなる表示速度改善のテクニック

画像の遅延読み込みと組み合わせることで、さらに効果的な表示速度改善が可能です。

1. 画像フォーマットの最適化

WebPやAVIFなどの次世代画像フォーマットを使用することで、ファイルサイズを大幅に削減できます。

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" loading="lazy" alt="画像の説明" width="800" height="600">
</picture>

2. 画像圧縮

TinyPNGやImageOptimなどのツールを使用して、画像ファイルサイズを削減しましょう。

3. CDNの活用

CloudflareやAmazon CloudFrontなどのCDNを活用することで、画像の配信速度をさらに向上させることができます。

4. レスポンシブ画像

srcset属性を使用して、デバイスに応じた最適なサイズの画像を配信しましょう。

<img src="image-800.jpg" 
     srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
     sizes="(max-width: 400px) 400px, (max-width: 800px) 800px, 1200px"
     loading="lazy" 
     alt="画像の説明">

LandingHubでの活用方法

LandingHubのようなランディングページ作成ツールを使用している場合、画像の遅延読み込みは特に重要な機能です。

コンバージョン率向上への効果

ランディングページでは、ファーストビューの表示速度が直接コンバージョン率に影響します。表示速度が1秒改善されると、コンバージョン率が2%向上するという調査結果もあります。

モバイルユーザーへの配慮

モバイルユーザーは通信環境が不安定な場合があります。遅延読み込みを実装することで、データ通信量を削減し、モバイルユーザーのユーザビリティを向上させることができます。

まとめ：画像の遅延読み込みで競合に差をつけよう

画像の遅延読み込みは、Webサイトのパフォーマンス向上において最も効果的で実装しやすい技術の一つです。

この記事で紹介した内容をまとめると：

HTML5のloading="lazy"属性が最も簡単で効果的
ファーストビュー画像には適用しないことが重要
widthとheight属性を必ず指定してCLSを防ぐ
WordPressでは標準機能またはプラグインで簡単実装
効果測定にはPageSpeed Insightsを活用

実装は意外と簡単で、効果は絶大です。特に画像が多いサイトを運営している方は、今すぐ実装することをお勧めします。

表示速度の改善は、ユーザーエクスペリエンスの向上、SEO効果の向上、そして最終的にはコンバージョン率の向上に直結します。競合他社に差をつけるためにも、ぜひ今日から始めてみてください。

また、LandingHubのようなランディングページ作成ツールを使用している場合は、ツールの機能と組み合わせることで、さらに効果的な高速化が可能です。

あなたのWebサイトも、画像の遅延読み込みで「サクサク動くサイト」に変身させましょう！