レイジーローディングとは？

レイジーローディングとは？

レイジーロード（遅延読み込み）とは、Webページの特定の部分（特に画像）を、それらが必要になるまで読み込むのを待機させる技術です。「Eager（イーガー）ロード」と呼ばれるすべてを一度に読み込む手法ではなく、ブラウザは、ユーザーがリソースが必要になるような操作を行うまで、特定のリソースを要求しません。遅延読み込みを適切に実装することで、ページの読み込み時間を短縮することができます。

このタイプの読み込みは、Webブラウザに読み込みを先延ばしさせるため、「遅延」と呼ばれます。遅延読み込みが実装されたWebページを表示すると、基本的にブラウザは、「実際に必要になるまでこれらの画像の読み込みを待機する」と言った動作をします。一方、「Eagerロード（熱心な読み込み）」のウェブページを表示した場合、ブラウザは「すぐに手配します！」と言った逆の動作をします。現実世界では先延ばしにすることはネガティブな意味を持つことがありますが、この場合の多くは効率性を高めるものです。

ブログ記事を例にとると、ページの上部に画像、下部付近に図が表示されていることがあります。ブログ記事を読んでいる人がテキストの一番下まで到達するのに数分かかる場合、ブラウザは読者がその部分までスクロールするまで図の読み込みを待機します。この方法では、ブラウザが読み込む画像は2つではなく1つになるため、ページの最初の読み込みはより高速になります。

画像の遅延読み込みの仕組みは？

画像の遅延読み込みのトリガーとなるのは、通常ユーザーのナビゲーションです。特に、ユーザーがページを下にスクロールした時に、そこに表示される画像を読み込むようにブラウザに指示します。

Webページが読み込まれたとき、ユーザーが目にする部分を「above the fold（アバブ・ザ・フォールド）」と呼び、ユーザーにはまだ見えない部分を「below the fold（ビロウ・ザ・フォールド）」と呼びます。*アバブ・ザ・フォールドより上にある画像はすぐに読み込む必要があり、読み込まれない場合ユーザーエクスペリエンスに影響を与えることになります。しかし、ユーザーはスクロールダウンするまで、ビロウ・ザ・フォールドの画像を見ることはありません。したがって、ビロウ・ザ・フォールドにある画像は、遅延読み込みを使用することができます。

*「fold（フォールド）」とは？「Above the fold（アバブ・ザ・フォールド）」と「below the fold（ビロウ・ザ・フォールド）」は、新聞のレイアウトに由来しています。新聞は通常、水平に二つ折りにされており、読者が最初に目にするのは前半分（Above the fold：折り目より上の部分）です。この用語をWebレイアウトに適用する場合、「fold（折り目）」は、ユーザー画面の下部を指します。

画像の遅延読み込みの実装方法

遅延読み込みを実装する方法の一つは、HTMLの属性loadingをイメージタグで使用することです。以下の例のようにloading="lazy"を追加すると、ユーザーが画像の近くにスクロールするまで画像の読み込みを待機するようブラウザに指示します。

<img src="example.com/image" alt="example image" width="100" height="100" loading="lazy">

ウェブ開発者は、プログラミングのフレームワークを使用して、より高度な遅延読み込みを実装することもできます。Angularはこの目的のためによく使用されます。JavaScriptのライブラリであるReactも遅延読み込みをサポートしています。

Cloudflare Mirageは、遅延ロードを実装するもう一つの方法です。Mirageは、画像のサイズを自動的に変更するだけでなく、必要な画像のみを読み込むレイジーローダー（遅延読み込みのプラグイン）の役割を果たします。Cloudflare Mirageの機能は、ProおよびBusinessのセルフサービスプランのCloudflareのお客様、およびEnterpriseのお客様に提供しています。

遅延読み込みを利用できる他のページリソースは？

