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タグに指定するだけです。

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

以上。

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