---
title: "遅延読み込み（lazy loading）とは？画像を後から読む高速化の基礎"
description: "ページ全体の画像を一気に読み込むと初期表示が重くなります。スクロールで画面に近づいたときだけ読み込む遅延読み込みの仕組みと、loading属性一行で対応する方法、IntersectionObserverの活用まで基礎から解説します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/lazy-loading-term"
markdown: "https://giga-site.com/articles/lazy-loading-term/index.md"
category: "用語解説"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# 遅延読み込み（lazy loading）とは？画像を後から読む高速化の基礎

ページを開いた瞬間にすべての画像を読み込むと、表示までに時間がかかります。遅延読み込み（lazy loading）は、画面に入りそうな画像だけを後から読み込み、初期表示を軽くする技術です。この記事では基本の考え方と使い方をやさしく説明します。

> Source HTML: https://giga-site.com/articles/lazy-loading-term
> Article index: https://giga-site.com/articles/index.md

## 遅延読み込み（lazy loading）とは

遅延読み込みとは、ページ内のすべての画像や動画を最初に一気に読み込むのではなく、ユーザーがスクロールしてその要素が画面に近づいたときに初めて読み込む仕組みを指します。英語ではlazy loading（怠ける読み込み）と呼ばれます。

画面の下のほうにある画像は、ユーザーがそこまでスクロールしなければ目に入りません。先に読み込んでおいても、見られないまま離脱されれば通信が無駄になります。遅延読み込みは、その無駄を減らして必要なものだけを順次読み込む発想です。

結果として、最初に見える範囲の表示が速くなり、通信量も抑えられます。画像が多いページほど効果が大きくなります。

## なぜ表示速度に効くのか

ブラウザはページを表示するとき、画像のダウンロードに帯域とCPUを使います。最初にすべての画像を取りにいくと、本来すぐ見せたい上部のコンテンツの描画まで遅れてしまいます。

遅延読み込みを使うと、最初は画面に見える分の画像だけを読み込み、残りはスクロールに応じて取得します。これにより、ユーザーが最初に体感する表示時間（初期表示）が短くなります。

特にスマートフォンの回線では通信が遅くなりがちなので、見えていない画像を後回しにする効果が大きく出ます。

## 実務ではどこで関係する？

遅延読み込みは言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。

遅延読み込み（lazy loading）について迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

- 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する
- 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける
- 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない
- 運用の話: 期限、差し替え、削除、共有メッセージまで決める

## HTMLでの基本的な書き方

いまの主要なブラウザは、画像のimg要素やiframeにloading属性を付けるだけでブラウザ標準の遅延読み込みを有効にできます。JavaScriptを書かなくても使えるのが利点です。

具体的には次の手順で設定します。

1. 遅延読み込みしたい画像のimg要素を用意する
2. その要素にloading属性を加え、値をlazyにする（loading=lazy）
3. 逆に最初から見える重要な画像にはloading=eagerを指定するか属性を付けない
4. 画像の幅と高さ（widthとheight）を指定してレイアウトのずれを防ぐ
5. 表示を確認し、スクロール時に画像が遅れて出ても違和感がないか確かめる

## 使うときの注意点

すべての画像を遅延読み込みにすればよいわけではありません。ページを開いてすぐ目に入る最上部の画像やロゴまで遅延させると、かえって表示が遅く感じられることがあります。重要な画像は通常読み込みのままにしましょう。

また、画像の幅と高さを指定しておかないと、読み込まれた瞬間にレイアウトがガタッと動く現象（レイアウトシフト）が起きやすくなります。サイズをあらかじめ確保しておくことが大切です。

遅延読み込みはあくまで読み込みのタイミングを調整する技術であり、画像そのものを軽くする圧縮や、適切なサイズへのリサイズと組み合わせると効果がさらに高まります。

## 他の高速化施策との組み合わせ

遅延読み込みは単体でも効きますが、画像形式の見直しやCDN配信と組み合わせると効果が積み上がります。たとえば画像をWebPなどの軽い形式に変換し、配信を高速なネットワークに任せると、初期表示はさらに速くなります。

