遅延読み込み(Lazy Loading)

ビュッフェで最初から全種類の料理をテーブルに山盛りにせず、お皿が空いてから食べる分だけ順番に取りに行くような仕組みです。

定義 遅延読み込み(Lazy Loading/レイジーローディング)とは、ウェブサイトやアプリを開くときにすべてのデータ(画像、動画、プログラムコードなど)を一度に読み込まず、画面に表示される瞬間や実際に必要になったタイミングに合わせて後から読み込む最適化技術です。

なぜ最初から全部読み込まないの?

本を読むとき、私たちは今開いているページだけを見ますよね。1000ページもある分厚い百科事典のすべてのページを、部屋中に一度に広げてから読む人はいません。

ネットの世界でもまったく同じことが起きています。写真が100枚も並ぶショッピングサイトにアクセスしたとき、利用者は一番上の商品を数個だけ眺めて、すぐにページを閉じてしまうこともあります。

もしウェブサイトが、アクセスした瞬間に100枚の高画質画像をすべてダウンロードしようとしたら、画面が白く固まって表示されるまでに長い時間がかかってしまいます。大切なスマートフォンの通信量(ギガ)も無駄になってしまいますよね。そこで遅延読み込みは、今すぐ画面に見えている部分だけを先に素早く読み込み、画面の外にある画像は読み込みを賢く後回しにします。

遅延読み込みの仕組み 画面送り 表示領域 即時DL 画面外 (待機) スクロール時DL

スクロールが届いたときに魔法のように現れる

遅延読み込みが設定された画面の下の方には、重たい本物の画像の代わりに、容量がごく軽い空き枠やぼかした仮画像(プレースホルダー)があらかじめスタンバイしています。

ユーザーが指で画面を下にスクロールし始めると、ウェブブラウザはユーザーの視線が画面のどのあたりまで進んだか、スクロール位置をこまめに見守ります。

そして、特定のエリアが画面に入りそうになる直前、ブラウザがサーバーに合図を送って初めて本物の高画質画像を読み込みます。この仕組みのおかげで、ユーザーは最初の画面を一瞬で表示でき、ウェブサイトを運営するサーバー側も一度に大量のリクエストを受けずに済むため、サーバーの過負荷を防ぐことができます。

もう少し正確に言うと

遅延読み込みは、目に見える画像や動画ファイルだけに適用される技術ではありません。もう少し正確に言うと、アプリやWebページを動かす巨大なプログラムコードそのものにも広く使われています。

最近のウェブサイトは、多彩な機能を持つひとつの巨大なソフトウェアのようなものです。しかし、ユーザーが商品を眺めるだけで帰るかもしれないのに、アクセスした瞬間に使いもしない複雑な決済機能や会員情報の変更プログラムまで全部ダウンロードする必要はありませんよね。

そこで開発者は、プログラム全体を細かく分割しておき、ユーザーが購入ボタンを押したまさにその瞬間に、該当する機能のコードを読み込むように設計します。このように必要なタイミングで必要なコードだけを読み込む仕組みは、端末のメモリやバッテリーを大幅に節約してくれます。

🤔 よくある誤解

✕ 誤解

遅延読み込みを使えば、ページ全体のデータ通信量が必ず半分に減る。

✓ 事実

ページの一番下までスクロールすれば、最終的にはすべてのデータをダウンロードすることになります。遅延読み込みの本質はデータ総量を減らすことではなく、「必要な瞬間まで転送を先送りにして、最初の画面をすばやく表示すること」です。

🧺 日常で出会う場面

1 InstagramなどのSNSでタイムラインを下にスクロールするたび、新しい写真がなめらかに表示される。
2 ネット通販のページを開いたとき、商品説明が先に表示され、スクロールするにつれて下のレビュー画像が順番に読み込まれる。
💡 つまり ひとことで

すべてのデータを一度に読み込まず、画面に表示される瞬間や必要になったタイミングに合わせて分割して読み込む、表示速度の最適化技術です。