画像の遅延読み込みで表示が遅くなる原因と正しい使い分け

画像に loading="lazy" を付けると、表示がかえって遅くなることがある。とくに、最初に表示される画像にまで一律でつけてしまった場合だ。原因は、ブラウザの先読みのしくみが働かなくなる点にある。遅延読み込みは便利なしくみだが、使う場所を間違えると効果が消える。逆効果になることすらある。この記事では、しくみとLCPへの影響、正しい使い分けを整理する。

遅延読み込み（loading="lazy"）とは、どういうしくみか

loading="lazy" は、画像を「必要になるまで読み込まない」ためのブラウザ標準の属性だ。img タグや iframe タグにつけるだけで動く。指定すると、ブラウザは画面の外にある画像のダウンロードを後回しにする。ユーザーがスクロールして画像に近づいたタイミングで、読み込みがはじまるしくみだ。画像の数が多いページほど、はじめの通信量を減らす効果は大きい。ただし、このしくみが効くのは「いまは見えていない画像」に限られる。最初から画面に映る画像につけても、遅らせる対象がそもそも存在しない。得られるものはなく、副作用だけが残る。

なぜファーストビューの画像につけると表示が遅くなるのか

ブラウザには、HTMLを解析しながら先回りでリソースを取りにいくしくみがある。「プリロードスキャナー」と呼ばれる機能だ。HTML本体の解析を待たず、画像やCSSの取得を先にはじめておく。loading="lazy" がついた画像は、このプリロードスキャナーの対象から外れてしまう。ブラウザは「あとで使うものだから、いまは取りにいかなくてよい」と判断する。ファーストビューの画像は、本来もっとも早く欲しいリソースのはずだ。それなのに、遅延の指定によって取得の開始そのものが遅れる。結果として、画像の表示がほかの要素より遅れて完成する。これが、loading="lazy" の逆効果と呼ばれる現象の正体だ。

LCP（Largest Contentful Paint）への影響を知る

LCPとは、画面のなかでもっとも大きな要素が描かれ終わるまでの時間を測る指標だ。多くの場合、対象になるのは画像や見出しのブロックである。Core Web Vitalsのひとつとして、検索エンジンや利用者の体感速度の評価にかかわっている。ファーストビューの画像がLCPの対象になっているケースは多い。その画像に loading="lazy" をつけると、取得の開始が遅れた分だけLCPの数値も悪くなる。逆に、スクロールしたあとに見えてくる画像は、最初のLCP計測に影響しない。「画面の外にある画像」と「LCPを左右する画像」を混同しないこと。これが、正しい設定の出発点になる。

遅延読み込みを使うべき画像・避けるべき画像の見分け方

判断の基準はシンプルだ。「ページを開いた瞬間に、画面のなかに映るかどうか」である。ヒーロー画像、ファーストビューのロゴ、上部のバナーなどは、lazyをつけない対象になる。いっぽう、記事本文の途中に挿入する写真は、lazyの効果を発揮しやすい。フッター付近のイラストや、スクロールしないと見えないギャラリー画像も同じだ。迷ったときはどうするか。開発者ツールでページを開いた直後の表示範囲を確かめ、そのなかにある画像だけを除外すればよい。レイアウトごとに一律で指定するのではなく、画像一枚ごとに判断する姿勢が欠かせない。表示速度にかかわる工夫は、/blogでも別の切り口から取りあげている。

Next.jsのImageコンポーネントでの正しい設定

Next.jsのImageコンポーネントは、初期状態で遅延読み込みが有効になっている。なにも指定しなければ、すべての画像がlazy扱いになるしくみだ。ファーストビューに使う画像には、priority属性をつけて明示的に除外する必要がある。priorityをつけると、lazyの指定が外れる。同時に、ブラウザへ優先して取りにいくよう伝えるfetchpriority属性も自動でつく。LCPの対象になりそうな画像、たとえばヒーロー画像やメインビジュアルには、priorityの指定を検討したい。それ以外の画像は、初期状態のlazy動作に任せておけばよい。設定は一行ですむ。その一行の有無で、体感速度は大きく変わる。

遅延読み込みは、つけるかつけないかの二択ではない。どの画像に、どちらを選ぶかという設計の問題だ。自社サイトの表示速度に不安があるなら、/contactから相談してみてほしい。