Search Console の CLS 問題を修正するための最良のヒント

Table of contents

CLS の背景

Cumulative Layout Shiftは予期しないレイアウトの動きを測定します。ページが読み込まれているとき、またはインタラクション中に可視要素が位置を移動するたびに、レイアウトシフトスコアが計算されます。その累積スコアがCLSです。

よくある原因：

• 明示的な width および height 属性のない画像またはiframe
• 周囲のコンテンツがレンダリングされた後に拡張する広告
• 既存コンテンツの上に挿入される動的に注入されたコンテンツ（バナー、Cookieの通知、チャットウィジェット）
• 読み込み時にフラッシュとリフローを引き起こすWebフォント（FOUT/FOIT）
• 初期レンダリング後にUI要素を追加するサードパーティのJavaScript

関連記事：Search Console の LCP 問題を修正する方法

CLS の測定

Google Search Console

Search ConsoleのCore Web Vitalsレポートが出発点です。「不良」（CLS ≥ 0.25）または「改善が必要」（0.1–0.25）としてフラグが立てられたページを、問題の種類別にグループ化して表示します。このレポートを使用して、影響を受けるURLのリストを取得してください。

PageSpeed Insights

PageSpeed Insights（PSI）は、ラボデータ（Lighthouseシミュレーション）とChrome UX Report（CrUX）を通じた実際のユーザーからのフィールドデータの両方を表示します。フィールドデータはランキング目的でより重要です——実際のユーザーエクスペリエンスを反映しており、合成テストだけではありません。

PSIは読み込み時の初期ビューポートのみをシミュレートするため、スクロールやユーザーインタラクションによってトリガーされるCLSを検出できない場合があります。そのような場合はChrome DevToolsを使用してください。

Chrome DevTools と Web Vitals 拡張機能

Web Vitals Chrome拡張機能（Googleがメンテナンス）は、ページをスクロールして操作しながらリアルタイムのCLSスコアを表示します。これはレイアウトシフトを手動で再現する最速の方法です。Chrome DevToolsのPerformanceパネルも、どの要素がどれだけシフトしたかを示す注釈とともにレイアウトシフトレコードをハイライトします。

CLS 問題の修正

すべての画像と iframe に width と height を追加する

これはほとんどのサイトで最も効果の高い修正です。明示的なサイズがないと、ブラウザは画像が読み込まれる間にどれだけのスペースを確保すればよいかわからず、画像が表示されたときに下のコンテンツが押し下げられます。

<!-- 悪い例：サイズなし -->
<img src="photo.jpg" alt="…">

<!-- 良い例：明示的なサイズでブラウザがスペースを確保できる -->
<img src="photo.jpg" alt="…" width="800" height="450">

最新のCSS（aspect-ratio）はレスポンシブ画像に同じ効果をもたらしますが、HTMLで width と height 属性を明示的に設定する方法が最も信頼性が高く、ほとんどのモダンフレームワークとCMSの画像パイプラインが自動的に処理します。

広告のスペースを確保する

広告は、マネタイズされたサイトで高いCLSの最も一般的な原因です。広告ネットワークは動的なサイズを配信するため、スペースが確保されていないと広告が読み込まれたときにページがリフローします。

1. 広告タグが読み込まれる前に、固定コンテナ（最も一般的な広告サイズに合わせたmin-height）を確保してください。
2. 広告が配信されない場合でもコンテナを折りたたまないでください——空のプレースホルダーで二度目のリフローを防ぎます。
3. ビューポートの上部近くに配置された広告には特に注意してください。折り畳み線より上に挿入された非スティッキー広告は最悪のCLSスコアを引き起こします。
4. 広告ネットワークの過去のインプレッションデータを使用して、各スロットで最も一般的な広告サイズを特定し、それに応じてコンテナをサイズ調整してください。

既存コンテンツの上にコンテンツを挿入しない

非同期で読み込まれ、既存のコンテンツの上に表示されるCookie同意バナー、通知プロンプト、チャットウィジェットは、CLSの頻繁な原因です。対策：

• 固定位置のオーバーレイに読み込む（ドキュメントフローに影響しません）。
• インラインで表示する必要がある場合は、レイアウト内にスペースを事前確保する。
• Cookieバナーについては特に、画面下部への配置を検討してください——CLSを完全に回避でき、コンプライアンス的にも同等に有効です。

Webフォントの読み込みを修正する（FOIT と FOUT）

FOIT（Flash of Invisible Text）は、カスタムフォントが読み込まれるまでブラウザがテキストを非表示にすると発生します。FOUT（Flash of Unstyled Text）は、最初にフォールバックフォントが表示され、その後交換されるときに発生します——フォントメトリクスの違いがレイアウトシフトを引き起こします。

解決策は、重要なフォントに <link rel="preload"> を組み合わせた font-display: swap です：

<link rel="preload" href="/fonts/my-font.woff2" as="font" type="font/woff2" crossorigin>

