累積レイアウトシフト (CLS)
読み込み中にページの内容が予期せず動いてしまう量を測る、Core Web Vitalsの指標である。クリックしようとした瞬間にボタンがずれる、あの腹立たしい体験を数値にしたもので、視覚的な安定性を表す。目標は0.1未満。
CLSは、予期しないレイアウトシフト(すでに描画された要素の移動)を、動いた画面の割合と距離で重み付けして合計する。典型的な原因は、サイズ指定のない画像や動画(読み込み時に内容が跳ねる。width/height や aspect-ratio で解決する)、後から現れて内容を押し下げる広告や埋め込み、サイズの違うフォントに入れ替わるWebフォント(FOUT)、既存コンテンツの上に挿入される要素である。
対策は、メディアや動的コンテンツの領域を常に確保すること(aspect-ratio、固定サイズ、スケルトン)、フォールバックのメトリクスを合わせた font-display を使うこと、ユーザーが見ている場所より上に何も挿入しないことだ。3つのCore Web Vitalsの一つで、aspect-ratio や寸法属性が存在する理由に直結している。