PageSpeed Insights から「画像要素で width と height が明示的に指定されていない」指摘されるケースの対策です。
画像に width と height を指定していないために CLS に課題が出ています。
改善方法
画像の width と height を指定することで、CLS 対策ができます。
画像の width height 属性を追加する
画像に、width と height を指定します。
<img width="1200px" height="475px" src="xxxx" />属性を追加するだけです。
改善前
width height 追加前の Pagespeed の点数です。
モバイルで52点、デスクトップで83点でした。
改善後
指摘にあった3点の画像の width と height を指定しました。
モバイルとデスクトップで+9点の改善がみられました。
「画像要素で width と height が明示的に指定されていない」CLS 対策まとめ
画像に width とheight 属性を足すことで、Pagespeed の点数が改善しました。
マークアップ時には忘れないようにしたい項目です。