WordPressのアイキャッチを出力するとwidthとheightが出力されずGoogleのPageSpeedInsightで「画像要素で width と height が明示的に指定されていない」とされ、CLSのスコアが落ちてしまいます。

こちらの改善方法をお知らせします。

通常のアイキャッチ画像の取得は以下

<?php if(have_posts()): while(have_posts()): the_post(); ?>
<?php the_post_thumbnail('thumbnail'); ?>
<?php endwhile; endif; ?>

これでは、widthやheightは表示されません。

widthやheightが表示されないと、ページが全て表示される過程でレイアウトのずれが生じます。

画像にwidth、heightが無い場合のレイアウトのずれとは？

ウェブページがブラウザで読み込まれた際、画像の読み込みにはテキストなどに比べ少し時間がかかります。

ソースコードとしてはそこに画像はあるということはわかっていても、その画像の高さがわからないとその画像が読み込まれた際に画像サイズ分ページのレイアウトが変わってしまいます。

これがダメですよ。とGoogleは言っています。もちろんユーザー体験的に良くないからですね。

出力されるアイキャッチ画像にwidthとheightを追加する

まず以下のコードを記載します。

①まずこちら

<?php
$thumbnail_id = get_post_thumbnail_id($post->ID);
$image = wp_get_attachment_image_src( $thumbnail_id, 'full' );
$src = $image[0];
$width = $image[1];
$height = $image[2];
?>

次にアイキャッチを表示させたい位置に以下を表示します。

②アイキャッチを表示させたい箇所に入れるコード

<?php echo '<img src="'.$src.'" width="'.$width.'" height="'.$height.'" />'; ?>

これでOK

一覧ページなどのループで使う際は②をアイキャッチを表示させたい箇所に書いていけばOKです。