画像サイズのCLS対応

GoogleのCore Web VitalsがSEO評価の指標となって数年経ちましたが、CLS (Cumulative Layout Shift)の調整でハマったところを解決策を書きます。(WordPressを使ったサイトの話です)

背景

img タグに高さが指定されていない場合、画像が読み込まれた時点で下のコンテンツの位置に変更が発生し、CLSが加算されてしまいます。そのため画像の高さを指定する必要があります。

あらかじめ img タグにheightが指定されていたり、CMSの投稿画像のサイズルールが定められていればこの問題は簡単に回避できます。しかし、長年運用されているサイトで、投稿画像のサイズがばらばらだったりすると「困った！」となるわけです。さらに添付画像のように画像が100%幅のときは、 ウィンドウサイズを変更するたびに画像の高さが変わるため「高さ指定無理じゃね？」となりました。

解決策

結論から言えば、CSSの 100vw を使います。

WordPressの wp_get_attachment_image_srcでは、画像の幅、高さを取得できます。

$featured_image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ) , 'thumbnail' );

// $featured_image[0]: 画像のURL
// $featured_image[1]: 画像の幅
// $featured_image[2]: 画像の高さ

そこで画像の縦横比を取得します。

$ratio = $featured_image[2] / $featured_image[1];

あとは img タグに指定するだけです。

<img
   src="<?php echo $featured_image[0]; ?>"
   style="
       width: 100%;
       height: calc(100vw * <?php echo $ratio ;?>);
   "
/>

以上。

追記: DevToolで確かめた限りだと、CLSに関しては img へのheight指定ではなく、CSS側の対応でもCLS加算は発生しませんでした。