Cumulative Layout Shift (CLS)

Cumulative Layout Shift（CLS）の定義

Cumulative Layout Shift（CLS） は、ページの全ライフサイクル中に発生する予期しないレイアウトシフトを測定することで、Webページの視覚的安定性を定量化するCore Web Vitals指標です。具体的には、CLSはレンダリングフレーム間での可視要素の予期しない移動ごとに、レイアウトシフトスコアの最大バーストを測定します。広告がページ上部に読み込まれてテキストを押し下げたり、画像が事前定義された寸法なしでレンダリングされたりするなど、ページコンテンツが予期せず移動すると、ユーザーは読み取りの流れが妨げられ、誤った要素を誤ってクリックしてしまうなど、視覚的な不安定性を経験します。Googleは2021年6月にCLSをランキング要素として正式に指定し、ユーザーエクスペリエンスと検索エンジン最適化の両方にとって重要な指標となっています。良好なCLSスコアは0.1以下であり、視覚的な混乱が最小限であることを示し、0.1〜0.25のスコアは改善が必要、0.25を超えるスコアは不良と見なされます。

背景と歴史

Cumulative Layout Shiftの導入は、Webパフォーマンスコミュニティがユーザーエクスペリエンスを測定する方法における重要な転換を示しています。CLS以前は、ほとんどのパフォーマンス指標は読み込み速度とインタラクティブ性に焦点を当てており、予期しないページ要素の動きによって引き起こされるフラストレーションを見過ごしていました。Googleの調査では、ユーザーの70%以上が定期的にレイアウトシフトを経験しており、これらのシフトは直帰率の増加とエンゲージメントの低下に直接相関することが明らかになりました。この指標はWeb Incubation Community Group（WICG）によって開発され、Layout Instability APIを通じて正式化されました。このAPIはブラウザにレイアウトシフトを検出して報告する標準化された方法を提供します。Googleが2020年5月にCore Web Vitalsを発表したとき、CLSはLargest Contentful Paint（LCP）およびInteraction to Next Paint（INP）と並んで3つの主要指標の1つになりました。この指標は導入以来進化を遂げてきました。当初はページの全寿命にわたる総レイアウトシフトを測定していましたが、2021年5月にセッションウィンドウ方式を使用するように改良され、ライフサイクル全体に分散した小さなシフトがあるページをペナルティするのではなく、最悪の不安定性バーストに焦点を当てることで、実際のユーザーエクスペリエンスをより適切に反映するようになりました。この進化は、恣意的な技術的測定ではなく、ユーザーのフラストレーションを真に反映する指標を作成するというGoogleの取り組みを示しています。

技術的説明：CLSの仕組み

Cumulative Layout Shiftは、高度な計算システムを通じて動作し、2つの主要コンポーネントである影響率（impact fraction）と距離率（distance fraction）を組み合わせます。影響率は、不安定な要素（2つのレンダリングフレーム間で開始位置が変化する要素）によって影響を受けるビューポート領域の割合を測定します。たとえば、ある要素が1つのフレームでビューポートの50%を占め、その後シフトし、その以前の位置と現在の位置の和集合がビューポートの75%をカバーする場合、影響率は0.75になります。距離率は、不安定な要素がビューポートの最大寸法（幅または高さ）に対してどれだけ移動したかを測定します。要素がビューポートの高さの25%分下に移動した場合、距離率は0.25になります。最終的なレイアウトシフトスコアはこれらの2つの値を乗算して計算されます：0.75 × 0.25 = 0.1875。個々のレイアウトシフトは、セッションウィンドウ（互いに1秒以内に発生するシフトのバースト、最大ウィンドウ期間は5秒）にグループ化されます。CLS指標は、すべてのシフトの合計ではなく、最大の累積スコアを持つセッションウィンドウを報告します。このウィンドウ方式により、多数の小さなシフトがあるページが、1つの大きな不安定性バーストがあるページと比較して不当にペナルティを受けることを防ぎます。