作ったHTMLを実際に共有して表示速度を確かめたい場面もあります。ギガサイト便はHTMLやZIPをドロップするだけで共有URLを発行でき、CDNのエッジ配信で表示が速いため、遅延読み込みを入れた制作物の見え方を関係者と素早く確認するのに向いています。

## よくある質問

### 遅延読み込みはすべての画像に使うべきですか？

いいえ。ページを開いてすぐ見える最上部の画像やロゴは通常読み込みのままにし、スクロールしないと見えない下部の画像に使うのが基本です。重要な画像まで遅延させると初期表示が遅く感じられることがあります。

### loading=lazyはJavaScriptなしで使えますか？

はい。主要なブラウザはimg要素やiframeにloading属性を付けるだけで標準の遅延読み込みに対応しています。特別なライブラリを入れなくても使えます。

### 遅延読み込みでレイアウトがずれるのを防ぐには？

画像のwidthとheightをあらかじめ指定し、表示領域を確保しておくとよいです。サイズが未指定だと読み込み時にレイアウトが動くレイアウトシフトが起きやすくなります。

### 遅延読み込みだけでページは十分速くなりますか？

効果はありますが、それだけで万全ではありません。画像の圧縮や適切なサイズへのリサイズ、軽い画像形式の採用、CDN配信などと組み合わせることで、より大きな高速化が見込めます。

### 実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？

細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。

## 関連記事

- [遅延読み込み(lazy loading)とは？画像を後から読む仕組み](https://giga-site.com/articles/what-is-lazy-loading/index.md)
- [srcset・sizesとは？画面に合う画像を出し分ける仕組み](https://giga-site.com/articles/what-is-srcset/index.md)
- [Core Web Vitalsとは？表示速度・体験の指標](https://giga-site.com/articles/what-is-core-web-vitals/index.md)
- [ミニファイ（minify）とは？ファイル圧縮の基礎](https://giga-site.com/articles/what-is-minify/index.md)
- [HTTP/2・HTTP/3とは？表示が速くなる新しい通信規格](https://giga-site.com/articles/what-is-http2-http3/index.md)
- [Keep-Aliveとは？接続を使い回して速くする仕組み](https://giga-site.com/articles/what-is-keep-alive/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "遅延読み込み（lazy loading）とは？画像を後から読む高速化の基礎",
  "description": "ページ全体の画像を一気に読み込むと初期表示が重くなります。スクロールで画面に近づいたときだけ読み込む遅延読み込みの仕組みと、loading属性一行で対応する方法、IntersectionObserverの活用まで基礎から解説します。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/lazy-loading-term",
  "url": "https://giga-site.com/articles/lazy-loading-term",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "用語解説",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "遅延読み込みはすべての画像に使うべきですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "いいえ。ページを開いてすぐ見える最上部の画像やロゴは通常読み込みのままにし、スクロールしないと見えない下部の画像に使うのが基本です。重要な画像まで遅延させると初期表示が遅く感じられることがあります。"
      }
    },
    {
      "@type": "Question",
      "name": "loading=lazyはJavaScriptなしで使えますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "はい。主要なブラウザはimg要素やiframeにloading属性を付けるだけで標準の遅延読み込みに対応しています。特別なライブラリを入れなくても使えます。"
      }
    },
    {
      "@type": "Question",
      "name": "遅延読み込みでレイアウトがずれるのを防ぐには？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "画像のwidthとheightをあらかじめ指定し、表示領域を確保しておくとよいです。サイズが未指定だと読み込み時にレイアウトが動くレイアウトシフトが起きやすくなります。"
      }
    },
    {
      "@type": "Question",
      "name": "遅延読み込みだけでページは十分速くなりますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "効果はありますが、それだけで万全ではありません。画像の圧縮や適切なサイズへのリサイズ、軽い画像形式の採用、CDN配信などと組み合わせることで、より大きな高速化が見込めます。"
      }
    },
    {
      "@type": "Question",
      "name": "実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。"
      }
    }
  ]
}
```