Zenn
🎞️

遅延読み込み（Lazy Loading）とはなにか？実装方法は？

に公開
HTML
JavaScript
Next.js
React
無限スクロール
tech

遅延読み込み（Lazy Loading）とは？

こんにちは！WEBアプリ等を開発していく中で、無限スクロールや遅延で読み込むのはどうやって実装するんだろうと思い調べたので記事にしたいと思います！結論から言うと遅延読み込み（Lazy Loading） というのは、ウェブページやアプリケーションのリソース（画像、動画、スクリプト、コンポーネントなど）を、初回のページ読み込み時にすべて読み込むのではなく、必要になったタイミングで読み込む技術のことです。

遅延読み込みのメリット

  • パフォーマンス向上
    初回のページ読み込みを高速化し、ユーザー体験を向上させる。
  • ネットワーク負荷の軽減
    ユーザーが実際に必要とするリソースのみをダウンロードするため、無駄なデータ転送を抑えられる。

遅延読み込みの実装方法

1.画像の遅延読み込み（HTMLの loading="lazy" を使う）

HTMLでは、loading="lazy" 属性を使うことで簡単に画像の遅延読み込みを実装可能。

<img src="example.jpg" alt="Example Image" loading="lazy">

2.Intersection Observer を使ったカスタム遅延読み込み

より高度な制御をしたい場合は、Intersection Observer API を使用すると、スクロールに応じて動的にリソースを読み込むことが可能になる。
以下は基本的な仕組みである。
1.監視対象の要素を指定する
2.その要素が画面内に入ったかどうかをチェックする
3.画面内に入ったら特定の処理を実行する
4.もし必要なら監視を解除する

3.React でコンポーネントの遅延読み込み(React.lazy())

初回のレンダリング時には MyComponent は読み込まれず、必要になったタイミングで読み込まれる。

import { lazy, Suspense } from "react";

const MyComponent = lazy(() => import("./MyComponent"));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}> //Suspense コンポーネントでラップし、fallback でローディング中のUIを表示する。
      <MyComponent />
    </Suspense>
  );
}

export default App;

4.Next.js での遅延読み込み

Next.js では、以下の方法で遅延読み込みを実装可能。

  • next/imageを使った画像の遅延読み込み
  • next/dynamic を使ったコンポーネントの遅延読み込み
    dynamic() を使うことで、クライアント側でのみコンポーネントを遅延読み込みが可能。ssr: false を設定すると、サーバーサイドではレンダリングされず、クライアントでのみ読み込まれる。
import dynamic from "next/dynamic";

const LazyComponent = dynamic(() => import("../components/LazyComponent"), {
  loading: () => <p>Loading...</p>,
  ssr: false, // SSRを無効にする場合
});

export default function Home() {
  return <LazyComponent />;
}

Discussion