遅延読み込み
Lazy loading画像などの重いリソースの読み込みを、実際に画面へ表示される直前まで遅らせる表示最適化のUI・実装パターン。
○ 使う場面
- 画像や動画を多用する長いページで、初期表示速度と通信量を抑えたいとき
- ユーザーがスクロールして到達するまで実際には見られない領域が多いページ
× 避ける場面
- ファーストビュー内の画像（多くの場合LCP計測対象）。遅延させるとかえって表示が遅く見える
- 件数が少なく、全件を先読みしてもコストがほとんど変わらないとき
別名
遅延読み込み、レイジーロード
近縁種との比較
遅延読み込みは、ページを開いた瞬間に全ての画像や動画を読み込むのではなく、実際に画面に見えてくる分から順番に表示していく工夫である。おかげで最初の表示が速くなり、通信量も節約できるので、画像を多く使うページでもスマホなどの回線が細い環境で軽快に動く。ECサイトの商品一覧やSNSのフィードのように、スクロールしないと見えない画像がたくさん並ぶ場面でよく使われている。
| 近縁種 | 違い・使い分け |
|---|---|
| 無限スクロール | 無限スクロールとはどちらもスクロール位置に応じて何かを後から読み込む点が似ているが、無限スクロールが一覧の末尾に新しい項目そのものを追加取得するのに対し、遅延読み込みは既にDOM上にある要素の中身（画像等のリソース）の取得タイミングを遅らせるだけで項目数自体は増えない。 |
| スケルトンスクリーン | スケルトンスクリーンとは読み込み中の見え方を扱う点で近いが、スケルトンスクリーンは読み込み完了前のレイアウトを予告する表示そのものであるのに対し、遅延読み込みはその読み込みをいつ開始するかというトリガーの設計である。 |
分類
機能・役割
- ナビゲーション
- 入力・操作
- 表示・整理
- フィードバック・状態
表示レイヤー
- インライン
- 固定・追従
- オーバーレイ
- 全画面・遷移
複雑さ
- 単体パーツ
- 複合パーツ
- セクション