【WordPress】アイキャッチ画像の読み込みを高速化する方法

WordPressの高速化関連、今回はアイキャッチ画像(LCP画像)読み込みの高速化、

Pagespeed Insightによる「fetchpriority=high を適用する必要があります」への対処法に関連する備忘録になります。

LCPリクエストの検出：

PageSpeed Insightsでサイトをチェックすると以下のような警告文が出ることがあります。

この記事では、これらの警告、特に「fetchpriority=high を適用する必要があります」の解決方法について解説します。

LCPとは？

LCPとはLargest Contentful Paintの略です。

具体的にはページの中で一番大きなテキストや画像がブラウザに表示されるまでの時間で、例えば、記事のタイトルやメイン画像など、ユーザーがまず目にする「メインコンテンツ」が対象です。

当記事の場合はタイトル、アイキャッチ、その下の目次までぐらいがLCPにあたるはずです。

つまり、今回の場合ではLCP画像、つまりアイキャッチ画像の読み込みが遅いですよ～とGoogleから指摘されているわけです。

アイキャッチ画像の読み込み高速化方法(fetchpriority、preload適用)

以下、アイキャッチ画像(LCP画像)の読み込み高速化方法と、具体的なコード例について掲載しています。

アイキャッチ画像へのfetchpriority=highの適用

「fetchpriority = high」は指定した画像の読み込み優先度を高める効果です。

Pagespeed Insight、つまりGoogleは記事が表示されるまでの速度を重視しているので、LCP画像の読み込み優先度を上げることで表示速度を改善できると言っているわけです。

アイキャッチ画像へのpreloadの適用

Pagespeed Insight側では警告文が出ませんが、Preload(先読み込みの指示)も同じような効果を持っています。

どちらも同じような意味の指示ですが、fetchpriorityは比較的新しい仕様のため一部ブラウザでしか対応していない可能性があり、fetchpriorityの指定と併用することで確実にLCP画像の読み込み優先度を高められることになります。

(コピペ可)アイキャッチ画像の読み込み高速化のための具体的なコード

以下のコードを子テーマの「functions.php」にコピペすることで、投稿ページのアイキャッチ画像に「fetchpriority=high」、「preload」を適用できます。

function add_preload_responsive_images() {
    if (is_admin()) {
        return;
    }

// 投稿ページ用：アイキャッチ画像を preload
    if (is_single() && has_post_thumbnail()) {
        $post_thumbnail_id = get_post_thumbnail_id();
        $post_thumbnail_src = wp_get_attachment_image_url($post_thumbnail_id, 'full');
        $post_thumbnail_srcset = wp_get_attachment_image_srcset($post_thumbnail_id, 'full');
        $post_thumbnail_sizes = wp_get_attachment_image_sizes($post_thumbnail_id, 'full');

        if ($post_thumbnail_src && $post_thumbnail_srcset && $post_thumbnail_sizes) {
            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', 1);

if (is_single() && has_post_thumbnail()) {
        $post_thumbnail_id = get_post_thumbnail_id();
        $post_thumbnail_src = wp_get_attachment_image_url($post_thumbnail_id, 'full');
        $post_thumbnail_srcset = wp_get_attachment_image_srcset($post_thumbnail_id, 'full');
        $post_thumbnail_sizes = wp_get_attachment_image_sizes($post_thumbnail_id, 'full');

if ($post_thumbnail_src && $post_thumbnail_srcset && $post_thumbnail_sizes) {
            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";
        }

必要に応じて改変し、トップページや固定ページ等にも適用するように調整してください。

適用し終えたらPagespeed Insightやコンソール等で検証してみてください。

正しく実装されていれば少なくとも「「fetchpriority=high」を適用する必要があります」の警告文は消えているはずで、ある程度LCPが改善されているはずです。

function.phpの場所

wordpress初期設定の場合のfunction.phpの書き換え方法です。

その他部分の改善方法

LCPリクエスト警告文のその他の部分では、「遅延読み込み」(lazyload)等もありますが、これらのテーマについては私の使っているテーマSWELLでは、SWELL設定側で設定できるため深く取り扱いません。

また、SWELLの場合はLCP画像は自動的にlazyloadから除外してくれているようです。