遅延読み込み

遅延読み込みとは

遅延読み込み (Lazy Loading) は、画像、コンポーネント、モジュールを必要になるまで読み込まず、初期表示速度を向上させる手法である。ファーストビューに不要なリソースの読み込みを後回しにし、LCP を改善する。

画像の遅延読み込み

画像の遅延読み込みの例を示す。

<!-- ✅ ネイティブ lazy loading -->
<img src="photo.webp" loading="lazy" alt="Photo" width="800" height="600" />

<!-- ❌ ファーストビューの画像は lazy にしない -->
<img src="hero.webp" fetchpriority="high" alt="Hero" width="1200" height="600" />

loading="lazy" はビューポートに近づいた時に画像を読み込む。ファーストビューの画像 (LCP 要素) には使わない。

React コンポーネントの遅延読み込み

React コンポーネントの遅延読み込みのコード例を示す。

import { lazy, Suspense } from 'react';

const HeavyChart = lazy(() => import('./HeavyChart'));

function Dashboard() {
  return (
    <Suspense fallback={<div>Loading chart...</div>}>
      <HeavyChart />
    </Suspense>
  );
}

React.lazy + Suspense でコンポーネントを動的にインポートし、必要になるまで JavaScript バンドルを読み込まない。ルートごとにコード分割すれば、ページ遷移時に必要なチャンクだけ読み込まれる。

遅延読み込みの対象

遅延読み込みの対象を以下にまとめる。

対象	方法
画像	loading="lazy"
React コンポーネント	React.lazy + Suspense
ルート	動的 import でコード分割
iframe	loading="lazy"
サードパーティスクリプト	操作やスクロールを契機に script を動的挿入

最後の行だけは性質が違う。async と defer は取得自体を後回しにする指定ではなく、どちらも HTML の解析と並行してダウンロードされ (解析はブロックしない)、async は取得できた時点で、defer は解析が終わった時点で実行される。つまり初期読み込みの帯域は消費する。チャットウィジェットや計測タグのように後回しでよいものを本当に遅らせたいなら、スクロールや最初の操作を契機に script 要素を動的に挿入する。

注意点

• ファーストビューの要素を lazy にしない (LCP が悪化)
• CLS を防ぐため、画像に width / height を指定する。未読み込みの画像は幅と高さが 0 として扱われるため、サイズ未指定で高さが 0 になった画像は表示領域と交差せず、読み込まれないまま残ることがある
• 読み込みを開始する距離を決めるのはブラウザで、開発者が数値で指定する手段はない。回線が細い環境ではスクロール直後に一瞬空白が見えることを前提に置く
• 遅延が効くのは JavaScript が有効なときだけで、無効時は通常どおり即座に読み込まれる (画像の要求時刻からスクロール位置を推測されるのを防ぐための仕様)
• window の load イベントは lazy 画像の読み込みを待たない。画像が出そろってから動かしたい処理や E2E テストは、個々の画像の load で判断する

現場での応用を知るには関連書籍も役立つ。