なぜ後で読むのか
一度に読むと初期表示が遅れます。初期表示が速いと速く感じます(Nielsen, 1993; Card et al., 1991)。無限スクロールやカルーセルで効果的です。
実装と例外
loading="lazy"(web.dev, n.d.-a)やIntersection Observer(MDN, n.d.)。最初の応答が重要なので(Miller, 1968)メイン画像は即時に。
ずれとプレースホルダー
CLS(web.dev, n.d.-b)を防ぐため幅と高さを指定し、ぼかしやスケルトンで埋め、代替テキストを(WCAG 2.2 1.1.1)。
よくある質問
- 全画像に使う?
- いいえ、ファーストビューは即時読み込みです。
- SEOに不利?
- 標準的な実装なら読まれます。
出典確認日:2026-10-27
参考文献
- web.dev. (n.d.-a). Browser-level image lazy loading for the web. Google. loading=lazyの仕組みです。
- web.dev. (n.d.-b). Cumulative Layout Shift (CLS). Google. レイアウトのずれ指標です。
- MDN Web Docs. (n.d.). Lazy loading. Mozilla. 遅延読み込みの手法です。
- Nielsen, J. (1993, January 1). Response time limits. Nielsen Norman Group. 応答時間の限界です。
- Card, S. K., Robertson, G. G., & Mackinlay, J. D. (1991). The information visualizer, an information workspace. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 181–186). ACM. 知覚時間の基準です。
- Miller, R. B. (1968). Response time in man-computer conversational transactions. In Proceedings of the December 9–11, 1968, Fall Joint Computer Conference, Part I (pp. 267–277). ACM. 遅延と期待の古典です。
- World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. 1.1.1代替テキストです。
