【WordPress】アイキャッチ画像を遅延読み込みさせない方法【LCP・FCP対策】

ページ表示スピードを上げるためには、画像を後から読み込ます画像遅延読み込みが有効です。WordPressテーマやプラグインで画像遅延読み込みが推奨されていることも多いです。

しかし、アイキャッチ画像のような記事の上部にある画像を遅延読み込みするとWEB最適化の観点からすると良くないです。

どうしてアイキャッチ画像の遅延読み込みがいけないかと対策を紹介します。

なぜアイキャッチ画像を遅延読み込みがいけないか

上図は、アイキャッチ遅延読み込みをしていた時のGoogleのPageSpeed Insightsのデータです。

Largest Contentful Paint(LCP)とFirst Contentful Paint(FCP)の数値が悪いです。

LCPはコンテンツの中で一番大きなサイズの描画が完了した時間のため、大きな画像は早く表示した方が良いです。

FCPは最初の画面上にあるコンテンツの描画が完了した時間のため、アイキャッチ画像の読み込みが遅いとFCPも遅くなります。

LCPもFCPも、アイキャッチ画像を遅延読み込みさせないようにすることで改善が見込めます。

アイキャッチ画像を遅延読み込みさせない方法

WordPressテーマのfunctions.phpを編集します。もし子テーマがある場合は、子テーマのfunctions.phpを編集してください。

‘post_thumbnail_html’のフィルターを増やして、遅延読み込みを即時読み込みするように置換します。

Cocoonのテーマを使用している場合は、子テーマのfunctions.phpに以下のコードをコピペするだけでOKです。

add_filter('post_thumbnail_html', function($html,$post_id,$post_thumbnail_id) {
	if(strpos($html,'eye-catch-image') !== false){
		if(strpos($html,' loading="') !== false){
			$html = str_replace(' loading="lazy"', ' loading="eager"', $html);
		}else{
			$html = str_replace('<img','<img loading="eager"',$html);
		}
	}	
	return $html;
}, 10, 3);

それ以外のテーマの場合は2行目の「if(strpos($html,’eye-catch-image’) !== false)」の条件をアイキャッチと特定できるものに変えてください。
※2行目の判定をしないと関連記事の小さいアイキャッチ画像も遅延読み込みがなくなってしまいます。

functions.phpを編集したら、F12の開発者ツール等で「loading=”eager”」となっていることを確認できれば完了です。

まとめ

functions.phpを編集して「loading=”lazy”」を「loading=”eager”」に置換することでアイキャッチの遅延読み込みを即時読み込みに変えます。

上図は変更をしてからしばらく置いたものです。LCPとFCPが改善しています。

読者のストレスにならぬようにWEB最適化してページ表示速度を早くなるようにしていきましょう。そうすることでSEO対策にも繋がり、より多く見てもらえるようになります。