良好なCLSスコアの目安は?

0.1以下が「良好」です。0.1〜0.25は改善が必要で、0.25を超えると「不良」とされます。このスコアは単位を持たず、表示中の要素がどれだけ移動したかを、ビューポートに占める割合で重み付けして合計したものです。

レイアウトシフトが速く起きた場合もカウントされますか?

はい。CLSは速度ではなく、移動距離と面積のみを問題にします。大きな要素が一瞬でずれても、ゆっくりずれた場合と同じスコアが加算されます。カウントから除外される唯一のシフトは、クリックやタップなどのユーザー操作から500ミリ秒以内に発生したものだけです。

なぜローカルではCLSが問題なさそうなのに、Scanverraのレポートでは悪く見えるのですか?

高速な回線でのローカルテストでは、シフトに気づく前に広告やフォント、埋め込みコンテンツが読み込まれてしまうことがよくあります。Scanverraは稼働中のURLに対して実際の描画順序を計測するため、現実的なネットワーク条件でのみ表面化するシフトも検出できます。

固定ヘッダーやCookieバナーはCLSにカウントされますか?

すでに描画済みのコンテンツをあとから押し下げる場合のみカウントされます。コンテンツにオーバーレイ表示されるCookieバナーや、最初の描画時点からスペースが確保されているものはカウントされません。一方、スライドインしてページのコンテンツを押しのけるものはカウントされます。

累積レイアウトシフト(CLS)を改善する方法

ページがずれてしまう理由

CLSの問題のほとんどは、次の3つのいずれかが原因です。

サイズが確保されていない画像やiframe。 ブラウザが画像の読み込み前にそのサイズを把握していない場合、その要素は高さ0として描画され、画像が届いた瞬間にその下にあるすべてが下方向に押し出されます。
既存のコンテンツより上に挿入されるコンテンツ。 初期描画のあとにDOMへ挿入される広告、プロモーションバー、Cookieバナーなどは、それより下にあるすべてのコンテンツを押し下げます。
切り替え時にテキストを再フローさせるWebフォント。 最初にフォールバックフォントが描画され、その後本来のフォントが読み込まれて幅や高さの異なるフォントに切り替わると、その行に触れるすべてのテキストが再フローします。

何がずれているかを特定する方法

Scanverraのパフォーマンスチェックは、Googleのフィールドデータでもベースとなっているのと同じcumulative-layout-shift指標を使い、稼働中のURLに対する実際のLighthouse実行結果から直接CLSをスコアリングします。値が高い場合、Scanverraはこれを単なる数値ではなく、名前の付いた独立した問題として検出します。というのも、不安定なレイアウトはそれ自体、別の問題も引き起こすからです。ちょうど移動してしまったボタンをクリックしようとするAIエージェントや自動化ツールは、誤った要素を対象にしてしまいます。

実際にずれている要素を特定するには、Chrome DevToolsのPerformanceパネルが役立ちます。ページ読み込みを記録すると、実際に移動したノードとその移動量を含む「Layout Shift」エントリが記録されます。パネルを開いてページ読み込みを記録し、Experienceトラック内の赤いレイアウトシフトマーカーを探してください。

修正方法

1. 明示的なサイズ指定でスペースを確保する

すべての画像、動画、iframeは、幅と高さを宣言する(あるいは最新のCSS aspect-ratioを使う)ことで、リソースが届く前にブラウザが正しいボックスを確保できるようにしてください。

明示的なwidth/heightで事前にボックスを確保するtypescript

1<img
2  src="/product.webp"
3  alt="Wireless keyboard, top view"
4  width={640}
5  height={480}
6  loading="lazy"
7/>

正確なピクセルサイズが変動する場合(レスポンシブな埋め込みなど)は、代わりにCSSを使ってください。

aspect-ratioなら固定ピクセルサイズなしでスペースを確保できるcss

1.video-embed {
2  width: 100%;
3  aspect-ratio: 16 / 9;
4}

2. 動的に挿入されるコンテンツには、固定の高さのスロットを用意する

Cookieバナー、広告枠、プロモーションバーなどを初期描画後に挿入せざるを得ない場合は、それが届いたときにコンテンツを押し下げるのではなく、最初からコンテナに固定のmin-heightを確保しておいてください。空のプレースホルダーボックスだけでもシフトを防げます。

3. フォールバックフォントの寸法を、本来のフォントに合わせる

font-display: swapを、x-heightや平均文字幅が本来のフォントに近いフォールバックフォントと組み合わせて使ってください(Fontaineのようなツールや@font-faceブロック内での手動のsize-adjust調整でこれらを一致させられます)。そうすることで、切り替え時に目に見える形で行が再フローするのを防げます。

4. ユーザーの現在のスクロール位置より上にコンテンツを挿入しない

「新しい投稿があります」のようなバナーなど、新しいコンテンツを表示する必要がある場合は、すでに表示されている内容の上に挿入するのではなく、フォールドより下に挿入するか、ユーザーの操作によって表示させるようにしてください。

ScanverraがCLSの問題をどう検出するか

Scanverraは、稼働中のURLに対して実際のLighthouseパスを実行し、そこから実際のcumulative-layout-shiftの値を取得します。これはLCPやTTFBの計測と同じ実行結果であり、値が高い場合には専用の問題として検出されます。この説明は、人間であれ自動化されたものであれ、ページを操作しようとする対象にとってレイアウトの不安定さが具体的にどう問題になるかに紐づいています。