Core Web VitalsのCLSの改善!imgタグに画像サイズを設定しよう!

この記事は約2分で読めます。

CLSの改善!IMGタグに画像サイズを設定しよう
2021年にSEOのランキング要因になる予定のCore Web Vitals(コア ウェブ バイタル)。
その中の項目の一つにCLS(Cumulative Layout Shift)の改善方法で悩まれていませんか?
Pagespeed Insightで計測すると「累積レイアウト変更」の項目に値します。
CLSの改善方法について解説していきます。

解決策

まずこちらの動画を見てほしい。
左の画像が未対応であり、右の画像が対応済みになります。
左の画像はテキストが左端にあり、ローディングが完了すると、画像が表示され、テキストが右にずれます。
この現象がCLS、累積レイアウトの変更に該当します。
ローディング後にテキストや画像等がずれることですね。
このずれをなくすことでCLSを改善することができます。

解決方法

HTML

imgタグにwidth属性とheight属性を設定します。

<img src="test.jpg" alt="test" width="100" height="100">

widthやheightには画像のサイズが入ります。
これで終了です。
上記動画の右側の画像はwidth属性とheight属性を設定しているため、テキストは右端にあり、画像表示後も移動しません。
要は画像が表示される前から画像の大きさ分の横幅(width)と縦幅(height)を確保しておくことでCLSの改善に繋がりますよということです。

CSS

CSSで各画像にwidthとheightを設定することでも対応は可能です。

.test img{
width:"100px";
height:"100px"
}

該当するクラス名に設定するだけで設定可能です。
ただ、レスポンシブデザインの場合、スマホ表示時にデザインが崩れる場合があるので、注意が必要です。
CSS等がわからない場合はHTMLの直接書き込むことを推奨します。