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

たとえば画像にloading="lazy"を指定すると、ブラウザが画面からの距離などを見て取得時期を判断するよ。20枚あるページなら、遠くの画像を後回しにできる。ただし、見える瞬間まで必ず待つわけではない。表示に間に合うよう、画面へ近づいた段階で取得を始めることもあるんだ。

ページを開いて最初に見える重要な画像は、遅延させない方がいいよ。特にLCPの対象になる大きな画像を遅らせると、表示が遅くなることがある。fetchpriority="high"も、重要な画像を優先するための指定だ。最初に見える全画像へ一律に付けるのではなく、何を優先したいかを考えよう。

画像のwidthとheightなどを指定して、先に表示領域を確保する方法があるよ。画像が届いてから場所を広げると、下の文章が動いてしまう。遅延読み込みだけで表示の安定性まで解決するわけではないので、画像のサイズ指定も合わせて確認するんだ。

iframeにもloading="lazy"を指定できるよ。また、JavaScriptを小さく分け、必要な機能を使う時にdynamic import()で取得する方法もある。Intersection Observer APIで画面との位置関係を検知して、独自の読み込み処理を動かすこともできるんだ。対象によって実装方法は違うよ。

自動的に登録されるとは限らないよ。Googleのクローラーはスクロールやクリックをしないので、その操作が必須の読み込みは避ける必要がある。レンダリング後のHTMLに画像のURLや必要な内容が現れるかを、URL検査などで確認しよう。lazyという指定の有無だけで、検索への登録は決まらないんだ。