PageSpeed Insights から「画像要素で width と height が明示的に指定されていない」指摘されるケースの対策です。
![](https://i0.wp.com/camon.tokyo/wp-content/uploads/2022/01/f4e88c8e9dba859a7c986258c0d73304.png?resize=640%2C193&ssl=1)
画像に width と height を指定していないために CLS に課題が出ています。
改善方法
画像の width と height を指定することで、CLS 対策ができます。
画像の width height 属性を追加する
画像に、width と height を指定します。
<img width="1200px" height="475px" src="xxxx" />
属性を追加するだけです。
改善前
width height 追加前の Pagespeed の点数です。
モバイルで52点、デスクトップで83点でした。
![](https://i0.wp.com/camon.tokyo/wp-content/uploads/2022/01/0d84d1f42ed73c33a1c63678b3d342be.png?resize=640%2C366&ssl=1)
![](https://i0.wp.com/camon.tokyo/wp-content/uploads/2022/01/95891c13e0067110fbee5bba8ea0445d.png?resize=640%2C362&ssl=1)
改善後
指摘にあった3点の画像の width と height を指定しました。
モバイルとデスクトップで+9点の改善がみられました。
![](https://i0.wp.com/camon.tokyo/wp-content/uploads/2022/01/8f34a44ac100a1e2b3014680b96b157f.png?resize=640%2C362&ssl=1)
![](https://i0.wp.com/camon.tokyo/wp-content/uploads/2022/01/6dc01b799afd2ab410c824f9c7e43e4f.png?resize=640%2C364&ssl=1)
「画像要素で width と height が明示的に指定されていない」CLS 対策まとめ
画像に width とheight 属性を足すことで、Pagespeed の点数が改善しました。
マークアップ時には忘れないようにしたい項目です。