遅延読み込み（Lazy Loading）とは何ですか？

画面に表示される直前までリソースの読み込みを遅らせる技術。ページの初期表示を高速化する。

遅延読み込み（Lazy Loading）のポイントは？

loading="lazy" 属性でブラウザ標準の遅延読み込みが可能。画面外の画像や動画の読み込みを後回しにして初期表示を高速化。Intersection Observer APIで自前実装も可能。ファーストビュー（最初に見える領域）の画像には適用しない

遅延読み込み（Lazy Loading）を簡単にまとめると？

「遅延読み込み」って出てきたら「必要になるまで読み込みを後回しにする技術」と思えればだいたいOK！

遅延読み込み（Lazy Loading）の語源・英語での意味は？

Lazy Loading（怠惰な読み込み）。Lazy（怠惰な）。必要になるまで「怠けて」読み込まない、というニュアンスだよ

【ちえんよみこみ】

遅延読み込み（Lazy Loading）とは？

💡 「見えるまで読み込まない」省エネ技法

📌 このページのポイント

loading="lazy" 属性でブラウザ標準の遅延読み込みが可能
画面外の画像や動画の読み込みを後回しにして初期表示を高速化
Intersection Observer APIで自前実装も可能
ファーストビュー（最初に見える領域）の画像には適用しない

遅延読み込みのイメージ

ひよこ

どういう仕組みなの？

ペンギン先生

ユーザーがスクロールして画像が画面に近づいた時に初めて画像をダウンロードする。20枚の画像があるページで、最初に見えるのは3枚だけなら、残り17枚の読み込みを後回しにできる。HTMLにloading="lazy"と書くだけでブラウザが自動でやってくれるよ

ひよこ

全部の画像にlazy付ければいい？

ペンギン先生

ファーストビュー（ページ表示直後に見える領域）の画像にはlazyを付けない方がいいよ。LCP（Largest Contentful Paint）に影響する画像をlazyにすると、逆にCore Web Vitalsスコアが下がることがある。ファーストビューの画像にはloading="eager"（デフォルト）＋fetchpriority="high"を付けるのが正解だね

ひよこ

画像以外にもLazy Loadingはある？

ペンギン先生

あるよ。①コード分割（Code Splitting）：JavaScript モジュールを必要な時にdynamic import()で読み込む、②iframe：YouTubeの埋め込みにloading="lazy"を付ける、③コンポーネントの遅延読み込み：ReactのReact.lazy()やVueのdefineAsyncComponent。ページの初期バンドルサイズを小さくする効果があるよ

ひよこ

SEOへの影響は？

ペンギン先生

GooglebotはIntersection Observerやloading="lazy"に対応しているから、遅延読み込みした画像もインデックスされる。ただしJavaScriptが実行されない検索エンジン（一部のクローラー）ではインデックスされない可能性がある。重要なコンテンツ画像はlazyにしない、または

遅延読み込み（Lazy Loading） とは？

遅延読み込み（Lazy Loading）とは？