ホーム
Web開発
画像の遅延読み込み完全ガイド：ウェブサイトの表示速度を劇的に改善する実践テクニック

画像の遅延読み込み完全ガイド：ウェブサイトの表示速度を劇的に改善する実践テクニック

5 May, 2025

画像の遅延読み込み完全ガイド：ウェブサイトの表示速度を劇的に改善する実践テクニック

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

情報系修士卒業後、大手IT企業にてフルスタックエンジニアとして活躍。 Webアプリケーション開発からクラウドインフラ構築まで幅広い技術に精通し、複数のプロジェクトでリードエンジニアを担当。技術ブログやオープンソースへの貢献を通じて、日本のIT技術コミュニティに積極的に関わっている。

🎓情報系修士🏢東証プライム上場企業💻フルスタックエンジニア📝技術ブログ執筆者

ウェブサイトの読み込み時間は、ユーザー体験とSEOの両方に大きな影響を与えます。Googleのデータによれば、ページの読み込み時間が3秒から5秒に増加すると、直帰率は90%も増加するというショッキングな事実があります。特に画像は多くのウェブページで最も重いリソースであり、これらを効率的に扱うことがパフォーマンス最適化の鍵となります。

画像の遅延読み込み（Lazy Loading）とは、ユーザーが実際にスクロールして画像が表示領域（ビューポート）に入るまで、その画像のロードを遅らせる技術です。この単純な仕組みがもたらす効果は計り知れません：

初期ページの読み込み時間の短縮 - 必要な画像だけを最初に読み込むことで、ページの初期表示が劇的に速くなります
帯域幅の節約 - ユーザーが見ないコンテンツの画像はロードされないため、データ転送量を削減できます
サーバー負荷の軽減 - 同時に処理する画像リクエスト数が減少し、サーバーリソースを効率的に使用できます
バッテリー消費の削減 - 特にモバイルデバイスでは、不要なデータ転送を避けることでバッテリー寿命を延ばせます

「一枚の絵は千の言葉に値する」という言葉がありますが、現代のウェブ開発においては「最適化された一枚の絵は千のユーザーを満足させる」と言えるでしょう。画像の最適化を怠れば、技術的には完璧なウェブサイトであっても、ユーザーはイライラしながら離脱してしまいます。

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

画像の遅延読み込みを実装する方法は複数ありますが、最も一般的で効果的な3つの方法を紹介します。それぞれの方法には長所と短所があるため、プロジェクトの要件に応じて最適な方法を選択しましょう。

1. ネイティブの遅延読み込み機能を使用する

最も簡単な方法は、HTMLのloading="lazy"属性を使用することです。このネイティブ機能は現在ほとんどのモダンブラウザでサポートされています。

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

この方法のメリットは実装が非常に簡単なことと、JavaScriptを必要としないことです。ただし、細かい制御ができないというデメリットもあります。

2. Intersection Observer APIを使用する

より細かい制御が必要な場合は、Intersection Observer APIを使用するのが効果的です。このAPIはビューポート内に要素が入ったかどうかを検知します。

// 画像を監視するための設定
const options = {
  root: null, // ビューポートを基準にする
  rootMargin: '0px', // マージンなし
  threshold: 0.1 // 10%が見えたら読み込む
};

// 監視対象の画像が表示されたら実行される関数
const loadImage = (entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      const src = img.getAttribute('data-src');
      
      if (src) {
        img.setAttribute('src', src);
        img.removeAttribute('data-src');
        observer.unobserve(img); // 監視を解除
      }
    }
  });
};

// Observerのインスタンスを作成
const observer = new IntersectionObserver(loadImage, options);

// 遅延読み込みの対象となる画像を選択して監視を開始
document.querySelectorAll('img[data-src]').forEach(img => {
  observer.observe(img);
});

HTML側ではこのように記述します：

<img data-src="image.jpg" src="placeholder.jpg" alt="説明文" width="800" height="600">

この方法は細かい制御ができ、プレースホルダー画像も設定できるため、ユーザー体験が向上します。

3. ライブラリを活用する

多くの画像を扱う複雑なプロジェクトでは、専用のライブラリを使用すると便利です。代表的なものには「lazysizes」や「lozad.js」などがあります。以下は「lazysizes」の使用例です：

<!-- lazysizesライブラリを読み込む -->
<script src="lazysizes.min.js" async></script>

<!-- lazyloadクラスを使用した画像 -->
<img data-src="image.jpg" class="lazyload" alt="説明文" width="800" height="600">

このようなライブラリを使うと、ブラウザの互換性問題を心配することなく、より高度な機能（ぼかし効果のあるプレースホルダーなど）も実装できます。

