Lazy Loading

遅延読み込みは、画面外のリソースを、ビューポートに入る直前まで読み込まない手法です。画像、iframe、動画、ページの一部のセクションに使われます。

ブラウザは、HTMLの標準仕様で定義された、imgとiframe要素のloading属性を lazy に設定することで、遅延読み込みをネイティブに対応しています。サイトはJavaScriptでも実装しており、通常はIntersectionObserver APIを使います。この APIは、要素が表示領域に近づいたときに通知します。

リソースが読み込まれるまで、ページはプレースホルダーを表示します。空の枠、単色、ぼかしたプレビュー、スピナーなどです。遅延読み込みによって、初期のページの容量が減り、最初の表示が速くなります。

遅延読み込みの仕組み

1. ページは、画面外の画像にプレースホルダーを付けて読み込まれます。
2. ブラウザまたはスクリプトが、各プレースホルダーの位置を監視します。
3. ユーザーがその近くまでスクロールすると、実際のファイルを要求します。
4. 画像が届くと、プレースホルダーを置き換えます。

無限スクロールは、コンテンツについても同じ考え方を使います。ユーザーがリストの末尾に到達すると、新しい項目を取得します。

遅延読み込みとスクリーンショット

ページ全体を一度に描画するフルページの撮影では、スクロールを行わないため、画面の下方にある遅延読み込みのコンテンツが要求されないことがあります。その結果、空の枠やぼかしたプレビューが表示されます。ビューポートの撮影は、表示されている内容だけを撮影するため、影響は小さくなります。

遅延読み込みのコンテンツの検出

• フルページの撮影の下部にある、空または灰色の枠を探す。
• ページを手動でスクロールし、フェードインする画像を確認する。
• ブラウザのDevTools で画像要素を調べ、loading属性やプレースホルダーのソースを確認する。
• 通常の撮影と、遅延を設定した後の撮影を比較する。

Temposhotの Website Capture では、Wait の設定で Network idle を選ぶか、0〜60秒の遅延を追加します。Temposhot Full Page Screenshot 拡張機能 は、撮影中に表示中のページをスクロールするため、スクロールに応じた読み込みが行われます。

よくある間違い

• loadイベントの時点で撮影し、ページが完全に読み込まれたと考える。
• スクロールを行わずに長い遅延を設定する。スクロールで読み込まれる画像には効果がありません。
• 無限スクロールのページを「フルページ」として撮影する。終わりのない撮影になります。
• 小さいサイズでは読み込み済みに見える、ぼかしたプレースホルダーの画像を見過ごす。

同じスクリーンショットを繰り返し撮りますか？

待機条件を一度設定し、Webサイトのスクリーンショット自動化 のすべてのURLで再利用してください。

よくある質問

遅延を長くすると、遅延読み込みの画像は表示されますか？

タイマーで読み込まれるコンテンツや、ネットワーク通信の後に読み込まれるコンテンツには効果があります。スクロールで読み込まれるコンテンツにはスクロールが必要です。

自分のサイトでは遅延読み込みを避けるべきですか？

いいえ。遅延読み込みは速度を改善します。画面の最初の部分にある画像は、すぐに読み込まれるように通常どおりの読み込みを維持してください。

出典

• Lazy loading（Wikipedia）
• HTML Living Standard: URLs and fetching

関連リソース

• Website Captureのオプション: 待機と遅延の設定。
• フルページスクリーンショット: ページ全体の高さを撮影します。