• JavaScript：JavaScriptのコードが読み込まれるまでブラウザがページを描画することができないため、JavaScriptはレンダリングブロックリソースと呼ばれています。JavaScript のコードは必要に応じて読み込める小さなモジュールに分割できるため、JavaScriptを実行する必要があるページの読み込み時間を短縮できる見込みがあります（詳細）。
• CSS：CSSもレンダリングブロックリソースです。CSSファイルを複数のファイルに分割し、必要なときだけ読み込むようにすることで、ブラウザがページの残りの部分の描画をブロックする時間を短縮することができます。非ブロックCSSファイルは、それらを読み込むタイミングをブラウザに通知するために追加されたmediaプロパティを持つ独自のlinkが必要です（詳細）。
• iframe：iframeは、外部ソースからのコンテンツをWebページに埋め込むために使用されます。iframeタグには、上記の画像と同じHTMLのloading属性を含めることができます。

遅延読み込みのメリットは？

ページ読み込みの高速化：他の条件が同じであれば、ファイルサイズが小さいWebページは読み込みが高速です。遅延読み込みでは、Webページは本来のサイズよりも小さいサイズで開始されるため、読み込みが速くなります。高速なウェブパフォーマンスには、より優れたSEO、より高いコンバージョン率、ユーザーエクスペリエンスの向上など、数多くの利点があります。

不要なコンテンツがないこと：ページに複数の折りたたみ式画像を読み込んだが、ユーザーが下にスクロールする前にページを閉じてしまったとします。このような場合、画像の配信に使用された帯域幅と、ブラウザが画像のリクエストと描画に費やした時間は、実質的に無駄になってしまいます。これに対し、遅延読み込みでは、これらの画像は必要なときだけ読み込まれます。これにより、時間と処理能力が節約され、使用する帯域幅が少なくなるため、Webサイトの所有者にとっては経費の節約になる場合があります。

遅延読み込みの欠点とは？

予想以上に速くリソースが要求される可能性：例えば、ユーザーがページを素早くスクロールした場合、画像が読み込まれるまで待たされる場合があります。これは、ユーザーエクスペリエンスにマイナスの影響を与える可能性があります。

サーバーとの追加通信：ブラウザーはすべてのページコンテンツを一度にリクエストするのではなく、ユーザーがページを操作する間、ブラウザがWebサイトのサーバーにコンテンツリクエストを複数回送信する必要がある場合があります。コンテンツ配信ネットワーク（CDN）を使用することで画像はCDNによってキャッシュされ、ブラウザはオリジンサーバーにリクエストを送信して画像を取得する必要がなくなるため、この潜在的な欠点を最小限に抑えることができます。

ブラウザが処理するための追加コード：開発者がページリソースの遅延読み込み方法を指示するために複数行のJavaScriptをWebページに追加することで、ブラウザが読み込んで処理しなければならないコードの量が増加します。もし非効率的に行われた場合、このわずかな読み込みと処理の追加時間は、遅延読み込みによって節約される時間を上回る場合があります。

Eagerローディングとは？

Eagerローディングとは、Webページのすべてのリソースを同時に、またはできるだけ早く読み込むことです。Eagerローディングを使用する一部のアプリケーションでは、「読み込み中」の画面が表示されることがあります。オンラインゲームのような複雑でコードの多いWebアプリケーションでは、Eagerローディングの使用が好まれる場合があります。

開発者がWebページの高速化を実現する方法は？

Webパフォーマンスにはさまざまな要因が影響しますが、以下の3つのステップは、Webサイトを高速化するための良い出発点となります。

1. CDNを利用する：CDNにWebコンテンツがキャッシュされると、遅延読み込みの使用の有無にかかわらず、オリジンサーバーとの通信を最小限に抑えることができます。また、CDNは通常、オリジンサーバーよりもユーザーに近い場所にあるため、コンテンツをより高速にユーザーに配信することができます。
2. 画像を最適化する：画像のサイズが大きすぎると、遅延読み込みを使用している場合でもパフォーマンスに影響が出ます。可能な限り画像のファイルサイズを小さくすることで、画像の読み込みを速くすることができます。
3. コードを最小化する：最小化とは、機能を変えずにCSSやJavaScriptのコードから不要な文字をすべて削除する処理です。これには、空白、コメント、セミコロンの削除が含まれます。最小化によってコードのファイルサイズが小さくなり、読み込み速度が向上します。

Webページのパフォーマンスを向上させる方法についてはこちらをご覧ください：Webサイトの速度を向上させるためのヒント