30秒で理解
CLS（Cumulative Layout Shift）は、ページを見ている途中で、表示済みの要素が予期せず移動した量を表すスコアです。本文を読んでいるときに広告が後から入り、文章が押し下げられる、押そうとしたボタンがずれる、といった体験を数値化します。
スコアは単位のない値で、低いほど安定しています。web.dev の基準では、ページ表示の75パーセンタイルで 0.1以下が良好、0.25超が不良です。0.1と0.25の間は改善が必要な範囲です。この判定はモバイルとデスクトップを分けて見ます。
読んでいる本のページを、誰かが途中で押し下げる状態です。文字が動くだけなら読み直せますが、リンクや購入ボタンまで動くと、意図しない場所を押すことがあります。CLSは「ページが重いか」ではなく、「見えていたものが動いたか」を見る数字です。
どういう仕組みか
表示された要素が、ひとつ前の描画フレームから位置を変えるとレイアウトシフトとして記録されます。CLSは、ページ全体のシフトを単純に足し続けるのではなく、短い間隔で起きたシフトのまとまり（セッションウィンドウ）のうち、合計スコアが最大のまとまりを使います。1秒未満の間隔で続き、全体は最大5秒という区切りです。
画像・動画・広告・埋め込み要素の大きさが先に確保されていない場合や、後から挿入されるコンテンツ、フォントの切り替えなどで、すでに見えている部分が動きます。クリックやスクロールなど、ユーザーの操作に続いて起きた移動は、予期された動きとして扱われる場合があります。
| 起きていること | CLSへの影響 | 先に見る場所 |
|---|---|---|
| 画像の読み込み後に本文が下がる | 画像の領域が後から確保される | 画像要素の幅・高さ、または aspect-ratio |
| 広告や埋め込みが後から現れる | 挿入された分だけ周囲が動く | 広告枠・iframeの予約領域 |
| Webフォントの切り替えで行が折り返す | 文字の幅や高さが変わる | フォント読み込みと代替フォント |
| 上部にバナーが追加される | 読み始めた本文が押し下げられる | 動的に追加するUIの表示位置 |
どこで見えるか
実際の利用者の体験を確認するなら、PageSpeed Insights の対象URLを開き、フィールドデータの「実際のユーザーの環境での評価」を見ます。ここでは過去の利用者のデータを、モバイルとパソコンに分けて確認できます。
原因になった要素をページ上で探すときは、Chrome DevTools の「Performance」パネルでページを記録し、レイアウトシフトの記録を選びます。テスト環境で再現した動きを見る場所で、実際の利用者の集計値そのものではありません。
| 見る場所 | 分かること | 使い分け |
|---|---|---|
| PageSpeed Insights | 実利用環境での判定とURLの傾向 | 影響範囲の確認 |
| Chrome DevTools「Performance」 | どのタイミングで何が動いたか | 原因要素の特定 |
| 公開後のフィールドデータ | ページ変更後の利用者体験 | 修正前後の再確認 |
よくある誤解
CLSは、画面にある要素が一度でも動けば、動いた回数だけ単純に加算される数字ではありません。現在の定義では、短い時間に連続して起きたシフトをセッションウィンドウにまとめ、その中で最大のものを使います。古い解説にある「ページ滞在中のシフトをすべて合計する」という説明とは区別してください。
また、CLSが低ければ読み込み速度や操作の反応も良い、とは限りません。表示の安定性はCLS、主要コンテンツの表示速度はLCP、操作への反応はINPというように、別の観点を持つ指標です。CLSだけを下げても、画像が表示されるまで長い、ボタンの反応が遅いという問題は残ります。
ラボデータだけで合格と決めないでください。開発中の回線やキャッシュでは動かなくても、広告・個別表示・外部ウィジェットがある本番環境では動くことがあります。フィールドデータと、原因を調べるラボ計測を役割分担させます。
これを踏まえて何をするか
まず問題のページを1つに絞ります。次の順番で操作してください。
| 順番 | 開く画面 | やること | 判定 |
|---|---|---|---|
| 1 | PageSpeed Insights | URLを入力し、「実際のユーザーの環境での評価」でCLSをモバイル・パソコン別に見る | 0.1以下か、0.25超かを記録 |
| 2 | 同じ画面の診断 | CLSの診断項目を開き、影響した要素やレイアウトシフトの原因を確認する | 画像・広告・フォント・動的UIに分類 |
| 3 | 対象ページのHTML/CSS | 原因要素に表示領域の寸法が先にあるか確認する | 無ければ幅・高さや予約領域を追加 |
| 4 | Chrome DevTools「Performance」 | 修正したURLを記録し、Layout Shifts のイベントを開く | 修正前と同じ要素が動かないか確認 |
| 5 | PageSpeed Insights | 公開後、同じURLのフィールドデータを再び開く | モバイル・パソコン別に判定を記録 |
原因が画像なら画像要素の表示サイズを先に確保し、広告や埋め込みなら枠の高さを先に取ります。原因が特定できない場合は、PageSpeed Insights の「診断」で示された要素を1つだけ選び、その要素を含むテンプレートのHTMLを開いてから再計測してください。最初に開く画面は PageSpeed Insights の対象URL入力欄です。