§15-09Perceived Performance

Lazy load (画像)

画面に入る直前に画像を読み込む。

初期表示を速くし、見られない画像の通信量を節約する。画像が多い長いページや一覧で効く。

実装のポイント

IntersectionObserver に rootMargin を付けて手前で読み込みを始め、表示後は unobserve する。aspect-ratio で領域を確保し、loading=lazy も検討する。