• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

株式会社ハイファイブクリエイト

東京都を拠点にWebサイト制作やシステム構築、WordPress保守管理やウェブコンサルティングを提供。

  • SERVICE
  • ABOUT
  • WORKS
  • BLOG
  • NEWS
  • CONTACT
ホーム / ブログ / TIPS / WordPressで特定の画像やアイキャッチ画像をlink rel=”preload”に設定する

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

池田祐太郎 | 2024年7月9日 公開 コメントを書く

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

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

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

目次

  • 1 LCP改善にlink rel=”preload”が公式に推奨されている
  • 2 WordPressの場合はアイキャッチ画像を事前読み込みに設定する必要がある
  • 3 各デバイスサイズに合わせたレスポンシブ画像をプリロードする
  • 4 link rel=”preload” を追加するコード
    • 4.1 トップページは画像を直接出力
    • 4.2 投稿ページはアイキャッチ画像をレスポンシブ形式で出力
    • 4.3 fetchpriority=”high” で画像の取得の優先度を高くする
  • 5 正しくlink rel=”preload” が出力されていることを確認
    • 5.1 トップページ
    • 5.2 投稿ページ
  • 6 パフォーマンスがどの程度変わるか検証
  • 7 WordPressプラグインを使う方法も一応有り
  • 8 まとめ

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

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

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

リソース検出時に画像を事前読み込みすることがLCP改善に重要と説明されている。

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

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

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

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

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

WordPressで設定したアイキャッチ画像

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

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

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

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

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

アイキャッチ画像に設定された画像がLCP要素として認識されているのがわかる

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

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

WordPressのメディアから画像をアップロードすると画像は一つ用に見えるが……
実際はこのように複数のサイズが生成されているのがわかる。この場合、オリジナル画像以外に横幅最小サイズが150pxから大きいサイズが1536pxまで5サイズ生成されている。

例えば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'
    ],
];
トップページに設定されている画像をdeveloper toolsで確認

ここに出力されている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”を設定するのがいい

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

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

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

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

トップページ

トップページは設定した画像がプリロードされている

投稿ページ

投稿ページはアイキャッチ画像がプリロードされている

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

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

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

プリロードをしていないのに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に実装するための参考として本記事のコードが参考になれば幸いです。

メールコンサルティング
WordPress保守管理サービス

カテゴリTIPS 関連タグ:Webサイト高速化

池田祐太郎

WordPress の構築・保守を10年以上にわたって手掛けており、主に小〜中規模のコーポレートサイト・ECサイト・ブランドサイト等の企画・開発・保守・コンサルティングなどを行ってきました。2012年にハイファイブクリエイトを創業し、現在は WordPress の保守やコンサルティング、ディレクションや開発業務などを担当しています。 プロフィール詳細

Reader Interactions

コメントを残す コメントをキャンセル

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

For security, use of Google's reCAPTCHA service is required which is subject to the Google Privacy Policy and Terms of Use.

この記事と関連する記事

遅延読み込み開始させる画像を変更させるWordPressカスタマイズ
2024年7月16日
タグ: Webサイト高速化
カテゴリー: TIPS
WordPressのプラグインがどのくらい表示速度を重くさせるのか22個のプラグインで検証
2024年7月3日
タグ: Webサイト高速化
カテゴリー: WordPress
WordPressのパフォーマンスをWP Rocketプラグインを使って20点スコアアップした話
2024年6月28日
タグ: Webサイト高速化, WPRocket
カテゴリー: WordPress

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • 2024-2025年末年始の営業のご案内
  • WordPressのプラグイン自動更新のロールバック機能が正しく動くのか確認してみた
  • 遅延読み込み開始させる画像を変更させるWordPressカスタマイズ
  • WordPressで特定の画像やアイキャッチ画像をlink rel=”preload”に設定する
  • WordPressのプラグインがどのくらい表示速度を重くさせるのか22個のプラグインで検証

カテゴリー

  • CSS初心者
  • HTML初心者
  • TIPS
  • WooCommerce
  • WordPress
  • エステサロン
  • お知らせ
  • キュレーション
  • サイトマップ
  • システム会社
  • デベロッパーツール入門
  • ブログ
  • ホームページ制作
  • ホームページ制作無料講座
  • メール
  • モバイル
  • 仕事のこと
  • 制作実績
  • 整体院
  • 美容院
  • 雑感

タグ

ai Android ChatGPT CMS css DALL-E elementor gmail google workspace Gutenberg HTML iPhone jQuery Mac Photoshop php SEO SNS ssh SSL Webサイト高速化 Windows WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 WPRocket アクセス解析 クラウドソーシング サイト引っ越し サブスクリプション サーバー ショートカットキー スマホサイト スマートフォン セキュリティ ツール ブログ プラグイン マーケティング リニューアル レスポンシブWebデザイン 保守管理 最適化 集客するサイト構築

アーカイブ

CONTACT

お問い合わせはこちら

Footer

  • PRIVACY POLICY
  • 情報セキュリティ基本方針
  • 特定商取引法に基づく表示
  • 転載/引用

© 2025 high five create All rights reserved.