Cumulative Layout Shift (CLS)
Cumulative Layout Shift（CLS）とは、ページの存続期間中に、表示されているコンテンツがどれだけ予期せず位置をずらすかを数値化したCore Web Vitalsの指標です。ユーザーがボタンをタップしようとした瞬間にそれが動いてしまう、いわゆる「コンテンツが飛び跳ねる」問題を捉えます。
Cumulative Layout Shift（CLS）とは、ページの存続期間中に、表示されているコンテンツがどれだけ予期せず位置をずらすかを数値化したCore Web Vitalsの指標です。ユーザーがボタンをタップしようとした瞬間にそれが動いてしまう、いわゆる「コンテンツが飛び跳ねる」問題を捉えます。
なぜ重要か
CLSはGoogleが認めているランキングシグナルであり、Core Web Vitalsの3指標の一つです。Googleのしきい値は、良好が0.1以下、改善が必要が0.1〜0.25、不良が0.25超です。CLSが高いとユーザーの信頼を損ないます。Googleの調査によると、CLSが0.15を超えるページは直帰率が24%高くなります。また、ほとんどの原因に簡単な対処法があるため、CLSは修正に最もコストのかからないCore Web Vitalsでもあります。
CLSの計算方法
CLSスコアは、ページの存続期間中に発生したすべての予期しないレイアウトのずれについて、インパクト割合 × 距離割合 を合計したものです。
- インパクト割合: ずれた要素が影響を与えるビューポートの割合（ずれる前と後の和集合）。
- 距離割合: いずれかの要素が移動した最大の距離を、ビューポートに対する割合で表したもの。
2021年以降、Chromeは「ウィンドウ化CLS」を採用しており、最も悪い5秒間のウィンドウのみがカウントされます。そのため、長く動作するSPAが一度の悪い瞬間によって永久にペナルティを受けることはありません。
よくある原因
寸法のない画像: width/height 属性のない <img> は、画像の読み込み時にブラウザの再フローを引き起こします。
スペースを確保していない広告や埋め込み: 初期描画の後に挿入されるサードパーティの広告枠が、コンテンツを押し下げます。
FOIT/FOUTを引き起こすWebフォント: カスタムフォントが読み込まれると、フォールバックフォントとは異なるメトリクスのためにテキストが再フローします。
動的に挿入されるコンテンツ: 「こちらもおすすめ」のウィジェット、Cookieバナー、通知などが、既存コンテンツの上に表示されること。
transformベースでないアニメーション: top や left をアニメーションさせるとレイアウトが発生しますが、transform をアニメーションさせても発生しません。
CLSの修正方法
画像と動画に明示的な寸法を設定する: <img width="800" height="600"> のようにすると、ブラウザはファイルの読み込み前にスペースを確保します。
広告枠のスペースを確保する: 広告コンテナに固定の min-height を与え、挿入された広告がコンテンツを押し下げないようにします。
font-display: optional を使う か、WebフォントをプリロードしてFOUTを最小限に抑えます。
新しいコンテンツはフォールド以下に挿入する か、ユーザーの操作に応じて挿入し、既存コンテンツの上には挿入しません。
transform と opacity のみでアニメーションする: これらはレイアウトを発生させません。
CSSの aspect-ratio を使う ことで、明示的な寸法なしにレスポンシブなメディアを実現します。
CLSの計測
フィールドデータ: CrUX、Search ConsoleのCore Web Vitalsレポート、PageSpeed Insightsのフィールドデータのセクション。
ラボデータ: Lighthouse、Chrome DevToolsのパフォーマンスパネル。なお、実際のユーザーは異なるスクロール位置や操作を引き起こすため、ラボのCLSはフィールドの値と異なる場合があります。
CLSは実際のユーザーデータの75パーセンタイルで評価されるため、SEOで意味を持つのはフィールドデータです。
Sources: