下のCLS値は、このページで実際に測ったレイアウトのずれ量です。0.1 を超えると Core Web Vitals では不合格になります。
良い例 width と height を書く
属性に実寸を書いておくと、読み込み前から高さが確定します。CSS 側は width:100% と height:auto。
良い例 aspect-ratio で枠を固定する
比率がまちまちの画像を同じ枠に収めたいときは、aspect-ratio と object-fit を組み合わせます。
悪い例 何も指定しない
読み込みが終わった瞬間に高さが跳ね、この下の文章が押し下げられます。
この行が、画像の読み込み完了で下へ動きます。
CLS 計測中…