2026年5月24日

WordPressの画像遅延読み込みをカスタマイズする方法｜特定画像の除外・無効化・フェードイン

メディア・画像

WordPressは本体の機能として、記事内の画像に loading="lazy" を自動で付けています。プラグインを入れなくても遅延読み込みは動いているので、カスタマイズの中心は「どの画像を遅延させないか」「どこで無効にするか」の調整です。この記事では、コアの遅延読み込みの仕組みを確認したうえで、特定画像の除外、先頭画像の扱いの変更、全体の無効化、読み込み時のフェードイン演出までを、フィルターフックを使って設定する方法を解説します。

WordPress本体の遅延読み込みの仕組み

WordPress 5.5 で画像への loading="lazy" の自動付与が入り、5.7 で iframe にも広がりました。対象は、投稿本文・抜粋・ウィジェットのテキストなどを出力するときに通るフィルター処理と、wp_get_attachment_image() を経由して出力される画像（アイキャッチ画像など）です。テーマが独自に <img> タグを直書きしている箇所には付きません。

ここで重要なのが「ファーストビューの画像は遅延させない」という調整です。画面を開いた直後に見える画像まで遅延させると、表示が遅れてかえって体感速度や LCP（Largest Contentful Paint）の数値が悪くなります。そのため WordPress は、ページの上のほうに出る画像の一部には loading="lazy" を付けず、さらに 6.3 以降は LCP になりそうな画像に fetchpriority="high" を付けるようになりました。

つまり、現在の WordPress（2026年10月現在の 6.x 系）では、何もしなくても次のような状態になっています。

本文の上部にある最初の数枚は遅延させない
それ以降の画像と iframe には loading="lazy" が付く
width と height が無い画像には、分かる範囲で自動補完される（レイアウトのずれ対策）

カスタマイズを始める前に、まず自分のサイトでこの状態になっているかを確認します。

現状の確認方法

ブラウザで記事を開き、ページのソースを表示して loading="lazy" を検索します。ソース表示はサーバーから届いたHTMLそのものなので、WordPress が付けた属性を確認するのに向いています。開発者ツールの「要素」パネルは JavaScript で書き換えた後の状態を表示するため、遅延読み込み系のプラグインが動いていると結果が変わる点に注意してください。

あわせて、キャッシュ系・高速化系のプラグイン（LiteSpeed Cache、WP Rocket など）が独自の遅延読み込みを有効にしていないかも見ておきます。プラグイン側の機能は data-src などに画像URLを移して JavaScript で読み込む方式が多く、コアの loading="lazy" と二重にかかると、除外設定が効かない・画像が出ないといった混乱の原因になります。どちらか一方に寄せるのが基本です。

コードを追加する場所

以下のコードは、子テーマの functions.php か、Code Snippets のようなコード管理プラグインに追加します。親テーマの functions.php に書くとテーマ更新で消えます。管理画面のテーマファイルエディターで直接編集すると、記述ミスでサイトが表示されなくなったときに管理画面からも戻せないことがあるため、FTP やファイルマネージャーで元に戻せる状態にしてから作業し、編集前のファイルはバックアップしておいてください。

特定の画像だけ遅延読み込みから外す

記事ごとにメインビジュアルの位置が違う場合など、「この画像だけは遅延させたくない」という場面があります。方法は2つあります。

方法1: 添付ファイルIDで指定する

決まった画像だけを外したいなら、添付ファイルIDで指定するのが分かりやすい方法です。

/**
 * 指定した添付ファイルIDの画像から、本文内の loading="lazy" を外す
 */
add_filter( 'wp_content_img_tag', function ( $image, $context, $attachment_id ) {
	// メディアライブラリで確認した添付ファイルIDを並べる
	$eager_ids = array( 123, 456 );
	if ( in_array( (int) $attachment_id, $eager_ids, true ) ) {
		$image = str_replace( ' loading="lazy"', '', $image );
	}
	return $image;
}, 10, 3 );

wp_content_img_tag は、本文中の <img> タグに WordPress が属性を付け終えた後で呼ばれるフィルター（6.0 で追加）です。この時点で loading="lazy" が付いているので、置換で取り除けます。添付ファイルIDは、メディアライブラリで画像を開いたときのURL（item=123 の部分）で確認できます。

方法2: 画像ブロックの追加CSSクラスで指定する

記事を書く人がその場で指定できるようにしたいなら、画像ブロックのサイドバーにある「高度な設定」の「追加 CSS クラス」に no-lazy と入れたものを対象にします。

つまずきやすいのは、このクラスが <img> ではなく外側の <figure> に付く点です。wp_content_img_tag には <img> タグの文字列しか渡されないため、そこでクラスを探しても見つかりません。そこで、画像ブロックを描画する段階で <img> に loading="eager" を書き込みます。WordPress はすでに loading 属性がある画像には自動で属性を付けないため、結果として遅延読み込みから外れます。

/**
 * 追加CSSクラスに no-lazy を指定した画像ブロックを即時読み込みにする
 */
add_filter( 'render_block_core/image', function ( $block_content, $block ) {
	$class = isset( $block['attrs']['className'] ) ? $block['attrs']['className'] : '';
	if ( ! preg_match( '/\bno-lazy\b/', $class ) ) {
		return $block_content;
	}
	$tags = new WP_HTML_Tag_Processor( $block_content );
	if ( $tags->next_tag( 'img' ) ) {
		$tags->set_attribute( 'loading', 'eager' );
	}
	return $tags->get_updated_html();
}, 10, 2 );