CLSの測定とスコアリングのしきい値

Googleは、Webサイト所有者が視覚的安定性のパフォーマンスを理解できるように、明確なCLSパフォーマンスしきい値を確立しています。CLSスコア0.1以下は「良好」と見なされ、サイト所有者が達成すべき目標を表します。0.1〜0.25のスコアは「改善が必要」に分類され、ページが不合格ではないものの、最適化の取り組みがユーザーエクスペリエンスを大幅に向上させることを示しています。0.25を超えるCLSスコアは「不良」と見なされ、ユーザーをイライラさせ、エンゲージメント指標に悪影響を及ぼす可能性が高い実質的な視覚的不安定性を示唆しています。これらのしきい値は、モバイルとデスクトップの両方のデバイスにセグメント化されたページ読み込みの75パーセンタイルで測定され、指標が外れ値によって歪められるのではなく、ほとんどのユーザーのエクスペリエンスを反映することを保証します。これらのしきい値を裏付ける研究には、何百万もの実際のユーザーエクスペリエンスの分析と、レイアウトシフトの深刻度とユーザー満足度指標の相関関係の調査が含まれていました。Lighthouseパフォーマンススコアは、全体の重みの25%をCLSに割り当てており、全体的なページパフォーマンス評価の重要なコンポーネントとなっています。これらのしきい値を理解することは、最適化の取り組みに優先順位を付けるために不可欠です。CLSスコアが0.25を超えるページは直ちに対処し、0.1〜0.25のページは継続的な最適化ロードマップに含める必要があります。

比較表：CLSと関連パフォーマンス指標

CLSスコア低下の一般的な原因

寸法が指定されていない画像や動画は、レイアウトシフトの最も一般的な原因の1つです。開発者がHTML画像タグにwidth属性とheight属性を含めないと、ブラウザはこれらの要素が完全に読み込まれるまでスペースを確保できません。これにより、画像がレンダリングされる際に周囲のコンテンツが予期せずシフトします。同様に、事前定義された寸法のない広告、埋め込み、iframeは、特に開発者が最終的な寸法を制御できないサードパーティの広告において、頻繁にレイアウトの不安定性を引き起こします。動的に注入されるコンテンツ（一定時間後に表示されるバナー、関連記事ウィジェット、展開されるコメントセクションなど）は、スペースがあらかじめ予約されていない場合、既存のコンテンツを押しのける可能性があります。FOIT（Flash of Invisible Text）やFOUT（Flash of Unstyled Text）を引き起こすWebフォントは、カスタムフォントが代替フォントとは異なるレンダリングを行い、テキストのリフローとレイアウトシフトを引き起こします。top、left、bottom、right、box-shadowなどのCSSプロパティを使用した不適切に実装されたアニメーションは、GPUアクセラレーションによる変換の代わりにレイアウトの再計算をトリガーします。非同期的に読み込まれるサードパーティのJavaScriptは予測不能に視覚要素を注入する可能性があり、適切なプレースホルダーなしの遅延読み込みは、ユーザーがスクロールする際に画像が最終的に読み込まれるときにコンテンツのシフトを引き起こします。これらの原因を理解することで、開発者は広範で効果のない最適化を試みるのではなく、的を絞ったソリューションを実装できるようになります。

CLS最適化のベストプラクティス

