WordPressで特定の画像やアイキャッチ画像をlink rel=”preload”に設定する

パフォーマンス改善のため、画像を事前読み込みしたいケースがあるとします。その場合は link rel="preload" を利用することにより、事前読み込みしたい画像を指定することができます。

ただし、WordPressの場合はトップページでは固定の画像を設定したり、各記事の投稿ページではアイキャッチ画像を設定したりと工夫が必要です。

今回はWordPressで実現するためのコードをご紹介します。

LCP改善にlink rel=”preload”が公式に推奨されている

コアウェブバイタルの1要素である Largest Contentful Paint（LCP）は、ユーザーが最初に見るコンテンツが完全に表示されるまでの時間を測定する指標です。

LCPを最適化する方法はたくさんありますが、方法の一つに画像を事前読み込みすることが公式でも紹介されています。

LCP リソースの読み込みをできるだけ早く開始するには、ブラウザのプリロード スキャナが最初の HTML ドキュメント レスポンスでリソースを検出できることが重要です。

Largest Contentful Paint を最適化する  |  Articles  |  web.dev

特に、画像がHTML側ではなく、CSS側から読み込まれている場合は事前読み込みすることでLCPが改善される可能性があります。

WordPressの場合はアイキャッチ画像を事前読み込みに設定する必要がある

一般的なWordPressでの投稿記事の場合、アイキャッチ画像として設定した画像がLCPとなることが多いため、このアイキャッチ画像を事前に読み込むことでLCPの短縮に繋がります。

一方で例えばトップページではページ上部に表示されるヒーロー画像や、ビジュアル目的で設置される大きな背景画像がLCPとして設定されることが多いです。

さらにもし固定ページ毎にも設定したいという場合は、固定ページ毎に異なるLCP画像を事前読み込みに設定したいと思うかもしれません。

このように、ページによってLCPは異なるため、例えば「トップページではヒーロー画像、投稿記事ではアイキャッチ画像」というように、重要な画像を事前読み込み設定することで最適化に繋がります。

WordPressの構成によって変わってきますが、固定ページよりも記事投稿が多くなるようなWordPressであれば、ランディング先はトップページと投稿ページが全体の半分以上になるかと思うので、この2つをカバーすることがLCP改善に大きく影響すると考えます。

ちなみに、どの要素がLCPとみなされているか確認するには、ChromeブラウザのDeveloper ToolsよりLighthouseを利用することでわかります。

各デバイスサイズに合わせたレスポンシブ画像をプリロードする

WordPressではメディアに画像をアップロードすると、元々の画像サイズに加えて、自動的に複数のサイズが生成されます。

例えばlink rel=”preload”にオリジナル画像をプリロードしていたとしても、モバイルデバイスでアクセスした際にはより小さいサイズのそのモバイルデバイスに合った画像が画面上に表示されるため、プリロード画像が一致していないと読み込みリソースが無駄になってしまいます。以下の通りGoogleも発表しています。

レスポンシブ画像をプリロードすると、ブラウザが img タグをレンダリングする前に srcset から正しい画像を識別できるようになるため、画像の読み込み速度が大幅に向上します。（中略）
幅 300 ピクセルの画面でウェブを閲覧していて、そのページから幅 1, 500 ピクセルの画像がリクエストされたとします。その画面では解像度を上げられないため、多くのモバイルデータが無駄になってしまいます。ブラウザは、画面サイズより少し幅大きい画像（325 ピクセルなど）を取得するのが理想的です。これにより、データを浪費することなく高解像度の画像が保証され、画像の読み込みが速くなります。

レスポンシブ画像をプリロードする  |  Articles  |  web.dev

よって、設定したアイキャッチ画像に対して生成された複数のサイズを取得し、デバイスサイズを識別して最適サイズのプリロード画像が選択される、というアプローチが望ましいと考えました。

link rel=”preload” を追加するコード

以下のコードをテーマ内のfunctions.phpに記述します。コード内の画像ファイル「building-exterior-new.webp」はわかりやすいよう入れてあるため、実際に利用する際は書き換えてください。

※カスタマイズを行っていない場合は子テーマを作ってから実施するのがおすすめです。
[WordPress]カスタマイズを始める前に覚えておきたい子テーマ機能と作成方法

function add_preload_responsive_images() {
    // 管理画面では実行しない
    if (is_admin()) {
        return;
    }

    // トップページに限定
    if (is_front_page()) {
        // プリロードしたい画像のURL、srcset、およびsizesを指定
        $preload_images = [
            [
                'src' => 'http://plugin-dev.local/wp-content/uploads/2024/07/building-exterior-new.webp',
                'srcset' => 'http://plugin-dev.local/wp-content/uploads/2024/07/building-exterior-new-300x141.webp 300w, http://plugin-dev.local/wp-content/uploads/2024/07/building-exterior-new-768x360.webp 768w, http://plugin-dev.local/wp-content/uploads/2024/07/building-exterior-new-1024x480.webp 1024w, http://plugin-dev.local/wp-content/uploads/2024/07/building-exterior-new.webp 1500w',
                'sizes' => '(max-width: 1500px) 100vw, 1500px'
            ],
        ];
        foreach ($preload_images as $image) {
            echo '<link rel="preload" as="image" href="' . esc_url($image['src']) . '" imagesrcset="' . esc_attr($image['srcset']) . '" imagesizes="' . esc_attr($image['sizes']) . '" fetchpriority="high">' . "\n";
        }
    }

    // 投稿ページの場合
    if (is_single()) {
        // アイキャッチ画像が設定されているか確認
        if (has_post_thumbnail()) {
            $post_thumbnail_id = get_post_thumbnail_id();
            $post_thumbnail_src = wp_get_attachment_image_src($post_thumbnail_id, 'full')[0];
            $post_thumbnail_srcset = wp_get_attachment_image_srcset($post_thumbnail_id, 'full');
            $post_thumbnail_sizes = wp_get_attachment_image_sizes($post_thumbnail_id, 'full');

            echo '<link rel="preload" as="image" href="' . esc_url($post_thumbnail_src) . '" imagesrcset="' . esc_attr($post_thumbnail_srcset) . '" imagesizes="' . esc_attr($post_thumbnail_sizes) . '" fetchpriority="high">' . "\n";
        }
    }
}
add_action('wp_head', 'add_preload_responsive_images')

