WordPressの画像遅延読み込みを1分で設定！loading="lazy"をフックで自動化する

こんばんは！WordPressサイトの開発やカスタマイズ、技術サポートを行っている私たちが、「WordPress 3分間フッキング」シリーズをお届けします。

「3分間クッキング」をもじった「3分間フッキング」、今回は記事本文内の画像に loading="lazy" を自動付与して、ページの表示速度を改善する方法をご紹介します！

このシリーズでは、WordPressの真髄とも言える「フック」を使った実用的なテクニックを、functions.phpに数行書くだけで実現できる形でお伝えしていきます。

lazyload（遅延読み込み）とは？

Webページには、複数の画像が含まれていることがほとんどです。通常、ページを読み込む際にはすべての画像を一度にダウンロードしようとします。しかし、ページの下の方にある画像は、ユーザーがスクロールしてくるまで画面に表示されません。

lazyload（遅延読み込み）とは、画面内に表示されるタイミングまで画像の読み込みを遅らせる技術です。

ページを開いた瞬間に必要な画像だけを読み込み、スクロールして画像が表示エリアに近づいたタイミングで初めてダウンロードが始まります。

具体的なメリットには以下のようなものがあります：

初期表示の高速化：最初に必要な画像だけ読み込むので、ページの表示が速くなる
通信量の削減：最後までスクロールされなかった画像は読み込まれないため、結果として通信量やサーバーへのリクエスト削減につながる場合がある
Core Web Vitalsへの好影響：GoogleのCore Web Vitals（LCP・INP・CLS）の改善にもつながる

HTMLでは、<img> タグに loading="lazy" という属性を追加するだけで、ブラウザネイティブのlazyloadが有効になります。JavaScriptのライブラリなどを使わなくても、モダンブラウザであれば標準で対応しています。

WordPress 5.5以降の標準対応と「それでもつかない画像」

WordPress 5.5（2020年8月リリース）以降、WordPressコアが出力する多くの画像に対して loading="lazy" が自動付与される仕組みが導入されました。the_content や wp_get_attachment_image()、get_avatar() など、コアが関与する出力が広く対象となっており、ブロックエディタで挿入した画像もこの仕組みの対象となっています。通常の運用であれば、新しく書いた記事の画像は対応済みと考えてよいでしょう。

ただし、以下のケースでは loading="lazy" が付与されない場合があります。

Classic Editor（旧エディタ）で作成・編集した記事の画像
WordPress 5.5以前に書かれた過去記事の画像
手書きHTMLで直接 <img> タグを記述した画像
外部からCSVやXMLでインポートした記事の画像
テーマやプラグインが独自に出力している画像

長く運営しているサイトほど、このような「lazyloadが効いていない画像」が大量に残っている可能性があります。functions.phpにフック処理を書けば、過去記事も含めてまとめて対応できます。

コード解説

基本コード

記事本文内のすべての <img> タグに、loading="lazy" を自動付与するシンプルな実装です。

/**
 * 記事本文の画像に loading="lazy" を自動付与する
 */
add_filter('the_content', 'wp3min_add_lazyload');

function wp3min_add_lazyload($content) {
    // loading属性がまだない img タグに loading="lazy" を追加
    $content = preg_replace(
        '/<img(?![^>]*loading=)([^>]*?)>/i',
        '<img loading="lazy"$1>',
        $content
    );

    return $content;
}

/**

* 記事本文の画像に loading="lazy" を自動付与する

add_filter('the_content', 'wp3min_add_lazyload');

function wp3min_add_lazyload($content) {

// loading属性がまだない img タグに loading="lazy" を追加

$content = preg_replace(

'/<img(?![^>]*loading=)([^>]*?)>/i',

'<img loading="lazy"$1>',

$content

);

return $content;

}

コードのポイント解説

the_contentフィルターフックは、投稿の本文が画面に出力される直前に実行されます。前回の外部リンク自動設定でも使ったフックです。データベースに保存された記事の内容は変えず、表示時にだけ属性を付与します。

正規表現のポイントは (?![^>]*loading=) という部分です。これは「すでに loading 属性が設定されている <img> タグには処理を行わない」という否定先読みの記述です。Gutenbergが自動付与した画像や、手動で設定済みの画像に対して二重に属性が付くことを防いでいます。

※このコードは一般的な投稿HTMLを想定しています。複雑なHTML構造を扱う場合は、DOMDocument や WordPress 6.2以降で利用できる WP_HTML_Tag_Processor を使用する方法も検討できます。

なお、WordPressには wp_lazy_loading_enabled というフィルターも用意されています。これはWordPressコアが付与するlazyloadの有効・無効を制御するためのフックです。ただし今回のように「既存HTMLに対して強制的にlazyloadを付与する」用途では、the_content フィルターを使った処理がシンプルで実用的です。

注意点：ファーストビューの画像には逆効果になる場合がある

lazyloadはページ表示速度の改善に有効ですが、すべての画像に無条件に適用すればよいわけではありません。

ページを開いた瞬間に表示されるファーストビューの画像（ヒーロー画像・アイキャッチなど）に loading="lazy" が設定されていると、ブラウザが意図的に読み込みを遅らせてしまいます。これは Googleの Core Web Vitals の評価指標である LCP（最大コンテンツ描画）を悪化させる原因になります。

WordPressコアでは、この問題を避けるために「ページ内の最初の画像には loading="lazy" を付与しない」という調整が行われています。loading="eager" を明示的に付けるのではなく、属性自体を省略することで即時読み込みを維持しています。

今回の基本コードは記事本文（the_content）のみを対象としており、ヒーロー画像などテーマが出力する画像には影響しません。ただし、記事の冒頭にアイキャッチを大きく表示する構成のテーマでは注意が必要です。

応用コード：特定クラスの画像を除外する

「この画像だけはlazyloadを外したい」というケースに対応するため、特定のクラスが付いた画像を除外するバージョンです。

/**
 * 記事本文の画像に loading="lazy" を自動付与する
 * （特定クラスの画像を除外するバージョン）
 */
