lazy load（画像の遅延読み込み）でファーストビューを速くするコツは、「画面の下にある画像だけを遅らせ、最初に見える画像は遅らせない」ことです。メインビジュアルやアイキャッチまで遅延させると、かえって LCP（最大コンテンツの描画）が遅くなります。この記事では、WordPress 標準の遅延読み込みの仕組みを押さえたうえで、先頭画像を除外する設定、プラグインと二重にかかっている場合の整理、効果の確かめ方を説明します。
WordPress標準の遅延読み込みの仕組み
WordPress は、投稿本文や wp_get_attachment_image() で出力する画像に、自動で loading="lazy" 属性を付けます。ブラウザはこの属性を見て、画面から離れた画像の読み込みを後回しにします。JavaScript を使わないブラウザ標準の仕組みなので、プラグインがなくても遅延読み込みはすでに動いています。
近年のバージョンでは、ページの先頭付近にある画像には loading="lazy" を付けず、LCP の候補になりそうな画像には fetchpriority="high" を付けて優先的に読み込ませる調整も入っています（2026年10月現在）。ただし、WordPress が「先頭」と判断できるのは、標準の関数を通して出力された画像に限られます。テーマが独自の HTML でメインビジュアルを書いている場合や、CSS の背景画像として表示している場合は、この判定の対象外です。
つまり、すべきことは「何もしない」ではなく、「自分のサイトのファーストビューにある画像が、正しく遅延の対象外になっているかを確認する」ことです。
ステップ1：ファーストビューで一番大きい要素を特定する
まず、何がファーストビューの読み込みを決めているのかを調べます。
PageSpeed Insights でページの URL を調べると、診断の中に LCP の要素が表示されます。表示される項目名はツールの更新で変わりますが、「LCP 要素」や「LCP の内訳」といった項目を探してください。ここで画像が指定されていれば、その画像が改善の対象です。
Chrome のデベロッパーツールの「Performance」パネルで計測しても、LCP がどの要素かを確認できます。モバイルとパソコンで LCP の要素が違うことは珍しくないため、両方の幅で確かめてください。
次に、その画像の HTML を確認します。ページのソースを表示するか、デベロッパーツールの「Elements」で画像を選び、loading="lazy" が付いていないかを見ます。
ステップ2：遅延読み込みをかけているのが誰かを確かめる
画像の HTML を見ると、遅延読み込みの出どころがわかります。
loading="lazy"属性だけが付いている：WordPress 標準、またはテーマ・プラグインが標準属性を付けているsrcが空や小さな仮画像で、本来の画像がdata-srcなどに入っている、lazyloadのようなクラスが付いている：プラグインやテーマの JavaScript による遅延読み込み
JavaScript 方式は、スクリプトが動くまで本来の画像の読み込みが始まりません。ファーストビューの画像にこれがかかっていると、標準の遅延読み込みより遅れやすくなります。キャッシュ系・高速化系のプラグインと、テーマの高速化設定の両方で遅延読み込みが有効になっていることもよくあるため、どちらか一方に寄せて整理します。
ステップ3：先頭の画像を遅延の対象から外す
テーマのテンプレートで出力している場合
メインビジュアルやアイキャッチをテーマのテンプレートで出しているなら、出力時に属性を指定します。子テーマのテンプレートで、次のように書き換えます。
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail(
'large',
array(
'loading' => false, // loading 属性を付けない
'fetchpriority' => 'high', // 優先して読み込む
)
);
}
?>'loading' => false で loading 属性そのものを出さないようにし、fetchpriority で優先度を上げています。fetchpriority="high" は、1ページにつき本当に最初に見せたい画像1枚程度に絞ってください。何枚にも付けると優先の意味がなくなります。
本文の先頭にある画像の場合
記事の冒頭に大きな画像を置くサイトでは、本文中の何枚目までを遅延の対象外にするかを、wp_omit_loading_attr_threshold フィルターで調整できます。子テーマの functions.php に書きます。
<?php
// 先頭から2枚までの画像には loading="lazy" を付けない
add_filter( 'wp_omit_loading_attr_threshold', function () {
return 2;
} );数を増やしすぎると、画面外の画像まで最初に読み込むことになり、遅延読み込みの効果が薄れます。ファーストビューに実際に何枚の画像が入るかを、スマートフォンの画面幅で確認してから決めてください。
プラグインで遅延読み込みをしている場合
LiteSpeed Cache・WP Rocket・Perfmatters など、遅延読み込みの機能を持つプラグインの多くには、対象外にする画像を指定する欄や、「先頭から何枚を除外するか」を指定する設定があります。項目名や場所はプラグインと版によって違うため、設定画面の遅延読み込みの項目を確認し、ステップ1で特定した画像のファイル名やクラス名を除外に追加します。
ステップ4：画面の下の要素はしっかり遅らせる
先頭を除外したら、逆に画面の下にあるものは遅延させて、最初の読み込みを軽くします。
- 埋め込み動画・地図：iframe にも
loading="lazy"が使えます。YouTube の埋め込みが多いページでは、サムネイル画像だけを先に出し、クリックしたときに再生プレーヤーを読み込む方式も効果があります。 - CSS の背景画像：
loading属性は効かないため、ファーストビューの外にある大きな背景画像は、通常のimgに置き換えるか、プラグインの背景画像向け機能を検討します。 - 画像のサイズ指定：遅延読み込みした画像に
widthとheightがないと、表示時にレイアウトがずれ、CLS（レイアウトのずれ）が悪化します。WordPress のメディアから挿入した画像には通常付きますが、手書きの HTML では付け忘れに注意してください。
ステップ5：効果を確かめる
変更後は、キャッシュプラグインや CDN のキャッシュを削除してから、もう一度 PageSpeed Insights で測ります。確認したいのは次の3点です。
- LCP の画像に
loading="lazy"や JavaScript の遅延読み込みがかかっていないこと - LCP の値が変更前より短くなっていること
- CLS が悪化していないこと
PageSpeed Insights の上部に出る実際のユーザーのデータ（フィールドデータ）は、過去28日分の集計なので、変更がすぐには反映されません。数週間たってから、Search Console の「ウェブに関する主な指標」のレポートで傾向を確認します。表示速度の改善はユーザーの体験を良くするための取り組みで、検索順位が上がることを約束するものではない点も覚えておいてください。
まとめ
- WordPress は標準で画像に
loading="lazy"を付けますが、ファーストビューの画像まで遅延させると LCP が遅くなります。 - PageSpeed Insights やデベロッパーツールで LCP の要素を特定し、その画像の遅延がどこから来ているかを HTML で確かめます。
- テンプレートで出す画像は
'loading' => falseとfetchpriorityを指定し、本文の先頭画像はwp_omit_loading_attr_thresholdで調整します。 - プラグインと標準の遅延読み込みが重なっている場合は、どちらかに寄せ、除外設定に先頭画像を加えます。
- 変更はキャッシュを消してから測り直し、フィールドデータは数週間かけて確認します。作業は子テーマで、バックアップを取ってから行ってください。