Zenn
🐥

Webアプリのパフォーマンスを向上させる

に公開
Next.js
React
Web
tech

🚀 Webアプリのパフォーマンスを向上させる「遅延読み込み（Lazy Loading）」のすすめ

Webのパフォーマンスは非常に重要です。Reactでシングルページアプリを作っている場合でも、Next.jsでブログを構築している場合でも、Vueでダッシュボードを作っている場合でも、1ミリ秒の差がユーザー体験に大きな影響を与えます。

今回は、誰でもすぐに使えるテクニック「遅延読み込み（Lazy Loading）」について紹介します。

✅ 遅延読み込みとは？

ページ読み込み時に必要のないリソースの読み込みを後回しにする設計パターンのことです。ユーザーが実際にそのリソースを必要としたときに読み込みが行われます。

これにより、初期読み込み時間やページサイズ、CPUやメモリの使用量を削減できます。

💡 遅延読み込みが有効なケース

  • 長い画像フィードやギャラリー
  • 初期レンダリング時に表示されないコンポーネント（モーダル、サイドバー、タブなど）
  • グラフやマップなどの重い外部ライブラリ

すぐに表示する必要のないリソースは、遅延読み込みの対象として最適です。

🛠️ 遅延読み込みの実装方法

1. 画像の遅延読み込み

HTMLで：

<img src="thumbnail.jpg" loading="lazy" alt="サンプル画像" />

Reactで：

<img src="image.jpg" loading="lazy" alt="遅延読み込み画像" />

✅ ヒント：画像形式は webp を使うとさらに高速になります。

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

import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./MyComponent'));

function App() {
  return (
    <Suspense fallback={<div>読み込み中...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

この方法では、LazyComponent が必要になったときに初めて読み込まれます。

3. Next.jsでの動的インポート 

import dynamic from 'next/dynamic';

const Chart = dynamic(() => import('../components/Chart'), {
  loading: () => <p>チャートを読み込み中...</p>,
  ssr: false,
});

重いライブラリをサーバーサイドレンダリングせずに読み込みたいときに便利です。

⚠️ よくある落とし穴

  • SEOへの影響：検索エンジンにインデックスしてもらいたい内容は、遅延読み込みにしないよう注意。
  • アクセシビリティ：キーボードやスクリーンリーダーに対応できるようにする。
  • フォールバック：読み込み中の代替UIを必ず用意しましょう。

📈 パフォーマンス改善の事例

あるプロジェクトで、画像とコンポーネントの一部を遅延読み込みに切り替えた結果：

  • 初期読み込み時間が 38% 短縮
  • インタラクティブまでの時間が 28% 改善
  • Lighthouseスコアが 75 → 93 に向上

🧠 まとめ

「遅延読み込み」は、コストが低く、効果の高いパフォーマンス改善手法です。モダンブラウザで幅広くサポートされており、React・Vue・Next.jsなどどんなフレームワークでも活用できます。

少しの工夫で、ユーザーにより速く、快適な体験を提供しましょう！

🙌 おわりに

この記事が役に立ったら、Zennでフォローしていただけると嬉しいです！
今後も、開発者に役立つTipsやベストプラクティスを発信していきます。

Discussion