予期しない動きを見つける
意図した動きがすべてCLSから除外されるわけではありません。この指標が除外するのは、対象となるユーザー入力から500ミリ秒以内のシフトです。入力への反応が遅れて起きた動きは、カウントされることがあります。計算にはセッションウィンドウが使われます。一つのアニメーションでスコアを説明できると決めつけず、実際のレイアウトシフトのエントリを確認します。
確認の方法
まず、フィールドデータで、問題が実際の訪問者に影響しているかを確認します。そのうえで、レイアウトシフトのマーカーが付いたパフォーマンスのトレースで再現します。動いた要素と、動かす原因になった要素を確認します。両者が別の要素のこともあります。キャッシュ済みのフォントやアセットが、初回読み込みの問題を隠すことがあるため、キャッシュなしの初回の訪問と再訪問の両方でテストします。
実装・改善の方法
メディアには、幅と高さ、またはアスペクト比を確保します。動的なモジュールには、固定または上限のある領域を割り当てます。すでに表示されているコントロールの上にコンテンツを差し込まないようにします。フォントを読み込むとメトリクスが変わる場合は、互換性のあるフォールバックを選ぶか、フォントの読み込み戦略を調整します。変更のたびに、キーボードのフォーカスとレスポンシブのブレークポイントを再確認します。
限界とよくある間違い
指標を改善するためだけに、ユーザー操作による正当な遷移を抑え込んではいけません。目的は、読んでいる間も前後も、レイアウトが予測できることです。インターフェースから切り離された、人工的なスコアを目指すことではありません。
CLSの確認は、三つの観点に絞って行います。キャッシュなしの初回読み込み、操作後の状態、レスポンシブのブレークポイントです。初回読み込みのトレースでは、どの要素が動き、どの遅れて届いたリソースが原因かを書き留めます。操作後の状態では、ユーザーが起こした展開と、操作中のコントロールの上への予期しない挿入を区別します。ブレークポイントでは、画像、広告枠、同意バナーが、確保しておいた領域を失っていないかをテストします。具体的な修正は、画像のデータが届く前に、画像のコンテナに幅と高さ、またはアスペクト比を指定することです。そのうえで、狭い画面でも、グリッド、フォーカスの順序、スクロール位置が安定しているかを確認します。指標を下げるためだけに、むやみに広い領域を確保してはいけません。ページは、意図して作られたと感じられる必要があります。