• コーディング

【WordPress】アイキャッチ画像の遅延読み込みを無効化させる方法を紹介！

  • #WordPress

Googleが推奨するSEO対策のひとつに表示画像の遅延読み込みがあります。
imgタグにloading属性を設定することで、ユーザーのスクロールに合わせて必要な画像だけを表示させる事が出来るようになります。

WordPressのデフォルトの設定では投稿ページのアイキャッチ画像にも遅延読み込み loading="lazy" が設定されています。

アイキャッチ画像に遅延読み込みが設定されていると、Core Web Vitalsの要素のひとつであるLCPスコアを低下させる要因となります。

このページでは解決する方法をご紹介します。

loading属性について

imgタグとiframeタグに設定することで遅延読み込みが出来ます。
2022年8月現在では、safari,firefoxはimgタグのみ対応しています。

値意味
eager遅延読み込みをしない（すぐに読み込む）
lazy遅延読み込みをする

出典：Can I use loading?

遅延読み込みの無効化

投稿ページ（single.php）でアイキャッチ画像を表示させている箇所を以下の記述に変更してください。

the_post_thumbnail() の第二引数に array('loading' => 'eager') を設定することで、遅延読み込みをしないように設定出来ます。

<?php the_post_thumbnail('full', array('loading' => 'eager')); ?>
  • 松浦 一彦

  • 約11年間、事業者会社、制作会社でWEBデザイン、WEBディレクション、GA/GTMを使用したアクセス解析などを経験。
    2022年3月よりフリーランスとして独立。
    現在は業務委託として複数の企業のプロジェクトに参加する傍ら、受託案件を受けたり、自身のブログを運用しています。

    • スキルUI/UX改善、サイト分析、WEBサイト&LPデザイン、コーディング、ディレクション、動画編集、WordPress構築
    • 言語HTML、CSS、Javascript/jQuery、PHP
    • ツールPhotoshop、illustrator、Premiere、After Effect、XD、Figma、Googleアナリティクス

関連記事