HTMLの書き換えに正規表現ではなく WP_HTML_Tag_Processor（6.2 で追加）を使っているのは、属性の順番や引用符の違いで置換が失敗するのを避けるためです。

アイキャッチ画像を遅延させない

記事上部にアイキャッチ画像を大きく出すテーマでは、その画像が LCP 要素になることが多いです。the_post_thumbnail() や wp_get_attachment_image() は属性を配列で渡せるので、テーマ側の呼び出しで指定するのがいちばん素直です。

// テーマ（子テーマ）のテンプレート内
the_post_thumbnail( 'large', array(
	'loading'       => false,   // loading 属性を出力しない
	'fetchpriority' => 'high',  // 優先して取得させる
) );

'loading' => false を渡すと属性自体が出力されません。テンプレートを書き換えられない場合は、wp_get_attachment_image_attributes フィルターで、個別記事のアイキャッチ画像のときだけ属性を外す方法もあります。ただしこのフィルターは一覧ページのサムネイルにもかかるため、is_singular() などで条件を絞らないと、一覧の全画像が即時読み込みになって逆効果です。

先頭から何枚を遅延させないかを変える

WordPress が「上部にあるので遅延させない」と判断する枚数は、wp_omit_loading_attr_threshold フィルターで変更できます。

// 本文の先頭から1枚だけを遅延読み込みの対象外にする
add_filter( 'wp_omit_loading_attr_threshold', function () {
	return 1;
} );

既定値は WordPress のバージョンによって異なり、6.3 で引き上げられています。記事の冒頭に小さなアイコン画像が並ぶ構成なら枚数を増やし、冒頭に大きな画像が1枚だけの構成なら減らす、というように、実際のレイアウトを見て決めます。

遅延読み込みを無効にする

高速化プラグインの遅延読み込みに一本化したい場合や、特殊なスライダーと相性が悪い場合は、コアの遅延読み込みを止められます。

// 画像の遅延読み込みだけを止め、iframe は残す
add_filter( 'wp_lazy_loading_enabled', function ( $default, $tag_name, $context ) {
	if ( 'img' === $tag_name ) {
		return false;
	}
	return $default;
}, 10, 3 );

すべて止めるなら add_filter( 'wp_lazy_loading_enabled', '__return_false' ); の1行で済みます。ただ、無効にすると画像の多いページでは初回の通信量が増えるため、止める理由がはっきりしているときだけにとどめるのが無難です。

読み込み時にフェードインさせる

ネイティブの遅延読み込みには見た目の演出がありません。画像がふわっと表示されるようにしたい場合は、読み込み完了の load イベントを使います。JavaScript が動かない環境で画像が透明のまま残らないよう、「スクリプトが読み込み前の画像にクラスを付け、読み込み後に外す」形にします。

子テーマに js/lazy-fade.js を作ります。

document.addEventListener( 'DOMContentLoaded', function () {
	document.querySelectorAll( 'img[loading="lazy"]' ).forEach( function ( img ) {
		if ( img.complete ) {
			return; // すでに読み込み済みなら何もしない
		}
		img.classList.add( 'is-fading' );
		var done = function () {
			img.classList.remove( 'is-fading' );
		};
		img.addEventListener( 'load', done, { once: true } );
		img.addEventListener( 'error', done, { once: true } );
	} );
} );

functions.php で読み込み、CSS も追加します。

add_action( 'wp_enqueue_scripts', function () {
	wp_enqueue_script(
		'lazy-fade',
		get_stylesheet_directory_uri() . '/js/lazy-fade.js',
		array(),
		'1.0.0',
		array( 'in_footer' => true, 'strategy' => 'defer' )
	);

	wp_register_style( 'lazy-fade', false );
	wp_enqueue_style( 'lazy-fade' );
	wp_add_inline_style( 'lazy-fade', 'img[loading="lazy"]{transition:opacity .4s ease;}img.is-fading{opacity:0;}' );
} );

error 時にもクラスを外しているのは、画像の読み込みに失敗したときに枠ごと見えなくなるのを防ぐためです。フェードは見た目の演出であり、速度の改善にはなりません。演出の時間を長くしすぎると、利用者には「表示が遅いサイト」に見えるので、0.3〜0.5秒程度に抑えます。

変更後の確認

設定を変えたら、次の順で確認します。

ページキャッシュとブラウザのキャッシュを消してから、記事をソース表示し、意図した画像から loading="lazy" が消えているか（または付いているか）を見る
開発者ツールのネットワークパネルで「画像」に絞り、ページを開いた直後に読み込まれる画像と、スクロールしてから読み込まれる画像が想定どおりかを見る
PageSpeed Insights で記事URLを計測し、LCP 画像が遅延読み込みされている旨の指摘が出ていないかを確認する

スマートフォンとパソコンではファーストビューに入る画像が違うので、計測は両方で行ってください。

まとめ

WordPress本体が loading="lazy" を自動で付けるため、多くの場合は遅延読み込み用のプラグインは不要。高速化プラグインの同種機能と二重にかけない
特定の画像を外すには wp_content_img_tag、先頭画像の枚数は wp_omit_loading_attr_threshold、全体の無効化は wp_lazy_loading_enabled を使う
LCP になるアイキャッチ画像は 'loading' => false と fetchpriority で優先して読み込ませる
フェードインは JavaScript が動かないときにも画像が見える形で実装し、ソース表示・ネットワークパネル・PageSpeed Insights で効果を確認する