0
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

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

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

背景

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

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

Screen_Shot_2020-12-20_at_11_12_44.png

解決策

結論から言えば、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加算は発生しませんでした。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
0
Help us understand the problem. What are the problem?