add_filter('the_content', 'wp3min_add_lazyload_with_exclude');

function wp3min_add_lazyload_with_exclude($content) {
    // 除外したいクラス名を配列で指定
    $exclude_classes = [
        'no-lazy',
        'above-the-fold',
    ];

    $content = preg_replace_callback(
        '/<img([^>]*?)>/i',
        function($matches) use ($exclude_classes) {
            $attrs = $matches[1];

            // すでに loading 属性がある場合はスキップ
            if (stripos($attrs, 'loading=') !== false) {
                return $matches[0];
            }

            // 除外クラスが含まれている場合はスキップ
            foreach ($exclude_classes as $class) {
                if (stripos($attrs, $class) !== false) {
                    return $matches[0];
                }
            }

            return '<img loading="lazy"' . $attrs . '>';
        },
        $content
    );

    return $content;
}

/**

* 記事本文の画像に loading="lazy" を自動付与する

* （特定クラスの画像を除外するバージョン）

add_filter('the_content', 'wp3min_add_lazyload_with_exclude');

function wp3min_add_lazyload_with_exclude($content) {

// 除外したいクラス名を配列で指定

$exclude_classes = [

'no-lazy',

'above-the-fold',

];

$content = preg_replace_callback(

'/<img([^>]*?)>/i',

function($matches) use ($exclude_classes) {

$attrs = $matches[1];

// すでに loading 属性がある場合はスキップ

if (stripos($attrs, 'loading=') !== false) {

return $matches[0];

}

// 除外クラスが含まれている場合はスキップ

foreach ($exclude_classes as $class) {

if (stripos($attrs, $class) !== false) {

return $matches[0];

}

return '<img loading="lazy"' . $attrs . '>';

$content

);

return $content;

}

除外したい画像には、WordPressの画像挿入時やHTMLで直接 class="no-lazy" などを付与しておくだけで、lazyloadの対象から外すことができます。

実装手順

WordPressの管理画面から「外観」→「テーマエディター」へ移動します
右側のファイル一覧から「functions.php」を選択します
ファイルの適切な位置に、上記いずれかのコードを追加します
「ファイルを更新」ボタンをクリックして保存します
記事ページを開き、画像を右クリック →「検証」でHTMLを確認し、loading="lazy" が付与されていれば完了です（Mac: Cmd + Option + I、Windows: F12 または Ctrl + Shift + I）

Google PageSpeed Insights でページを計測すると、lazyload適用前後のスコア変化を確認できます。画像が多いページほど効果が出やすいです。

以下の記事も、合わせてご覧ください。

【実録】PageSpeed Insights 8秒改善。WordPressを爆速96点へ変えた「後出し」最適化

実装時の注意点

以下の点に注意して実装してください。

the_contentフック以外には適用されません：ウィジェットやテーマが独自に出力する画像は対象外です。必要であれば対象フックを追加してください
ファーストビューの画像には注意：記事冒頭に大きく表示される画像がある場合は、除外クラスを使って loading="lazy" が付かないよう対応してください
パフォーマンスへの影響はほぼゼロ：正規表現はコンテンツ出力時に瞬時に処理されます。キャッシュプラグインを使っている環境では実質的な負荷はありません
ブラウザの対応状況：loading="lazy" はモダンブラウザで広くサポートされています。非対応の古いブラウザでは無視されるだけで、表示が壊れることはありません

まとめ

いかがでしたか？the_content フィルターフックを使うだけで、過去記事も含めたすべての本文画像にlazyloadを適用できることがお分かりいただけたと思います。

画像が多いサイトほど効果は大きく、Core Web Vitalsのスコア改善にも直結します。まだ対応していない方は、ぜひ今日中に試してみてください。

今回のポイントをおさらいしましょう：

WordPress 5.5以降のブロックエディタでは自動対応済みだが、過去記事や手書きHTMLには効いていない
the_content フィルターフックで、記事本文の画像を出力時に自動処理できる
すでに loading 属性が設定されている画像には二重付与されない
ファーストビューの画像にlazyloadをかけるとLCPが悪化するため、除外クラスで対応する

埼玉県川越市を拠点とする私たちは、このようなWordPressの機能拡張やパフォーマンス最適化のテクニカルサポートも提供しています。サイトの表示速度改善やWordPressのカスタマイズでお悩みの場合は、ぜひご相談ください。

次回の「WordPress 3分間フッキング」もお楽しみに！別のフックを使った便利技をご紹介します。

よくある質問

Q: すでにlazyload対応プラグインを使っています。このコードと併用しても大丈夫ですか？

A: プラグインがすでに loading="lazy" を付与している場合、コード内の否定先読み（(?![^>]*loading=)）によって二重付与は防がれます。ただし、JavaScriptベースのlazyloadプラグインを使っている場合は処理が競合することがあるため、動作確認をおすすめします。プラグインを使っている場合は、このフック処理は不要なケースがほとんどです。