Cumulative Layout Shift

Cumulative Layout Shift

Cumulative Layout Shift（CLS）は、ページの読み込みや操作中に画面上の要素が意図せず動いてしまう量を測る指標です。例えば、読み込み中にボタンや本文が突然移動してしまい、誤って別のリンクを押してしまった経験はありませんか。CLSはそのような視覚的な不安定さを数値化し、どれだけユーザーの体験が乱されているかを示します。スコアが低いほど安定しており、良いユーザー体験になります。原因には画像や広告のサイズ指定がないこと、動的に要素を挿入するスクリプト、フォントの後読み込みなどが含まれます。対策としては画像や埋め込み要素に幅と高さを指定しておくこと、広告や動的コンテンツのために事前にスペースを確保すること、アニメーションや変形を使って視覚的変化を滑らかにすることが有効です。CLSを改善すると誤タップや読みづらさが減り、サイトの信頼感や使いやすさが向上します。小さな動きの積み重ねがユーザーのストレスにつながるため、見た目の安定性を保つことが大切です。