どの方法を選ぶにせよ、重要なのはwidthとheight属性を必ず指定することです。これによりブラウザは画像がロードされる前に適切なスペースを確保でき、Cumulative Layout Shift（CLS）というパフォーマンス指標の改善につながります。

遅延読み込みの実装でよくあるミスと対処法

画像の遅延読み込みは概念としては単純ですが、実装時にいくつかの落とし穴があります。多くの開発者が陥りがちなミスと、その解決策を見ていきましょう。

1. 画像サイズの指定漏れ

問題点: 画像のwidthとheight属性を指定せずに遅延読み込みを実装すると、画像がロードされるタイミングでレイアウトが大きく変わってしまいます（Cumulative Layout Shift）。

解決策: 必ず画像のwidthとheight属性を指定しましょう。レスポンシブ対応の場合はCSSでaspect-ratioプロパティを活用します。

<!-- 良い例 -->
<img data-src="image.jpg" width="800" height="600" loading="lazy" alt="説明">

<!-- レスポンシブ対応する場合のCSS -->
<style>
  img {
    width: 100%;
    height: auto;
    aspect-ratio: 4/3; /* width:height の比率 */
  }
</style>

2. 初期ビューポート内の画像も遅延読み込みにしてしまう

問題点: ページ読み込み時に表示される（スクロールなしで見える）画像まで遅延読み込みにすると、表示までに無駄な遅延が発生します。

解決策: 「Above the fold」（初期表示領域）にある画像は通常の読み込み方法を使い、スクロールが必要な画像だけを遅延読み込みにしましょう。

// 初期ビューポート内の画像かどうかを判定する関数
function isInViewport(element) {
  const rect = element.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= window.innerHeight &&
    rect.right <= window.innerWidth
  );
}

// ページロード時に実行
window.addEventListener('DOMContentLoaded', () => {
  const images = document.querySelectorAll('img[data-src]');
  
  images.forEach(img => {
    // 初期ビューポート内の画像は即時読み込み
    if (isInViewport(img)) {
      const src = img.getAttribute('data-src');
      img.setAttribute('src', src);
      img.removeAttribute('data-src');
    } else {
      // ビューポート外の画像だけを監視対象に
      observer.observe(img);
    }
  });
});

3. プレースホルダーを使用しない

問題点: 画像が読み込まれるまで何も表示されないと、ユーザーは「何かが壊れている」と感じる可能性があります。

解決策: 低解像度のプレースホルダー画像や、SVGのアウトライン、あるいはスケルトンスクリーンなどを使用します。

<!-- プレースホルダーを使った例 -->
<img 
  src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600'%3E%3C/svg%3E"
  data-src="actual-image.jpg" 
  class="lazyload"
  alt="説明"
  width="800" 
  height="600"
>

4. noscriptタグの対応漏れ

問題点: JavaScriptを使用した遅延読み込みを実装する場合、JavaScriptが無効な環境での代替表示を用意していないと画像が表示されなくなります。

解決策: noscriptタグを使用して、JavaScriptが無効な場合のフォールバックを提供します。

<img 
  data-src="image.jpg" 
  src="placeholder.jpg" 
  class="lazyload"
  alt="説明" 
  width="800" 
  height="600"
>
<noscript>
  <img src="image.jpg" alt="説明" width="800" height="600">
</noscript>

5. プリント用メディアクエリの考慮漏れ

問題点: 遅延読み込みを実装したページを印刷すると、ロードされていない画像は印刷されません。

解決策: プリント用のメディアクエリで全ての画像を表示するようにします。

@media print {
  img[data-src] {
    display: none;
  }
  img[data-src] + noscript img {
    display: block;
  }
}

このようなミスを避けることで、遅延読み込みの効果を最大限に引き出しつつ、ユーザー体験も損なわないよう実装することができます。「急がば回れ」という言葉がありますが、これらの小さな配慮が結果的に優れたウェブサイトへとつながるのです。

Core Web Vitalsと遅延読み込みの関係

Googleが提唱するウェブパフォーマンス測定の指標「Core Web Vitals」は、SEOにも直接影響する重要な要素です。画像の遅延読み込みは、この指標に大きく関わってきます。主要な3つの指標を中心に、遅延読み込みとの関係を見ていきましょう。

LCP (Largest Contentful Paint)

LCPは、ユーザーにとって最も大きなコンテンツ（多くの場合、画像やビデオ）が表示されるまでの時間を測定します。遅延読み込みを適切に実装することで、以下のようなメリットがあります：

