レイジーローディング

レイジーローディングの概要

動的読み込みは、写真など一部のページ要素を必要な時まで読み込みを遅らせます。むやみに読み込むのではなく、ユーザーが操作するまでブラウザは待機します。正しく利用すれば、ページの表示速度を向上させることが可能です。

「レイジー」と呼ばれるのは、ブラウザの読み込みを先延ばしにするからです。レイジーローディングのページでは、ブラウザは「必要になるまでこれらの画像は後回しにする」と示しています。一方、即時読み込みのページでは「すぐに全て読み込む」と明言します。この場合、後回しにする方が効率的です。

例えば、ブログ記事の上部に画像があり、下部にイラストが配置されている場合、閲覧者が記事をスクロールするまでブラウザはイラストの読み込みを待ちます。これにより、画像は1枚ずつ読み込まれ、サイト全体の読み込みが速くなります。

仕組み

レイジーローディングは、ユーザーが操作中に発生します。ユーザーがページをスクロールすると、その部分の画像が読み込まれます。

閲覧者が最初に見る部分を「上部」と呼び、まだ表示されていない部分を「下部」と呼びます。上部の画像は即時に読み込む必要がありますが、下部の画像は後から読み込みが始まります。

「フォールド」とは一体何を意味するのでしょうか。これは新聞のレイアウトから来ており、読者はまず、折りたたまれた新聞の上半分を見るためです。ウェブの場合、ユーザーの画面下部が「フォールド」となります。

レイジーローディングの長所と短所

長所:

• ページの読み込みが速くなる

他の条件が同じであれば、ファイルサイズが小さいページは速く読み込まれます。最適な読み込みにより初期のデータ量が減少し、サイトの表示が速くなります。これにより、SEO、コンバージョン率、全体的なサイト満足度にも良い影響が期待できます。

• 余計なものがない

例えば、下部に複数の写真があるページで、ユーザーがスクロールする前に離脱すると、ブラウザが写真をダウンロードし描画する努力は無駄になります。一方、レイジーローディングでは、本当に必要になるまで画像の読み込みを待つため、帯域や処理時間の節約につながります。

短所:

• ユーザーが資産の読み込みを急ぐ場合がある

例えば、ユーザーが急速にスクロールすると、画像の読み込みを待たなければならず、ユーザー体験に悪影響を与える可能性があります。

• サーバとの追加通信が発生する

ページ全体を一度にリクエストするのではなく、操作に応じてサーバへ複数回問い合わせする必要が生じることがあります。この欠点は、画像をキャッシュするコンテンツデリバリネットワーク(CDN)の導入で軽減できます。

• ブラウザが処理する追加のスクリプト

プログラマーがレイジーローディングの指示をJavaScriptで記述すると、ブラウザは余分なコードを読み込み、処理する必要が生じます。効率が悪いと、この追加負担が逆に読み込み時間を延ばす場合があります。

‍

即時読み込みとレイジーローディングの比較

背景でリソースを読み込む機会や必要がある場合、即時読み込みは有利です。中には、ローディング画面を表示するアプリもあれば、必要なファイルを直ちにダウンロードするアプリもあります。

スマートローディングはリソースの初期化を後回しにするのに対し、即時読み込みはすぐに行います。即時読み込みは、リソースそのものと依存する要素もあらかじめ読み込みます。PHPスクリプトでインクルードされた素材の読み込みがその一例です。

レイジーローディングの実装

無料で利用可能なライブラリを使って実装することが可能です。以下に例を挙げます:

• blazy.js は、写真、iframe、動画などを複数提供しながらレイジーローディングを行う小規模なJavaScriptライブラリです。
• LazyLoad は、ビューポートに表示された時だけ画像を読み込むスクリプトです。

次の技法を用いることで、コードにこの読み込み手法を導入できます:

遅延初期化

この方法では、要素を初期的に null として設定します。コンポーネントが呼ばれた際、対象が null であればデータが読み込まれます。

• 仮想プロキシ
• リソース要求時、同じインターフェースを持つ仮想オブジェクトを呼び出し、初回呼び出し時に実際のオブジェクトを読み込んで制御を委譲します。
• ゴースト

オブジェクトの識別子のみを用いて部分的にファイルを取り込み、初めてプロパティにアクセスする際に完全な情報を読み込みます。

値保持

柔軟な読み込み動作をサポートする汎用オブジェクトを構築し、そのオブジェクト用のデータフィールドを表示します。

動画のレイジーローディング

HTML5のvideo要素の preload 属性を利用すれば、自動再生されない動画をレイジーローディングで読み込むことが可能です。

Chromeでは自動再生動画に自動のレイジーローディングが適用されます。非 Webkit ブラウザで動画を再生するためには、動画タグに次の属性を付与する必要があります:

画像の読み込み遅延の調整

実際の静止画の小さいサムネイルを表示し、後から本来の画像に差し替えることで、画像の読み込みを遅延させます。技術的には、画像の読み込みを遅らせる手法は複数存在します:

• スクロールやサイズ変更などのイベントハンドラーを、画像がビューポート内にある場合はインラインの img タグに付加します。
• Intersection Observer API
• CSS の background-image 属性

その他、レイジーローディングが利用できるページ要素

1. Iframes

iframe は、外部の素材をページ内に組み込むためのコードです。以下で解説する HTML の画像読み込み属性は、iframe 要素にも利用できます。

2. JavaScript

JavaScript はレンダリングをブロックするリソースで、コードの読み込みが完了するまでページの表示ができません。コードを必要に応じて読み込まれる小さなモジュールに分割することで、サイトの読み込み時間を短縮できます。

3. CSS

CSS もまたレンダリングを遅らせるリソースです。条件付きで読み込む複数のファイルに分割することで、待機時間を最小限にできます。非ブロックの CSS ファイルは、読み込みタイミングを示す media 属性を付与した専用の link タグを使用します。