CLS（Cumulative Layout Shift）
CLSとは、ページ表示中にレイアウトが意図せずズレる量の累積スコア。「読んでいた場所がいきなり動いて誤タップした」体験を防ぐための指標で、0.1以下が良好とされます。
CLS（Cumulative Layout Shift）
ひと言で: ページが「ガクッと動く」量を測る指標。0.1以下が目標。
CLSとは
CLS（Cumulative Layout Shift、キュムラティブ・レイアウト・シフト）は、ページの読み込み中・閲覧中に 要素が予期せず動いた量を合計したスコア です。Core Web Vitalsの3指標のひとつで、視覚的安定性を測ります。
スコア基準:
- 0.1以下: Good
- 0.1〜0.25: Needs Improvement
- 0.25超: Poor
「広告が遅れて挿入されてボタンの位置がズレる」「画像のサイズ指定がなく後から枠が広がって本文が押し下げられる」 — こうした体験を引き起こすのがCLSです。
なぜ重要か
レイアウトが急に動くと、ユーザーは押すつもりのなかったボタンを誤タップしたり、読んでいた行を見失ったりします。ECサイトでは「購入ボタン」のつもりが「キャンセルボタン」を押してしまう、という致命的な事故も起こります。
例・具体例
- 画像に
widthheightを指定する → 読み込み前から枠が確保されてズレない - 広告枠に固定の
min-heightを指定する - 動的に挿入するコンテンツは既存要素の上ではなく下に追加する
初心者向けまとめ
- CLS = レイアウトのズレ量
- 0.1以下が目標
- 画像サイズ指定・広告枠固定が基本対策
関連用語
もっと詳しく
関連用語
- INP（Interaction to Next Paint）
INPとは、ユーザーがクリック・タップ・キー入力したあと、次の画面更新までの遅延時間を測る指標。「操作のサクサク感」を表し、200ms以内が良好とされます。2024年3月にFIDから置き換わりました。
- E-E-A-T
E-E-A-Tとは、Googleがコンテンツ品質を評価する4つの観点「Experience（経験）・Expertise（専門性）・Authoritativeness（権威性）・Trustworthiness（信頼性）」のこと。SEOとLLMO両方で最重要の概念です。
- LCP（Largest Contentful Paint）
LCPとは、ページ内で最も大きいコンテンツ（画像・動画・テキストブロック）が画面に表示されるまでの時間。読み込み体感速度を表す指標で、2.5秒以内が「良好」とされます。
- Core Web Vitals
Core Web Vitalsとは、Googleが定めるWebページのユーザー体験を測る3つの指標群（LCP・INP・CLS）。読み込み速度・応答性・視覚的安定性をスコア化し、ランキング要素にも組み込まれています。