画像の遅延読み込みを有効にする前に確認すること

遅延読み込みはファーストビュー画像には使いすぎない

画像の遅延読み込みを有効にする前に最初に確認する答えは、記事下部の画像には有効だが、最初に見える大きな画像へ無条件に使うと表示が遅く見えることがある、という点です。

WordPress 5.5以降は画像にloading属性を付ける仕組みが入りました。効果を見る時は、記事本文の下部画像と、ファーストビューのアイキャッチを分けます。

• ファーストビューにある画像を確認する
• 画像にwidthとheightが入っているか見る
• LCP対象の画像にlazyが付いていないか見る
• 記事下部の画像が多いページで効果を見る

WordPress 5.5の遅延読み込みはwidthとheightも重要

WordPress Coreの開発ノートでは、WordPress 5.5で画像にネイティブのloading属性を使った遅延読み込みが導入されたこと、レイアウトずれを減らすためwidthとheight属性が重要であることが説明されています。

画像が遅れて読み込まれること自体より、読み込まれる前に表示領域が確保されているかが読者体験に関係します。

遅延読み込みを使う画像と避ける画像

すべての画像へ同じ設定を入れるのではなく、表示位置で分けます。

有効化前後の確認手順

遅延読み込みはON/OFFだけでなく、どの画像に効いているかを確認します。

• 代表記事のファーストビュー画像を確認する
• PageSpeed InsightsでLCP対象要素を見る
• 画像のwidth/height属性を確認する
• 遅延読み込みON後に表示ずれがないか見る
• スマホ回線相当でスクロール表示を確認する

LCP画像まで遅らせない

最初に見える画像を遅らせると、読者には「表示が遅い」と感じられることがあります。

• アイキャッチを無条件にlazyへする
• 画像サイズ指定なしでCLSを悪化させる
• プラグインを複数入れて二重制御する
• PCだけで確認してスマホを見ない

画像の遅延読み込みを有効にする前に確認することで状況別に判断するポイント

画像の遅延読み込みを有効にする前に確認することでは、同じ症状や確認作業でも、読者の状況によって先に見る場所が変わります。公開サイトが止まっている時、設定前に不安を減らしたい時、すでに一度変更してしまった時を分けると、余計な操作を減らせます。

作業後に残すメモ

画像の遅延読み込みを有効にする前に確認することを確認した後は、作業した日時、変更した項目、確認したURL、戻し方を短く残します。メモは長い文章でなくて構いません。次に同じ画面を開いた時に、何を見て何を変えたのか分かることが目的です。

• 確認した項目: ファーストビューにある画像を確認する、画像にwidthとheightが入っているか見る、LCP対象の画像にlazyが付いていないか見る
• 実行した作業: 代表記事のファーストビュー画像を確認する、PageSpeed InsightsでLCP対象要素を見る
• 避けること: アイキャッチを無条件にlazyへする、画像サイズ指定なしでCLSを悪化させる
• 公開URL、管理画面、メールやフォームなど読者接点の確認結果
• 次回見直す日付または条件

このメモがあると、別の人に相談する時も状況を説明しやすくなります。WordPressやサーバー設定のトラブルは、正しい答えそのものより「何をした直後に変わったか」が復旧の手がかりになります。