MENU
  1. ホーム
  2. SWELL
  3. 【WordPress】アイキャッチ画像の読み込みを高速化する方法

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

SWELL

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

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

目次

LCPリクエストの検出：

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

PageSpeed Insights LCPリクエストの検出 LCP画像をHTMLからすぐ検出できるようにし、遅延読み込みを回避して、LCPを最適化します LCP画像 アイキャッチ画像 高速化 fetchpriority preload
LCP リクエストの検出

LCP画像をHTMLからすぐ検出できるようにし、遅延読み込みを回避して、LCPを最適化します

  • 遅延読み込みが適用されていません
  • 「fetchpriority=high」を適用する必要があります
  • リクエストは最初のドキュメントで検出可能です

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

LCPとは？

LCPとはLargest Contentful Paintの略です。

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

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

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

LCP画像をHTMLからすぐ検出できるようにし、遅延読み込みを回避して、LCPを最適化します
アイキャッチ画像の読み込みに問題があります。

アイキャッチ画像の読み込み高速化方法(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');
  • アイキャッチ画像の情報（URLやsrcsetなど）を取得します。これにより、複数サイズに対応した画像読み込みが可能になります。(wordpressではデバイスに合わせて複数サイズの画像を生成/読み込みするため)
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";
        }
  • 実際に<link rel=”preload”>をHTML内の<head>に出力します。
    • rel=”preload”
    • as=”image”
    • fetchpriority=”high”

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

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

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

function.phpの場所

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

wordpress function.php 場所 どこ 書き換え 高速化 swell
wordpress function.php 場所 どこ 書き換え 高速化 swell

その他部分の改善方法

SWELL lazyload アイキャッチ LCP画像 fetchpriprity=high

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

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

SWELL
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

コメント

コメント一覧 （2,624件）

eye massager eye massager with heat eye massager for migraines eye massager with heat and cooling eye massager intelligent eye care eye massager for dry eyes the smart eye massager vibrating eye massager へ返信する コメントをキャンセル

目次