plan-4ging

2026/04/02

frontend #web#frontend#javascript

Lazy Loading（遅延読み込み）

画像やインフラなどのリソースを 「ページ読み込み時」ではなく、「必要になった時（ユーザーがそこまでスクロールした時）」 に初めて読み込む技術

Pros/Cons

Pros

  • 初期表示（LCP：Largest Contentful Paint）の高速化
    • 画面外の画像を無視できるため、最初の表示に必要なデータ量を削減
  • データ通信量の節約
    • ユーザーが途中で離脱した場合、読み込まなかった分のパケット節約
  • サーバー負荷の軽減
    • 不要なリクエストが飛ばないため、インフラ側のコスト削減

Cons

  • 瞬間的なレイアウトズレ（Layout Shift）
    • 画像のサイズを指定していないと、読み込まれた瞬間にコンテンツが下にズレる場合がある
  • 高速スクロール時の空白
    • 非常に速くスクロールすると、画像の読み込みが追いつかず、一瞬白い箱が見える場合がある

実装方法

Lazy Loading

HTML タグに loading="lazy" を追加するだけ

<img src="beautiful-ocean.jpg" alt="海" loading="lazy" width="800" height="600">

<iframe src="https://..." loading="lazy"></iframe>

Intersection Observer API

より細かい制御が必要な場合
※「画像が表示される100px手前で読み込みを開始したい」など

まとめ

  1. まずはloading="lazy"を基本にする
  2. 画像サイズ（width/height）を必ず設定する
  3. 一番上の画像（ヒーローイメージなど）には設定しない
Back