@font-face {
  font-family: 'MyFont';
  src: url('/fonts/my-font.woff2') format('woff2');
  font-display: swap;
}

font-display: swap はFOIT（不可視のテキスト）ではなくFOUT（可視だがスタイルなしのテキスト）を引き起こします。テキストがすぐに表示されるためCLSには有利です。スワップのメトリクスへの影響をさらに低減するには、CSSプロパティ size-adjust を使用してフォールバックフォントのメトリクスをカスタムフォントに合わせてください——カスタムフォントが適用される際のリフローを最小化します。

サードパーティの JavaScript

サードパーティのスクリプト（シェアボタン、コメントウィジェット、ライブチャット、アナリティクスポップアップ）は非同期で読み込まれ、ページが既にレンダリングされた後にUI要素を注入することがよくあります。CLSへの影響を最小化するには：

• 可能な限り、サードパーティの視覚要素を初期ビューポートの下に押し下げてください——ページ下部のコンテンツはユーザーが到達するまでに読み込む時間が多くあります。
• スクリプトが実行される前にコンテナのサイズを事前定義して、ブラウザがどれだけのスペースを確保すべきかを事前に知っておけるようにしてください。
• Chrome DevToolsのNetworkタブをサードパーティのオリジンでフィルタリングして、レイアウトシフトに寄与しているスクリプトを特定してください。

遅延読み込みとプレースホルダー

遅延読み込みは画像がビューポートに近づくまで読み込みを遅らせ、帯域幅を節約します。しかし、プレースホルダーが設定されていない場合、画像コンテナは高さゼロに折りたたまれ、画像が読み込まれたときに突然開きます。

遅延読み込みされる要素には常に明示的なサイズまたはCSSで設定された aspect-ratio があることを確認してください——ブラウザが画像の読み込み前から正しいスペースを確保できるようにします。これはネイティブの loading="lazy" とJavaScriptベースの遅延読み込みの両方に適用されます。

CLS — 2026年 よくある質問

2026年もFIDはランキングシグナルですか？

いいえ。GoogleはFID（First Input Delay）をCore Web Vitalとして2024年3月に正式に廃止し、INP（Interaction to Next Paint）に置き換えました。現在のCWVトリオはLCP、INP、CLSです。まだFIDを参照している社内ドキュメントやツールを更新してください。

目標とすべき良いCLSスコアは？

Googleのしきい値：0.1未満が「良好」、0.1–0.25が「改善が必要」、0.25超が「不良」です。0.1未満を目指してください。スコアはCrUXフィールドデータのページ読み込みの75パーセンタイルで測定されます。

CLSはランキングに影響しますか？

はい、ただし多くのシグナルの1つです。Core Web VitalsはPageExperienceのランキング要因として2021年半ばから適用されています。CLSが悪くても強力なページが沈むことはありませんが、接戦での決め手になる可能性があり、バウンス率やセッションの深度などのユーザーエンゲージメント指標にも直接悪影響を与えます。

PSIスコアではCLSが良好だがSearch Consoleがページを不良と判定している——どちらが正しいですか？

矛盾する場合は、PSIのラボデータよりSearch Console（フィールドデータ）を信頼してください。PSIのラボテストは初期ビューポートの読み込みのみをシミュレートします——ユーザーのスクロール、低速接続でのフォントスワップ、インタラクション後に読み込まれる広告によってトリガーされるCLSは見逃します。Search ConsoleのCrUXフィールドデータは、実際の条件での実際のユーザーを反映しています。

関連記事：

• Search Console の LCP 問題を修正する方法
• ウェブサイトの速度を最適化する方法
• テクニカル SEO 監査

短縮版

これを読んでいる理由が、ここで説明するワークフローが一週間を食いつぶしているからであれば、それはまさに私がAIエージェントを構築するようなループです。同時に2つの開発スロットが空いています。

2026年5月 更新情報

2026年のGoogleのテーマはAI Overviewsがあらゆる場所に：2023年のSGE実験は2024年5月にデフォルト機能として卒業し、現在は**米国の情報検索クエリの約60%**に表示されています。SEOと広告運営者にとって：

• AI Overviewsがある検索クエリの自然検索CTRは平均15〜30%低下。Ahrefs、Authoritasなどの公開研究（2024〜25年データ）より。
• Google AdsはいくつかのPMax機能をAI-powered Searchとしてリブランド。キャンペーン管理UIはAI入札の提案をデフォルトで表示するようになりました。
• Search Consoleは2025年末に「AI Overviewインプレッション」フィルターを追加——このサイトの記事でGSCレポートを参照しているものはプレイブックの更新が必要です。
• Googleの広告収益は2024年に約2,650億ドルを突破。Searchは引き続きAlphabet全体収益の約57%を占めています。

2026年の「Googleの収益源」の答え：依然として検索広告（支配的）、ただしYouTube広告、Cloud、サブスクリプション（YouTube Premium + Google One）も今や重要な収益ラインとなっています。