遅延読み込み

遅延読み込みは、必要になるまでリソースの読み込みを遅らせるプログラミング技法です。一般的な例として、ユーザーがページ内の画像の位置までスクロールするまで画像の読み込みを遅らせるWebページがあります。遅延読み込みはWeb上だけでなく、モバイルやデスクトップのアプリケーションなどのプログラムでも使用されます。

Webでの遅延読み込み

Webページ内の画像を遅延読み込みすると、ブラウザーは表示されていない画像を読み込む必要がないため、読み込み時間を短縮できます。ユーザーがページをスクロールすると、画像が動的に読み込まれます。これは、各画像の位置を検出し、その画像がブラウザーウィンドウの表示領域内にあるかどうかを判断するJavaScriptを使って実現します。ユーザーが画像までスクロールすると、JavaScriptがWebサーバーにリソースを要求し、ページに画像を表示します。ユーザーが下にスクロールしなければ、画像は読み込まれません。

JavaScriptファイル、CSS、さらにはHTML自体など、ほかのリソースの読み込みを遅らせることもできます。たとえば、Web開発者は、Webページの「スクロールせずに見える範囲」のコンテンツ、つまり一般的なブラウザーウィンドウの高さ内で表示できるコンテンツに必要なCSSスタイルを判断できます。開発者は、これらを「インラインスタイル」、つまりWebページのHTML内で定義されたスタイルとして実装できます。JavaScriptを使って、ページの読み込み後、またはユーザーがスクロールを始めた後に追加のCSSを読み込むこともできます。

動画の遅延読み込みもWeb上で広く使われています。動画ファイルは通常、Webページ内で読み込まれる最大のリソースだからです。クライアントのデバイスに動画全体を送信する代わりに、Webサーバーはユーザーが動画を見ている間、動画の一部だけを少しずつ送信します。YouTubeやVimeoなどの人気動画共有サイトは、帯域幅を減らし、必要以上の動画コンテンツをユーザーがダウンロードするのを防ぐために遅延読み込みを使用しています。これは、モバイルデータプランなど、データ通信量に上限のあるインターネット接続を使用するユーザーに特に役立ちます。

ソフトウェアプログラムでの遅延読み込み

遅延読み込みはWeb上でますます一般的になっていますが、ソフトウェア開発では以前から使用されてきました。たとえば、オペレーティングシステムは、フォルダー内で表示されているアイコンのサムネイル画像だけを表示することがあります。同様に、画像閲覧プログラムは、写真ライブラリ内で表示されている画像だけを読み込むことがあります。プログラムが不要なデータを読み込まないため、使用するメモリが少なくなり、アプリケーションのパフォーマンスが向上します。