本文にスキップ
weballin

weballin DIGIWIKI

Cumulative Layout Shift(CLS)

Cumulative Layout Shift(CLS)は、予期しないレイアウトのずれを測るCore Web Vitalsの指標です。画像や広告の遅延表示によって文章やボタンが移動する問題の確認に使います。

weballin

読んでいる文章や押そうとしたボタンが突然動くと、読む位置を見失ったり別の操作を選んだりすることがあります。領域を確保していない画像や広告、動的に挿入される内容、フォントの切り替えなどが原因になります。

画像や動画の幅・高さ、またはアスペクト比を指定し、広告や埋め込み要素の領域をあらかじめ確保します。フォントの読み込み方法は、代替フォントの寸法と実際の表示を確認して選びます。

ラボテストと実際のユーザーデータでは条件が異なります。初期読み込みだけでなく、スクロールや操作中のずれも確認します。具体的な改善値を示すには、比較可能な条件で測定した実際の記録が必要です。

参考資料

よくある質問

最初に何を確認しますか?

動いた要素と、移動の原因となった要素を分けて確認します。画像・広告・埋め込み要素の領域確保と、動的コンテンツの挿入位置が基本の確認項目です。