CLS対策としての画像の高さ指定 #CSS

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加算は発生しませんでした。