CLS改善で画像要素にwidthとheightを固定で設定したい

CLS改善で【画像要素にwidthとheightを固定で設定してください】などの依頼を受けたときの対応です。

CLS改善はSEO対策の一環です。
PageSpeed Insightsのスコア改善が希望だった場合は高速化プランへの案内で基本個別対応はしていませんが、
CLS改善などスコアと関係なくピンポイントに指摘を受けている・またその影響でスコアも芳しくない場合は対応をお願いします。

要望

PageSpeed Insightsの結果
・画像要素で width と height が明示的に指定されていない
を改善したい

修正方法

PageSpeed Insightsの結果【画像サイズの設定方法の詳細CLS】のリンク先を参照してください。
最新のベスト プラクティス: https://web.dev/optimize-cls/?utm_source=lighthouse&utm_medium=lr#images-without-dimensions

今回imgタグにwidthとheightが指定されていないことが指摘内容だったので、下記のように

<img src="" width="" height="" style="width: 100%; height: auto; aspect-ratio: 16/9;">

と、width属性とheight属性を指定したうえで、スタイルでレスポンシブ対応してください。
ただ、PageSpeed Insightsはリアルタイムで結果が反映されるわけではないようなので半日以上は様子を見てください。

補足

PageSpeed Insightsで指摘された画像のみを対象としますがデザイン的に厳しい部分は依頼者にその旨伝えてください。 また事前に下記の様に伝えておいたほうが無難です。

こちらでのCLSの確認作業はPageSpeed Insights経由のみになりますのでご了承ください。
PageSpeed Insightsのスコアを元に判断しているので普段対応はしていないのですが、確認と合わせて対応してみます。
改善するかもやってみないと判断がつかない旨、お客様にお伝えいただけると助かります。

過去例

https://www.kumejimakankou.com/

関連

サイト表示速度が遅いから改善してくれ