すべてのメディアに明示的な寸法を指定することは、CLS最適化の基本的な戦略です。すべての画像、動画、埋め込みコンテンツにはHTMLにwidth属性とheight属性を含め、ブラウザがコンテンツを読み込む前に適切なスペースを確保できるようにする必要があります。レスポンシブデザインの場合は、CSSアスペクト比ボックスを使用して、aspect-ratioプロパティまたはpadding-bottomテクニックを使用して、さまざまな画面サイズ間で一貫した幅と高さの比率を維持します。CSSプレースホルダーを通じて動的コンテンツのスペースを予約することで、広告、ウィジェット、およびその他の動的に読み込まれる要素が表示されたときにシフトを引き起こさないようにします。アニメーションにレイアウトプロパティの代わりにCSS変換を使用することで、レイアウトの再計算を防ぎます。transform: translate()とtransform: scale()をtop、left、および寸法変更の代わりに使用します。重要なWebフォントをプリロードし、font-display: optionalまたはfont-display: fallbackを設定することで、フォントの読み込み中にテキストが非表示になったり、レイアウトシフトを引き起こしたりするのを防ぎます。既存のコンテンツの上へのコンテンツ挿入を避けることで、ユーザーがアクティブに読んだり操作したりしている要素が押し下げられるのを防ぎます。プレースホルダーを使用した適切な遅延読み込みの実装により、画像がシフトを引き起こすのではなく、予約されたスペースに読み込まれることを保証します。サードパーティのJavaScriptをフォールドより下またはユーザー操作後に読み込むように延期することで、プライマリビューポートでの予期しないコンテンツ注入を防ぎます。これらのプラクティスを体系的に実装すると、通常、CLSスコアが不良（>0.25）から良好（≤0.1）の範囲に減少します。

CLSがユーザーエクスペリエンスとビジネス指標に与える影響

レイアウトシフトは、ユーザー満足度とビジネス成果に測定可能な形で直接影響を与えます。研究によると、予期しないレイアウトシフトにより、ユーザーは読書中に位置を見失い、直帰率の増加とページ滞在時間の減少につながります。eコマースのコンテキストでは、レイアウトシフトによりユーザーが誤った製品やリンクを誤ってクリックし、フラストレーションとカート放棄につながる可能性があります。Reliveの調査では、レイアウトシフトを実質的にゼロに削減することで、顧客体験が改善され、コンバージョン率が5%向上したことが示され、別のケーススタディでは、CLSが41%改善され、コンバージョン率が10%向上したことが実証されています。Layout Instability APIの研究によると、重大なレイアウトシフトを経験したユーザーは、意図したアクションを完了する前にページを放棄する可能性が2〜3倍高いことが示されています。ユーザーエクスペリエンスを超えて、GoogleのランキングアルゴリズムはCLSスコアが良好なページを明示的に優遇するため、視覚的安定性の最適化は即時のユーザーエクスペリエンスの利点と長期的なSEOの利点の両方を提供します。CLSスコアが低いページは、特に複数のページが良好なCore Web Vitalsを持つ競争の激しいキーワードにおいて、検索結果での視認性が低下する可能性があります。CLS最適化の累積効果（ユーザーエクスペリエンスの向上、コンバージョン率の向上、検索ランキングの改善）は、ほとんどのWebサイトにとって高いROIをもたらす最適化ターゲットとなっています。

さまざまなコンテキストでのCLS：ラボデータとフィールドデータ

ラボデータとフィールドデータでは、CLS測定に大きな違いが見られることが多く、最適化を試みる開発者に混乱を引き起こします。LighthouseやPageSpeed Insightsなどのラボツールは、制御された合成環境での初期ページ読み込み中のみCLSを測定し、通常は最初のビューポートで表示されるレイアウトシフトのみを取得します。このアプローチでは、ユーザーがスクロールしたり、メニューを操作したり、動的コンテンツの読み込みをトリガーしたりする際に発生するレイアウトシフトを見逃します。Chrome User Experience Report（CrUX）からのフィールドデータは、スクロール中やユーザー操作後に発生するシフトを含む、ページの全ライフサイクルにわたるすべてのインタラクションを通じた実際のユーザーエクスペリエンスを取得します。これにより、ページがLighthouseでは良好なCLSスコアを示しても、Search ConsoleのCore Web Vitalsレポートでは低いスコアを示す理由が説明できます。フィールドデータには、ラボテストでは遭遇しなかったシフトが含まれているのです。**Real User Monitoring（RUM）**ソリューションは、実際の訪問者に対してレイアウトシフトがいつどこで発生するかについて、デバイス固有のパターンやスクロールベースのシフトを含む詳細な洞察を提供します。開発者は、利用可能な場合はフィールドデータを優先し、真のユーザーエクスペリエンスを反映させる一方、ラボデータを使用して特定の問題を特定およびデバッグする必要があります。ラボデータとフィールドデータの不一致は、継続的なモニタリングの重要性を強調しており、1回限りのテストではなく、最適化の取り組みが合成テストシナリオではなく実際のユーザーエクスペリエンスに対処することを保証します。