初期ビューポート内の重要な画像は通常読み込みし、それ以外は遅延読み込みすることで、LCPを改善できます
ヒーロー画像（ページ上部の大きな画像）は遅延読み込みの対象から外すべきです

// ヒーロー画像には遅延読み込みを適用しない例
document.addEventListener('DOMContentLoaded', () => {
  const heroImage = document.querySelector('.hero-image');
  // ヒーロー画像はdata-srcから即時にsrcに移行
  if (heroImage && heroImage.hasAttribute('data-src')) {
    heroImage.setAttribute('src', heroImage.getAttribute('data-src'));
    heroImage.removeAttribute('data-src');
  }
  
  // その他の画像には遅延読み込みを適用
  // ...
});

CLS (Cumulative Layout Shift)

CLSは、ページの読み込み中に要素がどれだけ移動するかを測定します。画像の遅延読み込みが不適切に実装されると、画像が読み込まれる瞬間にレイアウトが大きく変わり、CLSが悪化する原因になります。

CLSを改善するためのポイント：

必ず画像にwidthとheight属性を指定する
プレースホルダーを使用し、実際の画像と同じ比率を維持する
アスペクト比を指定する（aspect-ratio CSS プロパティの活用）

<!-- CLSを最小限に抑える遅延読み込みの実装例 -->
<div style="aspect-ratio: 16/9; background-color: #f0f0f0;">
  <img 
    data-src="large-image.jpg"
    src="tiny-placeholder.jpg"
    alt="説明"
    width="1600" 
    height="900"
    style="width: 100%; height: auto;"
    loading="lazy"
  >
</div>

FID (First Input Delay) / INP (Interaction to Next Paint)

FIDは、ユーザーが最初に操作してからブラウザが応答するまでの時間を測定します。2024年3月からはINP (Interaction to Next Paint) が新たな指標として追加されました。これらは主にJavaScriptの実行に関する指標ですが、遅延読み込みもその実装方法によって影響を与えます。

改善のポイント：

複雑なJavaScriptの実行がメインスレッドをブロックしないよう、軽量な遅延読み込み実装を選ぶ
可能であればネイティブのloading="lazy"を優先する
ライブラリを使用する場合は、軽量で効率的なものを選ぶ

<!-- 最も軽量な実装（ブラウザネイティブ） -->
<img src="image.jpg" loading="lazy" alt="説明" width="800" height="600">

最適なバランスを見つける

上記の3つの指標は相互に影響し合うため、一つを改善しようとして他が悪化することもあります。例えば、初期ビューポート内の全ての画像を即時読み込みするとLCPは改善しますが、ページの初期表示速度が遅くなる可能性があります。

最適なアプローチは、以下のような優先順位付けです：

初期ビューポート内の重要な画像（特にLCPの対象となる大きな画像）は即時読み込み
他の初期ビューポート内の小さな画像も即時読み込みが理想的だが、数が多い場合は優先度の低いものは遅延可能
初期ビューポート外の全ての画像は遅延読み込み
すべての画像に適切なサイズ属性とプレースホルダーを設定

「最適化の目的は、ユーザーの体験を向上させることである」という原則を忘れずに、数値だけを追い求めるのではなく、実際のユーザー体験がどう変わるかを常に考慮しましょう。

遅延読み込みのSEOへの影響と最適化テクニック

検索エンジン最適化（SEO）の観点から見ると、画像の遅延読み込みはウェブサイトのパフォーマンスを向上させる重要な要素です。しかし、実装方法を誤るとSEOに悪影響を及ぼす可能性もあります。ここでは、SEOを考慮した遅延読み込みの実装方法について説明します。

遅延読み込みのSEOへの良い影響

ページ読み込み速度の向上
遅延読み込みを実装することで、初期ページの読み込み時間が短縮されます。Googleは公式にページ速度をランキング要因として認めており、特にモバイルでは重要です。
Core Web Vitalsスコアの改善
前述の通り、適切に実装された遅延読み込みはCore Web Vitalsスコア（特にLCPとCLS）を改善し、検索ランキングにプラスの影響を与えます。
クロール予算の効率化
ページの初期読み込みが軽くなることで、Googleのクローラーがより多くのページをインデックスする可能性が高まります。

遅延読み込みが引き起こす可能性のある問題

Googleの画像インデックス化への影響
JavaScriptで実装された遅延読み込みの場合、Googleのクローラーが画像を適切にインデックス化できない可能性があります。
alt属性の欠落
遅延読み込みを実装する際にalt属性を設定し忘れると、アクセシビリティだけでなくSEOにも悪影響があります。
ユーザーエクスペリエンスの低下
不適切な実装により、ユーザーがコンテンツを見るまでに時間がかかると、直帰率が上昇してSEOに悪影響を及ぼします。

