CLS
Cumulative Layout Shift（CLS）は、ページの読み込み中に発生する予期しないレイアウトの移動量の合計を測定する視覚的安定性の指標です。これはGoogleのCore Web Vitalsの1つであり、0.1以下のスコアが良好とされています。
CLSは、ページの読み込み中に画面上の要素が予期せずどれだけ移動したかを合計した、視覚的安定性の指標です。
これはCore Web Vitalsの1つであり、75パーセンタイルで測定されます。0.1以下は良好、0.25を超えると不良です。
主な原因は、サイズが指定されていない画像、広告、iframe、動的に挿入されるコンテンツ、そしてWebフォントの切り替えによる再レイアウトです。
画像にwidthとheightを設定し、aspect-ratioやmin-heightでスペースを確保し、フォントを最適化することでスコアを改善できます。
概要
Cumulative Layout Shift（CLS）は、ページの読み込み中に表示要素が予期せずどれだけ移動したかを合計した、視覚的安定性の指標です。これはGoogleが定義する3つのCore Web Vitalsの1つであり、ボタンをタップしようとした瞬間に広告や画像が突然ページを押し下げる、といったよくある体験に代表される意図しないレイアウトシフトを数値化します。
web.devの公式ドキュメントでは、CLSはページの全存続期間を通じて発生するすべての予期しないレイアウトシフトスコアのうち、最大の集中発生を指すと定義されています。個々のレイアウトシフトスコアは、impact fractionとdistance fractionを掛け合わせて算出され、最終的なCLS値は、同じセッションウィンドウ内（最大5秒）で1秒以内に発生したシフトをまとめたうえで、最も高いスコアを記録したウィンドウになります。
しきい値
CLSは、モバイルとデスクトップの両方におけるページ読み込みの75パーセンタイルで評価されます。
評価 | CLSスコア | 意味 |
|---|---|---|
良好 | 0.1以下 | 視覚的に安定している |
改善が必要 | 0.1以上0.25以下 | 一部でレイアウトのずれが発生します |
不良 | 0.25以上 | 頻繁なレイアウトのずれにより、体験が低下します |
一般的な原因
寸法が指定されていない画像: 画像に width と height 属性がない場合、ブラウザは読み込み時までそのためのスペースを確保しないため、周囲のコンテンツが押しのけられます。
寸法が指定されていない広告、埋め込みコンテンツ、iframe: 外部から読み込まれる要素が遅れて表示されると、近くのコンテンツが予期せず移動します。
動的に挿入されるコンテンツ: 初回描画後に JavaScript で追加されるバナー、通知、またはおすすめブロックが、既存のコンテンツをずらします。
Web フォントの切り替え: フォールバックフォントと Web フォントのサイズ差により FOIT または FOUT が発生し、テキストの再レイアウトや再フローが引き起こされます。
ネットワーク応答を待つアクション: 応答到着後に DOM を更新すると、レイアウトが変化することがあります。
最適化
画像の寸法を指定する:
<img>タグに width と height 属性を設定するか、CSS の aspect-ratio を使用して画像の読み込み前にスペースを確保します。レスポンシブ画像の場合は、これにheight: auto; width: 100%;.広告や埋め込みのためのスペースを確保する: 遅れて読み込まれる要素のために、min-height または aspect-ratio を使用してスロットを確保します。
動的コンテンツの配置を調整する: 挿入されるコンテンツはファーストビューの外に配置するか、ユーザー操作後に読み込み、固定サイズのコンテナとスケルトン UI に依存します。
Web フォントを最適化する: font-display: optional を使用し、代替フォントを宣言し、フォント切り替え時のサイズ差を最小化するために size-adjust を適用します。
bfcache の適格性を確保する: 戻る/進むナビゲーション時にページ状態を復元し、再レイアウトのない遷移を保証します。
基準
閾値、計算方法、および上記の原因と最適化の一覧は、Google の公式 web.dev ドキュメント「Cumulative Layout Shift (CLS)」および「Optimize CLS」に基づいています。これら2つのドキュメントでは、良好な閾値を 0.1 以下、低い閾値を 0.25 超と定義し、レイアウトシフトスコアを impact fraction × distance fraction として算出し、1 秒のギャップと最大 5 秒の session window の概念を説明しています。
実装チェックリスト
すべての画像と動画に width と height、または aspect-ratio が宣言されていることを確認します。
広告、埋め込み、iframe のスロットが min-height でスペースを確保していることを確認します。
動的に挿入されるコンテンツが既存のコンテンツを押し出してずらさないことを確認します。
Web フォントに font-display、代替フォント、size-adjust が設定されていることを確認します。
実測のフィールドデータにおける 75 パーセンタイルの CLS が 0.1 以下に維持されていることを監視します。