遅延読み込み

遅延読み込みとは

遅延読み込み (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"
サードパーティスクリプト	async / defer

注意点

• ファーストビューの要素を lazy にしない (LCP が悪化)
• CLS を防ぐため、画像に width / height を指定

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