遅延読み込み
Lazy loading
別名: 遅延読み込み、レイジーロード、Lazy load、Lazy loading
生態（さわってみる）
一言定義
画像などの重いリソースの読み込みを、実際に画面へ表示される直前まで遅らせる表示最適化のUI・実装パターン。
分類
使う場面
- 画像や動画を多用する長いページで、初期表示速度と通信量を抑えたいとき
- ユーザーがスクロールして到達するまで実際には見られない領域が多いページ
避ける場面
- ファーストビュー内の画像（多くの場合LCP計測対象）。遅延させるとかえって表示が遅く見える
- 件数が少なく、全件を先読みしてもコストがほとんど変わらないとき
近縁種との比較
遅延読み込みは<img loading="lazy">のようにブラウザ標準機能として実装できる場面が増えており、その意味で本図鑑の他の多くのUIパターンより「実装パターン」寄りの性格を持つ（研究ノートの出典欄も個別の設計指針ではなく実装パターンとして扱う）。無限スクロールとは、どちらもスクロール位置に応じて何かを後から読み込む点が似ているが、無限スクロールが一覧の末尾に「新しい項目そのもの」を追加取得するのに対し、遅延読み込みは既にDOM上にある要素の中身（画像等のリソース）の取得タイミングを遅らせるだけで、項目数自体は増えない。スケルトンスクリーンとは、読み込み中の見え方を扱う点で近いが、スケルトンスクリーンは読み込み完了前のレイアウトを予告する表示そのものであり、遅延読み込みはその読み込みをいつ開始するかというトリガーの設計である。
実例リンク
アクセシビリティ
- role
- 読み込み前後でalt属性の内容は変えない。読み込み中のプレースホルダー自体に意味のあるroleは不要（装飾的なため）
- キーボード操作
- 遅延読み込み自体はキーボード操作を伴わない。読み込み前後でレイアウトが動かないよう、width/height（またはaspect-ratio）を事前に確保する
- 補足
- 画像・iframeは`loading="lazy"`属性でブラウザネイティブに対応しており、多くの場面でIntersectionObserverによる自前実装は不要になっている。ファーストビューの画像には`loading="lazy"`を付けない（LCPを悪化させるため）