#406
視覚デザイン
#406レイジーローディング
レイジーローディング
別名・表記:Lazy Loading
UIXHERO Definition
「遅延読み込み」のこと。Webページの初期表示を高速化するため、画像などの重いデータを、ユーザーがスクロールしてその位置に来るまで読み込まない技術。
概要
パフォーマンス改善の基本テクニック。「必要になるまで読み込まない」ことで、通信量を節約し、体感速度を向上させる。
UXでの活用
- 画像の読み込み: 画面外の画像を後回しにすることで、ファーストビュー（最初に見える範囲）の表示を最速にする。
- スケルトンスクリーン: 読み込み中にグレーの箱を表示しておくことで、読み込み中であることを視覚的に伝え、体感時間を短くする。
💡 使いどころ
画像が多いメディアサイト、無限スクロールを採用しているフィード型UI（SNS）。
⚠️ 注意点・誤用
SEOへの影響（Googlebotがスクロールしないと認識できないコンテンツ）に注意が必要だが、最近のクローラーは改善されている。実装方法によってはインデックスに影響する可能性がある。また、スクロール時のカクつき（レイアウトシフト）を防ぐため、画像のサイズ（高さ）をあらかじめ確保しておく（CLS対策）。
具体例
- Pinterestの画像一覧表示
- Mediumの記事下部の「おすすめ記事」
出典・参考文献:
- Mozilla Developer Network. (n.d.). Lazy loading. MDN Web Docs.
- Google. (2020). Lazy-loading images in the browser. web.dev.
- Google. (2020). Cumulative Layout Shift (CLS). web.dev.