SEOを考慮した遅延読み込みの最適化テクニック

構造化データに画像情報を含める
schema.orgのマークアップを使用して、遅延読み込みされる画像も検索エンジンに伝えます。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "記事タイトル",
  "image": [
    "https://example.com/photos/1x1/photo.jpg",
    "https://example.com/photos/4x3/photo.jpg",
    "https://example.com/photos/16x9/photo.jpg"
  ],
  ...
}
</script>

画像のXMLサイトマップを作成する
遅延読み込みされる画像も含めた画像サイトマップを作成し、Googleに提供します。

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
  <url>
    <loc>https://example.com/page1.html</loc>
    <image:image>
      <image:loc>https://example.com/image1.jpg</image:loc>
      <image:title>画像のタイトル</image:title>
      <image:caption>画像の説明</image:caption>
    </image:image>
    <!-- 他の画像 -->
  </url>
</urlset>

alt属性とtitle属性を適切に設定する
遅延読み込みを実装する場合でも、SEOとアクセシビリティのためにalt属性とtitle属性を必ず設定しましょう。

<img 
  data-src="product-image.jpg" 
  src="placeholder.jpg" 
  loading="lazy"
  alt="青いセーター、綿100%、XLサイズ" 
  title="青いコットンセーター"
  width="600" 
  height="400"
>

初期ビューポート内の重要な画像は遅延読み込みを避ける
SEO的に重要な画像（特に商品画像やヒーロー画像）は、確実にクローラーに認識されるよう通常の読み込みにします。
画像のDOMツリーでの位置を維持する
画像はコンテンツと関連性のある場所に配置することで、検索エンジンがコンテンツと画像の関連性を理解しやすくなります。遅延読み込みを実装する際に、DOM上の位置を大きく変えないようにしましょう。
プログレッシブJPEGを使用する
遅延読み込みと組み合わせて、プログレッシブJPEGを使用することで、画像が徐々に表示されるようになり、ユーザー体験が向上します。

<img 
  data-src="progressive.jpg" 
  src="tiny-placeholder.jpg" 
  alt="製品説明" 
  loading="lazy"
  width="800" 
  height="600"
>

SEOとパフォーマンスは「車の両輪」のようなものです。画像が検索エンジンによって適切に認識され、インデックス化されることを確保しながら、パフォーマンスも最適化することが重要です。「木を見て森を見ず」にならないよう、全体的なバランスを常に考慮しましょう。

モバイルファーストの時代における遅延読み込みのベストプラクティス

モバイル端末からのインターネット利用がデスクトップを上回った現在、ウェブサイトのパフォーマンス最適化はモバイルユーザーを最優先に考える必要があります。特に画像の遅延読み込みは、限られた帯域幅と処理能力のモバイル環境において非常に重要です。

モバイル特有の考慮点

ネットワーク接続の不安定さ
モバイルユーザーは移動中にネットワーク状況が頻繁に変化する可能性があります。この状況に対応するため、画像の読み込み状態を適切に管理する必要があります。
データ通信量の制限
多くのユーザーはデータプランに制限があり、大量の画像ダウンロードはコスト増加につながります。遅延読み込みはこの問題の解決に貢献します。
画面サイズとピクセル密度
モバイルデバイスは画面サイズが小さいながらも、高いピクセル密度を持つことが多く、画像の最適化は複雑になります。

モバイルに最適化された遅延読み込みのベストプラクティス

先行読み込み（Preload）と遅延読み込みのバランス
初期ビューポートの画像は速やかに表示されるべきですが、すぐ下にスクロールした際に表示される画像も先行読み込みを検討します。

// 先行読み込みの範囲を広げる例
const options = {
  root: null,
  // 画面の下500pxまでを先読み範囲に設定
  rootMargin: '0px 0px 500px 0px',
  threshold: 0
};

const observer = new IntersectionObserver(loadImage, options);

レスポンシブ画像と遅延読み込みの組み合わせ
デバイスの画面サイズに合わせた最適な画像を提供するため、srcsetやsizes属性と遅延読み込みを組み合わせます。

<img 
  data-srcset="small.jpg 320w, medium.jpg 800w, large.jpg 1200w" 
  data-sizes="(max-width: 320px) 280px, (max-width: 800px) 760px, 1140px"
  src="placeholder.jpg" 
  class="lazyload" 
  alt="説明" 
  width="1200" 
  height="800"
>