CLSとAIプラットフォームモニタリング

ChatGPT、Perplexity、Google AI Overviews、ClaudeなどのAIシステムがWebコンテンツの要約や引用を生成する頻度が増えるにつれて、引用されたWebサイトの視覚的安定性がAIモニタリングプラットフォームに関連するようになってきています。AIシステムがWebサイトを引用または参照すると、クリックしてドメインにアクセスするユーザーは、ページのCLSパフォーマンスを直接体験します。CLSスコアが低いと、AIから参照されたトラフィックのユーザーエクスペリエンスに悪影響を及ぼし、直帰率が上昇し、AI引用の価値が低下する可能性があります。AmICitedなどのモニタリングツールは、AIプラットフォーム全体でのドメインの表示状況を追跡し、CLSパフォーマンスの理解は包括的なブランドモニタリング戦略の一部となります。CLSスコアが優れているWebサイトは、AIから参照された訪問者を含むすべてのトラフィックソースに優れたユーザーエクスペリエンスを提供し、視覚的安定性の最適化の重要性を強化します。AI生成コンテンツが検索結果でより一般的になるにつれて、CLSパフォーマンスと全体的なデジタルプレゼンスの関係は、すべてのトラフィックチャネルにわたってブランドの評判とユーザー満足度を維持するためにますます重要になっています。

サイトのCLS問題を監査する方法

Search ConsoleのCLSスコアが急上昇したとき、または大規模なリデザインの前に、この監査を実行してください。ラボデータではなく、フィールドデータから始めます。Search ConsoleのCore Web Vitalsレポートを開き、「改善が必要」または「不良」のバケットに該当するURLグループを特定します。これは、合成のシングルページテストではなく、CrUXを介した実際のユーザーエクスペリエンスを反映しているためです。フラグが付けられた各ページについて、Chrome DevToolsのパフォーマンスパネルを開き、ページ読み込みを記録し、Experienceセクションでフラグが付けられた「Layout Shift」エントリを探します。各エントリをクリックすると、どのDOM要素がどれだけ移動したかが正確に表示され、スコアの貢献を特定の要素に直接マッピングできます。すべての画像タグと動画タグにwidth/height属性またはaspect-ratio CSSルールが欠けていないか確認します。これは最も一般的な原因であり、明示的な寸法で修正可能です。広告枠、埋め込み、サードパーティウィジェットに予約スペースがあるかどうかを検査します。コンテナに広告が読み込まれる前の最小の高さが設定されていない場合、レンダリング時にコンテンツが押し下げられます。特にWebフォントの読み込み動作をテストします。ネットワークを3Gに制限した状態でCLSを比較します。font-displayの欠落やプリロード不足によるフォントの遅い切り替えは、高速接続では現れないシフトの一般的な原因です。最後に、既存のコンテンツの上に表示される動的に注入されたコンテンツ（Cookieバナー、プロモーションバー、遅延読み込みセクションなど）を確認します。初期レンダリング後にフォールドより上にコンテンツを挿入することは、最も影響の大きいCLSトリガーの1つであり、フロー内インジェクションではなく、プレースホルダーまたは固定位置の処理が必要です。