CLS（Cumulative Layout Shift）とは？視覚安定性の評価基準
CLS（Cumulative Layout Shift）の概要と重要ポイント
CLSは読み込み中に要素が思わぬ位置へ移動する「視覚の不安定さ」を数値化する指標です。スコアが高いほど体験が悪化し、離脱や誤クリックを招きます。まずは 0.1以下の達成 を目標に、画像・広告・フォント・ダイナミック挿入の4領域で原因を潰していきます。
CLSの定義（意味と評価基準）
CLSは「視覚変化の影響範囲 × 距離（移動量）」の合計で算出されます。ユーザーが予期しない移動のみが対象で、クリックなど意図的な操作での変化は基本的に除外されます。遅延読み込みの画像や広告枠、Webフォントの切替、サイズ未指定の埋め込みが主因です。
| 判定 | しきい値 | 目安 |
|---|---|---|
| 良好 | ≤ 0.1 | 多くの環境で安定表示 |
| 改善が必要 | 0.1〜0.25 | 主要要素の予約と遅延挿入の抑制が必要 |
| 不良 | > 0.25 | 画像/広告/フォント/挿入の抜本対策が必要 |
まず押さえる3点
- サイズ属性と予約領域をすべての画像・埋め込み・広告に付与
- Webフォントは
font-display: swap等でFOIT/FOUTを抑制 - 上部への動的挿入を避け、プレースホルダで高さを確保
実務での論点（原因と改善の優先度）
CLS悪化の多くは「サイズ未指定のリソース」「遅れて現れるUI」「フォント切替」で起きます。画像・動画・iframeは幅高さを指定し、レスポンシブはaspect-ratioで比率を保持します。広告は固定・最小高さを確保し、空振り時もレイアウトを崩さない設計にします。特に 初回表示領域の安定化 が最短の改善につながります。
- 画像/動画：
width/heightまたはaspect-ratio、srcset/sizesで安定描画 - 広告/埋め込み：最小高さを予約。読み込み失敗時も空白を保持
- フォント：
font-display: swap、サブセット化、可変フォント検討 - UI挿入：上部にトースト/バナーを追加しない。必要なら下部固定やプレースホルダ
- スケルトン：ロード中はスケルトンや占位ボックスで高さを確保
比較・使い分け表（主要Web Vitalsの違い）
| 指標 | 意味 | 改善の主眼 |
|---|---|---|
| CLS | 視覚の安定性 | 予約領域・サイズ属性・動的挿入の制御 |
| LCP | 主コンテンツの表示速度 | 画像最適化・TTFB短縮・ブロッキング削減 |
| INP | 操作全体の応答性 | 長いタスク削減・ハンドラ軽量化 |
運用上の注意（計測・SEO・テンプレ設計）
フィールドデータ（CrUX等）で実ユーザーのCLSを確認し、テンプレートごとに原因を固定化します。ヒーローや広告、通知バーなど「上部で遅れて出る要素」は設計段階で排除します。ABテスト時もDOM挿入位置と高さを一定に保ち、環境差でのゆらぎを避けます。判断に迷う場面では「この要素に 予約すべき高さ はあるか？」で実装方針を決めます。
よくある質問（FAQ）
画像はlazy-loadしてもCLSは改善しますか？
遅延読込自体はCLS改善ではなく、サイズ属性や
aspect-ratioで占位を確保することが重要です。占位があれば遅延でもずれにくくなります。Webフォントで文字が跳ねます。対策は？
font-display: swapを指定し、メトリック互換フォールバックを選びます。必要に応じて可変フォントやサブセット化で読み込みを軽量化します。広告でレイアウトが崩れます。何をすべきですか？
広告枠に固定または最小高さを設定し、配信失敗時も空白を保持します。折り返し前の領域での動的挿入は避けてください。
測定はラボとフィールドどちらを見れば良い？
最終判断はフィールドデータです。ラボ（Lighthouse等）は原因特定に活用し、テンプレ単位で修正→実ユーザーで再確認します。
CLSのまとめ
CLSは体験を損なう「ずれ」を抑えるための中核指標です。サイズ属性/予約領域/フォント制御/動的挿入の見直しを基本に、初回表示領域の安定化から着手すれば、0.1以下の達成が現実的になります。テンプレートでルール化し、計測と改善を継続して品質を安定させましょう。