トップページは画像を直接出力

上から説明していきます。まずはis_front_page()から。ここはトップページの処理です。

トップページはヒーロー画像や大きな背景画像がLCPに識別されることを考え、直接画像を指定することとしました。頻繁に変更される場合は都度更新が必要でちょっと手間だと思うので、そういう場合はこの部分は削除しても良いのかと思います。環境に合わせて使ってください。

以下のように、直接URLを指定します。srcには元画像の画像を、srcsetには画像と対応する横幅を設定します。

$preload_images = [
    [
        'src' => 'http://plugin-dev.local/wp-content/uploads/2024/07/building-exterior-new.webp',
        'srcset' => 'http://plugin-dev.local/wp-content/uploads/2024/07/building-exterior-new-300x141.webp 300w, http://plugin-dev.local/wp-content/uploads/2024/07/building-exterior-new-768x360.webp 768w, http://plugin-dev.local/wp-content/uploads/2024/07/building-exterior-new-1024x480.webp 1024w, http://plugin-dev.local/wp-content/uploads/2024/07/building-exterior-new.webp 1500w',
        'sizes' => '(max-width: 1500px) 100vw, 1500px'
    ],
];

ここに出力されているimgタグのsrcsetをそのままもってきて問題ないはずです。なんとなく小さいサイズからに並び替えてみました。

投稿ページはアイキャッチ画像をレスポンシブ形式で出力

投稿ページはis_single()内の処理です。

link rel=”preload” に必要な各画像の情報は全てWordPressの関数を利用して取得できました。アイキャッチ画像が設定されていない場合は当然出力されません。

if (has_post_thumbnail()) {
    $post_thumbnail_id = get_post_thumbnail_id();
    $post_thumbnail_src = wp_get_attachment_image_src($post_thumbnail_id, 'full')[0];
    $post_thumbnail_srcset = wp_get_attachment_image_srcset($post_thumbnail_id, 'full');
    $post_thumbnail_sizes = wp_get_attachment_image_sizes($post_thumbnail_id, 'full');

    echo '<link rel="preload" as="image" href="' . esc_url($post_thumbnail_src) . '" imagesrcset="' . esc_attr($post_thumbnail_srcset) . '" imagesizes="' . esc_attr($post_thumbnail_sizes) . '" fetchpriority="high">' . "\n";
}

fetchpriority=”high” で画像の取得の優先度を高くする

オプション的な要素として、fetchpriority="high" を設定しています。ドキュメントを見ていると、LCPには設定するのがいいと記載があったためです。

ページの LCP 要素である可能性が高い場合は、 要素に fetchpriority=”high” を設定することをおすすめします。ただし、1 枚または 2 枚以上の画像に高い優先度を設定すると、LCP を減らすうえで優先度の設定が役に立たなくなります。

Largest Contentful Paint を最適化する  |  Articles  |  web.dev

トップページ、各投稿ページどちらも有効としました。

正しくlink rel=”preload” が出力されていることを確認

トップページ

投稿ページ

どちらも正しく動いていることを確認しました。

パフォーマンスがどの程度変わるか検証

開発環境のLighthouseのため、参考程度となりますが、link rel=”preload”がある場合とない場合、3回検証したところ、結果はプリロードをしない方で99点をマークしたかと思えば、プリロードしたほうでは80点とあまり意味のない結果でした。

LCPもプリロードをしていない方は1.8秒に対し、プリロードした方は4.2秒と信憑性のない結果になりました。数回繰り返してもバラバラの結果でしたので、今回は平均計測は諦めました。

WordPressプラグインを使う方法も一応有り

現在、1年以上更新されていないようですが、一応WordPressプラグインでもプリロード画像を設定できるプラグインがありました。

Preload Images – WordPress plugin | WordPress.org

未使用ですが、各ページに設定できるようです。レスポンシブ画像の出力ができるかはわかりません。

他にないか探したところ、一つ更新されているプラグインがありました。

Preload LCP Image – WordPress プラグイン | WordPress.org 日本語

こちらはちょっと使ってみたところ、ちゃんとlink rel=”preload”が出力されていました。アクティブインストール数は2000件と多くはないですが、プラグインでも実装可能なのでカスタマイズ以外でも実装したい場合は有りですね。トップページや投稿ページ毎に管理画面から設定できるのも楽です。

まとめ

以上、画像をプリロードしてLCPの最適化の方法の一つのご紹介でした。

LCP改善項目はたくさんありますが、一つ一つ潰していくことでパフォーマンスは改善します。

プリロードをWordPressに実装するための参考として本記事のコードが参考になれば幸いです。