低品質画像プレースホルダー（LQIP）の活用
特にモバイルでは、高品質の画像がロードされるまでの間、非常に小さなサイズ（数KB）の低品質バージョンを表示することでユーザー体験を向上させます。

<!-- LQIPを使用した例 -->
<img 
  src="image-lqip.jpg" 
  data-src="image-full.jpg" 
  class="lazyload blur-up" 
  alt="説明" 
  width="800" 
  height="600"
>

<style>
  .blur-up {
    filter: blur(5px);
    transition: filter 0.3s ease-in-out;
  }
  .blur-up.lazyloaded {
    filter: blur(0);
  }
</style>

先読みのヒント提供
ユーザーの行動パターンを予測し、次に見る可能性が高い画像を事前に読み込むためのヒントをブラウザに提供します。

<link rel="preload" as="image" href="likely-next-image.jpg">

ネットワーク情報APIの活用
サポートされているブラウザでは、ネットワークの状態に応じて画像の読み込み戦略を調整できます。

if (navigator.connection) {
  // 接続タイプに応じて動作を変更
  if (navigator.connection.saveData || 
      navigator.connection.effectiveType === 'slow-2g' || 
      navigator.connection.effectiveType === '2g') {
    // データセーバーモードまたは遅い接続の場合は
    // より小さな画像を読み込むか、一部の画像を完全にスキップ
    loadSmallImagesOnly();
  } else {
    // 通常の接続の場合は標準の遅延読み込み
    loadRegularLazyImages();
  }
}

スケルトンスクリーン
画像が読み込まれる前に、画像の形状を示すプレースホルダーを表示することで、ユーザーは将来のコンテンツの配置を理解できます。

<div class="skeleton-image" aria-hidden="true">
  <div class="pulse"></div>
</div>
<img 
  data-src="product.jpg" 
  class="lazyload" 
  alt="製品説明" 
  width="600" 
  height="400" 
  style="display: none"
  onload="this.style.display='block'; this.previousElementSibling.style.display='none';"
>

<style>
  .skeleton-image {
    width: 600px;
    height: 400px;
    background-color: #e0e0e0;
    position: relative;
    overflow: hidden;
  }
  .pulse {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: pulse 1.5s infinite;
  }
  @keyframes pulse {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }
</style>

「モバイルファースト」は単なるデザイン哲学ではなく、ユーザー体験とパフォーマンスの最適化に関する実践的なアプローチです。インターネットの未来はモバイルにあると言われて久しいですが、今日では「モバイルしかない」と言っても過言ではないでしょう。「適者生存」というダーウィンの法則がウェブサイトにも適用される時代において、最適化されたウェブサイトこそが生き残るのです。

画像の遅延読み込み完全ガイド：ウェブサイトの表示速度を劇的に改善する実践テクニック

画像の遅延読み込み完全ガイド：ウェブサイトの表示速度を劇的に改善する実践テクニック

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

目次

Tasuke Hub管理人

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

1. ネイティブの遅延読み込み機能を使用する

2. Intersection Observer APIを使用する

3. ライブラリを活用する

遅延読み込みの実装でよくあるミスと対処法

1. 画像サイズの指定漏れ

2. 初期ビューポート内の画像も遅延読み込みにしてしまう

3. プレースホルダーを使用しない

4. noscriptタグの対応漏れ

5. プリント用メディアクエリの考慮漏れ

Core Web Vitalsと遅延読み込みの関係

LCP (Largest Contentful Paint)

CLS (Cumulative Layout Shift)

FID (First Input Delay) / INP (Interaction to Next Paint)

最適なバランスを見つける

遅延読み込みのSEOへの影響と最適化テクニック

遅延読み込みのSEOへの良い影響

遅延読み込みが引き起こす可能性のある問題

SEOを考慮した遅延読み込みの最適化テクニック

モバイルファーストの時代における遅延読み込みのベストプラクティス

モバイル特有の考慮点

モバイルに最適化された遅延読み込みのベストプラクティス

おすすめコンテンツ

初心者でもわかるWebSockets入門：リアルタイムアプリケーション開発の基礎と実践例

画像の遅延読み込み完全ガイド：ウェブサイトの表示速度を劇的に改善する実践テクニック

【2025年最新】マイクロフロントエンド入門：モダンWebアプリケーションのための実践的アーキテクチャ設計

Node.jsとWebSocketで作る！初心者でも実装できるリアルタイムWebアプリケーション開発チュートリアル

【2025年最新】PWAで変わるWeb体験：初心者でも実装できるProgressive Web Appsの完全ガイド

Core Web Vitalsを最適化して表示速度を劇的に改善！実践的なパフォーマンスチューニング手法