「ページを読んでいたら突然レイアウトが崩れて、誤ってボタンを押してしまった」「CLSが悪いと指摘されたが、何をどう直せばいいのかわからない」
このような経験や疑問を抱えているWeb担当者は少なくないでしょう。
本記事では、CLS（累積レイアウトシフト）の概要・原因・スコアの改善方法について解説しました。
最後まで読めば、CLSの仕組みが理解でき、今すぐ自サイトに取り組める具体的な対策がわかるようになります。
CLSが悪いとどうなる？SEO・UXへの具体的な影響
Webサイトの表示品質を測るうえで、CLSはSEOとユーザー体験（UX）の両面に直結する重要な指標です。
スコアが基準を超えると検索順位の低下とユーザーの離脱を同時に引き起こすため、その影響の全体像を正しく把握しておくことが大切です。
CLSが悪いとどうなるかは以下のとおりです。
- スコア基準（良好1以下・不良0.25以上）が意味すること
- ランキングシグナルとしてGoogleが重視する理由
- ユーザーが誤タップ・誤クリックする典型的なシーン
それぞれ順番に見ていきましょう。
スコア基準（良好0.1以下・不良0.25以上）が意味すること
CLSのスコアはページのレイアウトのずれを数値化したもので、0に近いほど視覚的に安定したサイトと評価されます。
Googleは「良好・改善が必要・不良」の3段階で基準を設けており、それぞれの目安を整理すると以下のとおりです。
| 評価 | CLSスコア | 意味 |
| 良好 | 0.1以下 | レイアウトのずれがほぼなく、快適な閲覧体験を提供できている |
| 改善が必要 | 0.1〜0.25 | 一定のレイアウトシフトが発生しており、改善の余地がある |
| 不良 | 0.25超 | レイアウトのずれが頻繁に起き、ユーザー体験が大きく損なわれている |
0.1以下を目標値として設定することが、Googleが推奨する対応の第一歩です。
スコアはページ全体を通じて測定されるため、初期読み込み以外の場面でのずれも累積としてカウントされます。
参考：Core Web Vitals と Google 検索の検索結果について｜Google 検索セントラル（https://developers.google.com/search/docs/appearance/core-web-vitals?hl=ja） ※CLSスコアの評価基準（0.1未満を良好とする定義）を引用
関連記事：テクニカルSEOとは？優先順位の決め方と主要施策を解説
ランキングシグナルとしてGoogleが重視する理由
Googleは2021年6月より、コアウェブバイタルを検索ランキングのシグナルとして正式に組み込みました。
CLSはその3指標のひとつとして位置づけられており、ページエクスペリエンスの評価基準に含まれています。
Googleがページエクスペリエンスとして評価する主なシグナルは以下のとおりです。
- LCP（最大コンテンツの描画速度）
- INP（ページの応答速度）
- CLS（累積レイアウトシフト）
- モバイルフレンドリー
- HTTPS対応
- 煩わしいインタースティシャルがないこと
重要なのは、CLSがランキングを直接的に左右する要素ではなく、同レベルのコンテンツを持つサイト間の差別化要因として機能するという点です。
したがって、CLSの改善はコンテンツSEOと並行して取り組むべき施策のひとつとして位置づけられます。
関連記事：GoogleのSEOガイドライン6選｜チェックリスト150個紹介！
ユーザーが誤タップ・誤クリックする典型的なシーン
CLSが悪化したページで最も多いのが、ユーザーが意図しない操作をしてしまうケースです。
なぜこのような問題が起きるのかというと、読み込みのタイミングで要素の位置が突然ずれることで、クリックのターゲットが変わってしまうからです。
誤タップ・誤クリックが起きやすい代表的なシーンを挙げると、まず記事を読んでいる最中に広告バナーが遅れて表示され、テキストが下に押し下げられるパターンがあります。
また、「購入ボタン」を押そうとした瞬間にリンクがずれて「キャンセル」を押してしまうようなケースも発生しやすくなります。
さらに、スマートフォンは画面サイズが小さいため、タップ対象のずれが特に致命的になりやすく、モバイル環境でのCLS対策は特に優先度が高いといえるでしょう。
関連記事：テクニカルSEOとは？優先順位の決め方と主要施策を解説
CLSが悪化する原因と仕組みを理解する
CLSのスコアが悪化する背景には、ページを構成する要素が読み込みの遅延によって後から挿入されるという構造的な問題があります。
原因を正確に把握しておくことが、効率的な改善対策の前提条件になります。
CLSが悪化する主な原因は以下のとおりです。
- 画像・動画のサイズ未指定によるレイアウトずれ
- Webフォントの遅延読み込みで起きるFOUT/FOIT
- 広告・埋め込みコンテンツの動的挿入
- JavaScriptによる動的なDOM要素追加
各項目を詳しく解説します。
画像・動画のサイズ未指定によるレイアウトずれ
画像や動画にwidth属性とheight属性が指定されていない場合、ブラウザはデータを読み込む前に表示領域を確保できません。
そのため、データの読み込みが完了した瞬間に領域が確保され、周囲のテキストや要素が押し下げられてレイアウトシフトが発生します。
たとえば、500×300pxの画像のHTMLタグに width="500" height="300" を記述するだけで、ブラウザは事前にスペースを確保し、読み込み後のずれが発生しなくなります。
画像・動画要素には必ずサイズを明示することが、CLS改善の基本です。
CSSの aspect-ratio プロパティを活用すると、レスポンシブデザインでも縦横比を保ったままスペースを事前確保できるため、モバイル対応と組み合わせた方法として有効です。
参考：Cumulative Layout Shift（CLS）｜web.dev（https://web.dev/articles/cls?hl=ja） ※サイズ未指定の画像・動画がCLSの主因であるとする記述を引用
関連記事：SEOのおすすめChrome拡張機能20選！初心者からプロも愛用
Webフォントの遅延読み込みで起きるFOUT/FOIT
Webフォントを使用しているサイトでは、フォントの読み込み中に発生する表示の切り替えがCLSを悪化させる原因となります。
この現象には「FOUT（Flash of Unstyled Text）」と「FOIT（Flash of Invisible Text）」という2つのパターンがあり、それぞれ以下のように現れます。
- FOUT：フォント読み込み前にシステムフォントが表示され、読み込み後に切り替わってレイアウトがずれる
- FOIT：フォント読み込み完了まで文字が非表示になり、突然テキストが出現してページがずれる
フォントによって文字幅や行高が異なるため、切り替えの瞬間に周囲の要素全体が動くことが多く、CLSスコアへの影響は意外と大きくなりがちです。
この問題への対処法として最も一般的なのが font-display: swap の設定で、フォント読み込み中もシステムフォントで表示を維持しつつ、読み込み後のずれを最小化することができます。
▼ このH3のポイント
- FOUT：フォント切り替え時のレイアウトずれ
- FOIT：テキスト非表示→突然出現によるずれ
- font-display:swapで表示の安定性を確保する
関連記事：テクニカルSEOとは？優先順位の決め方と主要施策を解説
広告・埋め込みコンテンツの動的挿入
広告バナーや、YouTube動画・Googleマップなどのiframeによる埋め込みコンテンツは、CLSを悪化させる代表的な原因のひとつです。
広告ネットワークは掲載ごとに広告サイズが変わることが多く、表示スペースを事前に確保していない場合、広告が表示された瞬間に周囲のコンテンツが押し下げられます。
| コンテンツ種類 | CLSへの影響 | 代表的な発生パターン |
| レスポンシブ広告（AdSense等） | 高い | サイズ不定の広告がコンテンツを押し下げる |
| YouTube埋め込み | 中程度 | 動画の縦横比が確保されず遅延で挿入される |
| SNS埋め込み（Twitter等） | 中程度 | コンテンツ量が読み込み前に不明なためずれる |
| Google Map埋め込み | 低〜中程度 | コンテナサイズを固定すれば抑制できる |
スペースをCSSで事前に確保することが、広告起因のCLSを解消する基本的なアプローチです。
特にAdSenseなどのレスポンシブ広告は挿入サイズが実行時にしか確定しないため、広告枠の最大サイズに合わせて min-height を設定しておくことで、CLSを最小限に抑えられます。
関連記事：GoogleのSEOガイドライン6選｜チェックリスト150個紹介！
JavaScriptによる動的なDOM要素追加
JavaScriptを使って後からページにコンテンツを挿入する実装は、CLSの大きな原因になることがあります。
クッキー同意バナー・チャットウィジェット・リードジェネレーションフォームなど、ページ読み込み後にJavaScriptが動的にDOM要素を追加すると、既存のレイアウトが押し下げられてシフトが発生します。
この現象が特に起きやすいのは画面上部に後から要素が挿入されるケースで、そのすべての要素が押し下げられるため影響範囲が広くなります。
対処の基本方針は既存コンテンツを動かさない位置に新要素を挿入することで、画面下部や画面外からスライドインする設計にするのが有効です。
また、ユーザー操作（クリックやスクロール）から500ミリ秒以内に発生したレイアウトシフトはCLSスコアの対象外となるため、インタラクションを起点とした挿入タイミングに見直すことも一つの方法です。
関連記事：SEOのおすすめChrome拡張機能20選！初心者からプロも愛用
CLSスコアの計算方法と測定ツール
CLSのスコアは独自の計算式に基づいて算出されており、単純な数値ではありません。
2つの分数を掛け合わせた複合スコアの仕組みを理解したうえでツールを使いこなすことで、改善箇所の特定と効果測定が格段に行いやすくなります。
CLSスコアの計算方法と測定ツールは以下のとおりです。
- スコアの計算式：インパクト分数 × 距離分数
- PageSpeed InsightsでのCLS確認手順
- Search ConsoleのWebバイタルレポートの見方
- Chrome DevTools・Lighthouseによる詳細分析
一つずつ確認していきましょう。
スコアの計算式：インパクト分数 × 距離分数
CLSのスコアは「レイアウトシフトスコア ＝ インパクト分数 × 距離分数」という式で計算されます。
インパクト分数は、レイアウトシフトが影響した画面面積の割合で、「シフト前後の要素の位置を合わせた面積 ÷ ビューポート全体の面積」で算出されます。
距離分数は、要素が実際に移動した距離の割合で、「移動距離 ÷ ビューポートの縦幅」で計算されます。
たとえば、画面の50%を占める要素が画面高さの15%移動した場合、レイアウトシフトスコアは「0.5 × 0.15 ＝ 0.075」となり、この数値が累積した最大バーストがCLSとして記録されます。
他のコアウェブバイタル指標（LCPやINP）が時間を単位とするのに対し、CLSは単位のない純粋な割合の積であるため、より小さな数値での改善が求められます。
参考：Cumulative Layout Shift（CLS）｜web.dev（https://web.dev/articles/cls?hl=ja） ※「レイアウトシフトスコア ＝ インパクト分数 × 距離分数」の計算式を引用
関連記事：テクニカルSEOとは？優先順位の決め方と主要施策を解説
PageSpeed InsightsでのCLS確認手順
PageSpeed Insightsは、URLを入力するだけでCLSを含むコアウェブバイタルを無料で確認できるGoogleの公式ツールです。
測定の手順は以下のとおりです。
- PageSpeed Insights（https://pagespeed.web.dev/）にアクセスする
- 確認したいページのURLを入力し「分析」をクリックする
- 「パフォーマンス」セクションのCLSスコアを確認する
- 「診断」セクションで「Avoid large layout shifts」を確認し、問題のある要素を特定する
フィールドデータ（実際のユーザーデータ）とラボデータ（シミュレーション）の両方が表示されるため、実環境での状況と技術的な問題点を同時に把握できるのが強みです。
なお、Search ConsoleとPageSpeed InsightsのCLS数値が異なる場合がありますが、これはフィールドデータとラボデータの計測範囲の違いによるものです。
関連記事：SEOのおすすめChrome拡張機能20選！初心者からプロも愛用
Search ConsoleのWebバイタルレポートの見方
Google Search Consoleの「ウェブに関する主な指標」レポートは、サイト全体のCLS問題を把握するのに適したツールです。
左サイドバーの「エクスペリエンス」→「ウェブに関する主な指標」をクリックすると、モバイル・PCそれぞれのコアウェブバイタル状況が「良好・改善が必要・不良」の3段階で表示されます。
Search Consoleの特徴は、実際のChromeユーザーから収集したフィールドデータ（CrUX）を使用している点で、PageSpeed Insightsのラボデータとは計測方法が異なります。
「不良」に分類されたURLをクリックすると類似したURLがグループ表示されるため、改善優先度の高いページをまとめて特定しやすいという利点があります。
改善後に再クロールをリクエストすることで、スコア改善の反映を促すことも可能です。
関連記事：テクニカルSEOとは？優先順位の決め方と主要施策を解説
Chrome DevTools・Lighthouseによる詳細分析
Chrome DevToolsとLighthouseは、どのDOM要素がCLSを引き起こしているかを具体的に特定するための開発者向けツールです。
それぞれの特徴と主な用途を整理すると以下のとおりです。
| ツール | 特徴 | 主な用途 |
| Chrome DevTools（Performanceタブ） | 実際のページ描画を記録しフレーム単位で分析 | どの要素がいつシフトしたかをタイムラインで確認 |
| Lighthouse | 自動スコアリングと改善提案のレポート生成 | 問題箇所の一覧と対処方針の把握 |
| Web Vitals拡張機能 | リアルタイムにCLSをブラウザ上に表示 | ページ閲覧中のCLS発生をその場で確認 |
DevToolsのPerformanceタブで記録したセッションには「Layout Shift」のイベントが赤帯で表示されるため、どのタイミングでどの要素がずれたかを視覚的に特定できます。
Lighthouseは「Avoid large layout shifts」の診断項目で影響の大きい要素を列挙するため、優先的に対処すべき箇所の洗い出しに役立てられます。
関連記事：SEOのおすすめChrome拡張機能20選！初心者からプロも愛用
CLSを改善する6つの具体的な対策
CLSのスコアを改善するためには、発生原因ごとに適切な対処を行うことが重要です。
対策は技術的な実装の見直しが中心になりますが、いずれも特別な専門知識がなくても取り組みやすい内容ばかりです。
CLSを改善する6つの具体的な対策は以下のとおりです。
- 画像・動画にwidthとheightを明示指定する
- Webフォントの読み込みをfont-display:swapで制御する
- 広告・埋め込み要素のスペースをCSSで事前確保する
- 動的に追加されるDOMコンテンツの挿入位置を見直す
- アニメーションはtransformプロパティで実装する
- 無限スクロールとカルーセルの実装を点検する
各対策の詳細を解説します。
① 画像・動画にwidthとheightを明示指定する
画像タグには必ず width 属性と height 属性を記述し、ブラウザが読み込み前からスペースを確保できるようにすることがCLS対策の基本です。
この設定を怠ると、画像データの読み込み完了後に突然スペースが確保されてしまい、ページ全体のレイアウトがずれる原因になります。
記述方法としては、<img src="image.jpg" width="800" height="450" alt="説明"> のように、実際の画像サイズと一致する数値を指定します。
レスポンシブデザインの場合は width="100%" だけを指定するのではなく、aspect-ratio CSSプロパティと組み合わせることで縦横比を保ったスペース確保が実現できます。
モダンブラウザはwidthとheightの比率からアスペクト比を自動計算するため、実寸と同じ比率であれば厳密に同じ数値でなくても問題ありません。
関連記事：テクニカルSEOとは？優先順位の決め方と主要施策を解説
② Webフォントの読み込みをfont-display:swapで制御する
Webフォントによるレイアウトシフトを抑制するには、CSSの font-display プロパティを活用することが効果的です。
font-display: swap を設定すると、Webフォントの読み込み中はシステムフォントで表示を続け、読み込み完了後にWebフォントへ切り替わります。
このとき、フォントの切り替えによるわずかなずれが発生することがありますが、font-display: optional を使うとフォント未読み込みならシステムフォントをそのまま使用し続けるため、CLSをほぼゼロに抑えられます。
また、重要なWebフォントは <link rel="preload"> で早期読み込みを指示しておくと、フォント切り替え自体を起こりにくくする効果があります。
Google Fontsを使用している場合は、URLパラメータに &display=swap を追加するだけで font-display: swap が適用されるため、実装コストは低くなります。
関連記事：SEOのおすすめChrome拡張機能20選！初心者からプロも愛用
③ 広告・埋め込み要素のスペースをCSSで事前確保する
広告枠や動画・マップなどの埋め込みコンテンツによるCLSを防ぐには、コンテンツが実際に読み込まれる前から表示スペースをCSSで確保しておくことが重要です。
具体的な実装方法を整理すると以下のとおりです。
| 対策方法 | 実装例 | 効果 |
| 固定高さのプレースホルダー設定 | min-height: 250px | 読み込み前から枠を確保してシフトを防ぐ |
| aspect-ratioによるアスペクト比固定 | aspect-ratio: 16/9 | 動画やマップに最適なレスポンシブ対応 |
| コンテナのoverflow:hidden設定 | overflow: hidden | コンテンツ超過によるはみ出しを防止 |
事前にスペースを確保しておくことで、コンテンツが読み込まれても既存要素が動かないという状態を実現できます。
AdSenseなどのレスポンシブ広告は広告サイズが実行時まで確定しないため、min-height を使用し、広告ユニットのドキュメントで推奨される最大サイズを参考に設定するとよいでしょう。
関連記事：GoogleのSEOガイドライン6選｜チェックリスト150個紹介！
④ 動的に追加されるDOMコンテンツの挿入位置を見直す
JavaScriptで動的にDOMコンテンツを追加する際は、既存コンテンツを押し下げない挿入位置を選ぶことがCLS対策の基本になります。
既存のコンテンツの上や途中に要素を追加すると、それより下の全要素が移動するため、スコアへの影響が大きくなります。
挿入位置の見直しにあたって確認すべき主なポイントは以下のとおりです。
- 画面上部（ヘッダー付近）への動的挿入を避ける
- 既存コンテンツの途中ではなく末尾への追加を基本とする
- スティッキーバナーなど画面下部への表示を検討する
- クッキーバナーは画面全体のレイアウトに影響しない形式を採用する
ユーザー操作から500ミリ秒以内に発生したシフトはCLSスコアの対象外になるため、クリックやタップをトリガーにして要素を追加する設計にすることも、スコア改善の観点から有効です。
まずは自サイトのページを開発者ツールで確認し、動的挿入が上部で発生していないかを確認することが最初のステップです。
関連記事：テクニカルSEOとは？優先順位の決め方と主要施策を解説
⑤ アニメーションはtransformプロパティで実装する
CSSアニメーションを使用する際、実装方法によってCLSへの影響が大きく変わります。
top・left・width・height などのプロパティを直接変化させるアニメーションはレイアウトの再計算を引き起こし、CLSスコアを悪化させる可能性があります。
代わりにtransform: translate() や transform: scale() などのtransformプロパティを使うとレイアウト再計算が発生しないため、視覚的な動きを実現しながらCLSへの影響をゼロに抑えられます。
たとえば、要素を上下に動かす場合は top: 20px の変化アニメーションより transform: translateY(20px) を使うことが推奨されます。
transformはGPUで処理されるため、パフォーマンス面でも優れており、CLSとページ全体の表示速度改善を同時に実現できます。
関連記事：SEOのおすすめChrome拡張機能20選！初心者からプロも愛用
⑥ 無限スクロールとカルーセルの実装を点検する
無限スクロールやカルーセル（スライダー）は、実装方法を誤るとCLSの大きな発生源になりやすい機能です。
無限スクロールでは、スクロール時に新しいコンテンツが挿入されることで既存コンテンツが押し下げられ、CLSスコアが急激に悪化するケースがあります。
点検すべき主なポイントは以下のとおりです。
- 無限スクロールで追加される各アイテムに固定の高さを設定する
- 追加コンテンツが読み込み前から高さを持てるようプレースホルダーを配置する
- カルーセルの各スライドに同一サイズを設定し、読み込み時にサイズが変動しないようにする
- カルーセルの自動スクロールは transform を使用し、top/leftプロパティを変化させない
レイアウトに関わる要素はサイズを固定または事前確保するという原則が、無限スクロールとカルーセルの両方に共通して適用されます。
導入しているプラグインやライブラリが古い場合はCLS対応が不十分なことがあるため、定期的にバージョンを確認することも重要です。
関連記事：テクニカルSEOとは？優先順位の決め方と主要施策を解説
WordPressサイト特有のCLS対策
WordPressサイトは世界中で広く使われている反面、テーマやプラグインの実装品質によってCLSが左右されやすいという特徴があります。
WordPressならではのCLS問題を把握し、設定と管理で防ぐアプローチを取ることが効率的です。
WordPressサイト特有のCLS対策は以下のとおりです。
- テーマ・プラグインが引き起こしやすいCLS問題
- アイキャッチ画像とメディアライブラリの設定ポイント
- AdSenseなど広告プラグインの対応方法
各ポイントをしっかり把握しておきましょう。
テーマ・プラグインが引き起こしやすいCLS問題
WordPressのテーマやプラグインは、それぞれが独自のJavaScriptやCSSを読み込むため、意図しないレイアウトシフトを引き起こしやすい環境です。
特に問題が起きやすいのは、ページビルダー系プラグイン（Elementor・Visual Composerなど）や、SNSシェアボタンプラグインなど動的にDOMを操作する種類です。
| 問題が起きやすいプラグイン種類 | CLSへの影響 | 対処の方向性 |
| ページビルダー（Elementor等） | 中〜高 | テーマが出力するCSSを確認・整理する |
| ポップアップ・クッキーバナー | 高 | 画面下部配置または事前スペース確保 |
| SNSボタンプラグイン | 中程度 | 外部スクリプトの遅延読み込みを設定 |
| レビュー・評価プラグイン | 低〜中 | 星アイコンのサイズを固定指定する |
まずSearch ConsoleやPageSpeed Insightsで不良ページを洗い出し、問題の多いプラグインを特定することが対策の出発点になります。
プラグインのバージョンアップやCLS対応の代替プラグインへの乗り換えを検討することで、根本的な解決につながる場合も多くあります。
関連記事：GoogleのSEOガイドライン6選｜チェックリスト150個紹介！
アイキャッチ画像とメディアライブラリの設定ポイント
WordPressのアイキャッチ画像は、テーマの実装次第でCLSの主要因になることがあります。
多くのテーマではアイキャッチ画像を <img> タグで出力しますが、サイズ属性が省略されている場合、ブラウザは画像の縦横比を読み込み前に判断できません。
設定で確認すべき主なポイントは以下のとおりです。
- テーマのphpまたはテーマカスタマイザーでアイキャッチのサイズを固定登録する
- メディアライブラリにアップロードする画像は、事前にリサイズして一定の縦横比に統一する
- テーマのアイキャッチ出力コードに width と height 属性が含まれているか確認する
- add_image_size() で登録したサイズを使用し、出力側でも get_the_post_thumbnail() のオプションを指定する
画像の縦横比を統一しておくことが、アイキャッチ由来のCLSを根本から防ぐ最も効果的な方法です。
WordPressのSEO系プラグイン（Yoast SEO・RankMathなど）はアイキャッチの最適化を助ける機能を持っているため、あわせて活用するとよいでしょう。
関連記事：SEOのおすすめChrome拡張機能20選！初心者からプロも愛用
AdSenseなど広告プラグインの対応方法
WordPressでGoogle AdSenseなどの広告を配置する場合、広告枠のサイズが読み込み前に確定しないことがCLSの主な原因になります。
広告プラグインを使用している場合、出力されるHTMLやCSSに width と height の指定が含まれているかをまず確認することが重要です。
具体的な対処方針としては、広告挿入ウィジェットの周囲に min-height を設定したラッパー要素を追加することで、広告が読み込まれていない間も枠のスペースを事前確保できるようになります。
AdSense Auto Adsは自動的にページ内の適切な位置を選んで広告を挿入しますが、この仕組みがCLSを悪化させることが多いため、Auto Adsの代わりにディスプレイユニット（手動配置）を使用することを検討するとよいでしょう。
WordPressのキャッシュ系プラグイン（WP Super Cache・W3 Total Cacheなど）の設定も確認し、スクリプトの遅延読み込みがCLSに影響していないかをPageSpeed Insightsで確認することも大切です。
関連記事：テクニカルSEOとは？優先順位の決め方と主要施策を解説
CLSに関するよくある質問
CLSに関するよくある質問について解説します。
CLSはSEOの直接的なランキング要因？
CLSはコアウェブバイタルの一指標として、Googleのページエクスペリエンスシグナルに含まれているため、SEOの間接的なランキング要因に位置づけられています。
ただし、Googleはコンテンツの質を最優先としており、CLSが良好でもコンテンツが劣れば上位表示は困難です。
CLSを改善することは、同等のコンテンツ品質を持つ競合との差別化要因として機能するという認識が正確です。
モバイルとPCでCLSスコアが大きく違うのはなぜ？
画面サイズの違いにより、モバイルとPCではレイアウトのずれの影響範囲や発生パターンが異なります。
スマートフォンは画面の縦幅が小さいため、同じ移動量でも距離分数が大きくなりやすく、PCよりCLSスコアが高くなりやすいという特徴があります。
モバイルとPCを別々に計測し、それぞれの問題箇所を個別に対策することが重要です。
Search ConsoleとPageSpeed InsightsのCLS数値がズレるのはなぜ？
両ツールの数値が異なるのは、計測方法の違いによるものです。
Search ConsoleはChromeユーザーから収集した実際のフィールドデータ（CrUX）を使用し、PageSpeed Insightsはラボ環境でのシミュレーションの両方を表示します。
フィールドデータはページを開いてから閉じるまでの全シフトを測定するのに対し、ラボデータは初期読み込み時のシフトのみを計測するため、数値に差が生じます。
WordPressはCLS問題が起きにくいって本当？
これは誤解です。
WordPressはCMSの仕組み上、テーマやプラグインが多数のスクリプトを読み込むため、CLSが発生しやすい環境といえます。
特に広告プラグインやSNSボタン、ポップアップ系プラグインはCLSに大きな影響を与えることが多いため、定期的なモニタリングが欠かせません。
まとめ｜CLSを改善してサイトの表示品質を高めよう
本記事では、CLS（累積レイアウトシフト）の概要・悪化の原因・スコアの計算方法・具体的な改善対策について解説しました。
CLSはSEOの直接的な決定要因ではありませんが、ページエクスペリエンスシグナルとしてGoogleが評価する指標であり、同等のコンテンツ品質を持つサイトとの差別化に機能します。
画像サイズの明示指定・フォント設定の見直し・広告枠のスペース確保など、いずれも今すぐ取り組める施策です。
まずはPageSpeed InsightsかSearch Consoleで自サイトのCLSスコアを確認し、最も影響の大きい問題から一つずつ対処していくことで、確実に表示品質を高めることができます。