CLSが悪化する主な要因｜構造・挙動・実装の“どこでズレるのか”を見極める

CLS（Cumulative Layout Shift）は、「正しく作れば深刻化しづらい」一方で、ひとたびズレが起きると 原因の切り分けが難しい指標 でもあります。

今回は、現場で特に発生しやすい CLS悪化の代表的な要因 を整理し、それぞれが「なぜズレにつながるのか」を分かりやすく解説します。

画像や動画のアスペクト比が固定されていない

最も発生しやすく、かつ再現性が高いCLS要因です。

よくある状況

• IMGタグに width / height が指定されていない
• CSSだけでサイズを調整している
• VIDEOタグの比率が途中で変わる
• Lazyload後に“本来のサイズ”が確定する

なぜズレる？

ブラウザが事前に「縦横比」を把握できないため「初回レイアウトを仮で作成 → 読み込み途中でサイズ確定 → レイアウト再計算」という流れが発生するからです。

予防策

• 画像には width と height を必ず指定
• レスポンシブ対応は aspect-ratio を併用
• background-image でも、比率を維持する配慮が必要

Webフォントの読み込みで段組みや行送りが変化する

視覚的には小さな揺れでも、CLSとしては大きくカウントされることがあります。

よくある状況

• Webフォントが読み込まれるまで別フォントで描画される
• 読み込み後に文字幅が変わる
• font-display が未設定

なぜズレる？

フォントが変わると文字幅・行送り・段落の高さが変化し、レイアウトが再計算されるためです。

予防策

• font-display: swap を設定
• LCP周辺ではWebフォント依存を減らす
• フォントファイルをサブセット化し軽量化

広告・レコメンド・動的コンテンツの後付けによる押し下げ

ECサイトやメディアサイトで特に多いCLS要因です。

よくある状況

• JavaScriptで「後から」要素を挿入
• 非同期ロードの広告が読み込み後に高さ変化
• レコメンド枠が可変
• 外部ウィジェットが動作

なぜズレる？

初期レイアウトが完成 → 後から高さのある要素が追加 → 周囲が押し下がる（レイアウトシフト）という流れが起こるためです。

予防策

• プレースホルダー（固定高さの枠）を最初から確保
• “挿入される領域” をCSSで確保
• 重要箇所に動的挿入を置かない

DOM構造が複雑で、スタイル再計算が広範囲に伝播する

最近増えているCLSの原因です。

よくある状況

• 入れ子が過剰
• displayプロパティの後付け変更
• 初期表示後にスタイルをJavaScriptで変更
• フレームワークの仮DOM → 実DOMの切り替え

なぜズレる？

DOM構造が複雑だと、一部の変更が“周辺要素まで一気に再計算”され、大きなレイアウトシフトとして評価されるためです。

予防策

• LCP周辺のDOMは極力シンプルに保つ
• CSS上書きを最小限にする（ネストで整理）
• JavaScriptによる初期スタイル変更を避ける

JavaScriptによる後処理がレイアウトを変化させる

JavaScriptが直接レイアウトに干渉するパターンは非常に多いです。

よくある状況

• JavaScriptで高さを後計算して適用する
• アニメーション（fadeIn・slideDown）が初期位置を変える
• 初期化スクリプトが遅れて実行
• SPA構造で遷移後に一斉描画

なぜズレる？

JavaScriptによるスタイル操作は、“表示後に要素のレイアウトを変える処理” のためブラウザはレイアウトを再計算し、CLSとしてカウントします。

予防策

• 初期レイアウトはCSSで確定させる
• アニメーションは transform / opacity に限定
• UI変更はLCP要素より後で実行

複合要因で発生しやすい──1つ直しても直らない理由

CLSは、単発ではなく 複数要因の組み合わせ で発生することが多いです。

• Webフォント＋画像Lazyload
• DOM肥大＋JavaScript後処理
• 動的挿入＋高さ未設定

そのため「width/heightを指定したのに直らない」というケースが発生します。

CLS対策は「構造（HTML）× 表示順（CSS）× 挙動（JavaScript）」の3軸を同時に見る必要があります。