ページを読んでいる途中で画像や広告が後から入り込み、文章やボタンの位置が突然ずれることがあります。
CLSは、こうした予期しないレイアウトのずれ（Layout Shift）がどれだけ発生したかを見るCore Web Vitalsの指標です。表示が速くても、読んでいる文字や押そうとしたボタンが動くサイトは使いにくいため、視覚的な安定性を確認する目的で使います。
30秒でわかる結論
- CLSはCumulative Layout Shiftの略で、ページの視覚的な安定性を測る指標
- 2026年10月時点の目安は、0.1以下が良好、0.1超～0.25以下が改善必要、0.25超が不良
- Googleではモバイル・デスクトップそれぞれの75パーセンタイルで評価する
- 主な原因は、サイズ未指定の画像・広告・iframe、後から挿入されるコンテンツ、Webフォントなど
- WordPressではアイキャッチ画像、広告、埋め込み、テーマ・プラグインの動的表示を確認する
- 画像にwidth・heightやaspect-ratioで表示領域を先に確保すると改善しやすい
- CLS改善はSEOだけでなく、誤クリックや読みにくさを減らすためにも重要
CLSとは？
CLSはCumulative Layout Shiftの略です。
Core Web Vitalsの1つで、ページ表示中に起こる「予期しないレイアウトの移動」を数値化します。
CLSが悪化する例
記事を読んでいる途中で広告が後から読み込まれ、本文が下へ押し下げられる。押そうとしていた「購入」ボタンの位置がずれ、別のボタンを誤って押してしまう。
このような動きは表示速度とは別の問題です。ページが2秒で表示されても、その後に内容が何度も動けば使いやすいとは言えません。
CLSの良好な数値は？
Google・web.devが示す基準では、CLSは次のように分類されます。
| CLS | 判定 |
|---|---|
| 0.1以下 | 良好 |
| 0.1超～0.25以下 | 改善が必要 |
| 0.25超 | 不良 |
Googleは、実際のユーザー体験を評価する際、モバイル・デスクトップごとにページ読み込みの75パーセンタイルを見ることを推奨しています。
75パーセンタイルとは
100回の閲覧データを小さい順に並べたとき、おおむね75番目付近の値です。平均値だけでなく、多くの利用者が良好な体験を得られているかを見る考え方です。
CLSは秒ではなくスコアで測る
LCPやINPは秒・ミリ秒で表しますが、CLSは時間ではありません。
レイアウトがどのくらいの範囲で、どのくらい移動したかを基に計算される単位のないスコアです。
レイアウトシフトスコア ＝ impact fraction × distance fraction
簡単に言えば、「画面のどれだけ広い範囲が影響を受けたか」と「どれだけ大きく動いたか」を組み合わせて算出します。
初心者は計算式を暗記しなくてよい
実際の運用ではPageSpeed InsightsやChrome DevToolsなどが自動計測します。「0.1以下を目指す」「どの要素が動いているかを探す」の2点を覚えれば十分です。
CLSはページ内のずれを全部足す？
現在のCLSは、ページ滞在中に発生したすべてのずれを無制限に足し続ける方式ではありません。
レイアウトシフトが1秒未満の間隔で連続して起こるまとまりを「セッションウィンドウ」として扱い、そのウィンドウは最大5秒で区切られます。
その中で最もスコアが大きいウィンドウがCLSとして使われます。
古い解説では「ページ滞在中のすべてのレイアウトシフトを合計する」と説明されている場合がありますが、現在はセッションウィンドウ方式です。
CLSが悪化する主な原因
web.devでは、CLS悪化の代表的な原因として次の項目を挙げています。
| 原因 | 起こること |
|---|---|
| サイズ未指定の画像 | 画像読み込み後に本文が押し下げられる |
| 広告・iframe・埋め込み | 後から高さが決まり周囲が動く |
| 動的に追加されるコンテンツ | 通知・バナーなどが途中から挿入される |
| Webフォント | フォント切り替えで文字幅・行高が変わる |
原因1．画像サイズを指定していない
画像の幅・高さが分からない状態でHTMLを読み込むと、ブラウザは画像が届くまで必要な表示スペースを確保できないことがあります。
その後画像が読み込まれると、画像分の高さが突然追加され、下にある本文が押し下げられます。
悪化するイメージ
最初は見出しの直後に本文が表示 → 画像ロード完了 → 300pxの画像が途中に入る → 本文全体が300px下へ移動。
対策は、画像にwidthとheightを指定する、またはCSSのaspect-ratioなどで事前に画像領域を確保することです。
WordPressで確認すること
- テーマが画像サイズ属性を適切に出力しているか
- 独自HTMLでwidth・heightを削除していないか
- 遅延読み込み画像にも表示領域が確保されているか
- 記事上部の大きな画像でずれが起きていないか
原因2．広告の表示領域を確保していない
広告は外部サーバーから後から読み込まれることが多いため、CLSの原因になりやすい要素です。
広告ロード前は高さ0pxなのに、読み込み後に250pxの広告が表示されれば、その下のコンテンツが大きく動きます。
先に広告枠を確保する
広告が表示される前から一定の高さを確保しておけば、読み込み後も周囲の要素が動きにくくなります。
広告が配信されなかった場合も考える
大きな空白が残りすぎないよう、広告サービスの推奨実装と自サイトのレイアウトを両方確認してください。
原因3．YouTube・SNSなどの埋め込み
YouTube動画、地図、SNS投稿などのiframeや埋め込みコンテンツも、読み込み後に高さが決まるとCLSが発生します。
画像と同様に、読み込み前からアスペクト比や高さを確保しておくことが基本です。
動画なら16:9を確保
幅800pxの16:9動画なら、高さは約450pxです。読み込み前からこの比率の領域を確保するとレイアウトの移動を抑えやすくなります。
原因4．後から挿入されるバナーや通知
JavaScriptやプラグインによって、ページ上部へ後からコンテンツが追加される場合があります。
- Cookie同意バナー
- キャンペーン告知
- 会員登録案内
- アプリ誘導バナー
- おすすめ記事
既存コンテンツの上に新しい要素を挿入すると、画面全体が押し下げられることがあります。
既存コンテンツを押さない設計にする
必要に応じて固定表示・オーバーレイ表示を検討する、または最初から必要な高さを予約しておくとCLSを抑えやすくなります。
原因5．Webフォントの読み込み
最初に代替フォントで文章を表示し、Webフォント読み込み後に別フォントへ切り替わると、文字幅や行高が変わることがあります。
その結果、1行だった見出しが2行になったり、段落の高さが変わったりして周囲のコンテンツが移動します。
改善の考え方
- 不要なWebフォントを減らす
- 必要なフォントを適切にプリロードする
- 代替フォントと本番フォントのサイズ差を抑える
- フォント配信速度を確認する
WordPressでCLSが悪化しやすい場所
| 場所 | 確認ポイント |
|---|---|
| アイキャッチ画像 | 画像領域が事前確保されているか |
| 広告 | 広告枠の高さが確保されているか |
| 関連記事 | 後から挿入されて本文を押していないか |
| 目次 | JavaScript生成後に高さが変わっていないか |
| Cookieバナー | ページ上部へ後挿入されていないか |
| Webフォント | 読み込み後に文字組みが大きく変わらないか |
| スライダー | 画像ごとに高さが変化していないか |
CLSを確認する方法
PageSpeed Insights
PageSpeed Insightsでは、実ユーザーデータが十分にある場合、Chrome UX Report（CrUX）を基にCLSを確認できます。
また、Lighthouseによるラボ計測でもレイアウトシフトの診断ができます。
Search Console
Search ConsoleのCore Web Vitalsレポートでは、CLSを含む実ユーザーデータを基に問題のあるURLグループを確認できます。
Chrome DevTools
より詳しく原因を調べる場合はChrome DevToolsのPerformance機能などで、どの要素がレイアウトシフトを起こしたか確認します。
フィールドデータとラボデータの違い
| 種類 | 特徴 |
|---|---|
| フィールドデータ | 実際の利用者が閲覧したときのデータ |
| ラボデータ | 特定条件でテスト実行したデータ |
CLSはユーザーの閲覧環境や広告表示、端末サイズによって変わるため、実ユーザーデータとラボテストで数値が違う場合があります。
PageSpeed Insightsの実ユーザーデータは直近28日間のCrUXデータを基に表示されます。修正直後にフィールドデータが即座に改善するとは限りません。
CLSを改善する基本手順
画像のCLSを改善する方法
WordPressでは画像由来のCLSが比較的確認しやすいため、最初にチェックします。
確認項目
- 画像タグにwidth・heightが入っているか
- CSSで画像の比率を壊していないか
- 遅延読み込み前にスペースが確保されているか
- レスポンシブ画像でもアスペクト比が維持されているか
WordPress本体は通常、メディアライブラリから挿入した画像にサイズ情報を出力します。独自テーマやHTML編集で属性を削っていないかを確認してください。
広告・埋め込みのCLSを改善する方法
広告や動画など外部コンテンツは、読み込み完了時間を自サイトだけでは完全に制御できません。
そのため「速く読み込ませる」だけでなく、遅れて届いてもレイアウトが動かない設計にすることが重要です。
CLS対策 ＝ 読み込み高速化 ＋ 表示領域の事前確保
CLSが0でないとSEOに不利？
CLSはCore Web Vitalsの1つで、Googleは良好なCore Web Vitalsを達成することを推奨しています。
ただし、CLSだけで検索順位が決まるわけではありません。
Googleは、検索のコアランキングシステムが良好なページ体験を評価する一方、1つや2つの指標だけへ集中するのではなく、全体として良いページ体験を提供することを推奨しています。
0.10から0.09にするだけをSEO目的に追い続けない
すでに良好判定に入っている場合は、記事品質、検索意図、表示速度、操作性など他の問題も含めて改善する方が実用的です。
CLS改善でやってはいけないこと
画像を全部削除する
画像がCLS原因でも、必要な画像を削除するのではなく表示領域を確保します。
広告をすべて消す
収益化サイトでは広告削除だけが解決策ではありません。広告枠サイズや配置を見直します。
プラグインを大量に入れて高速化する
最適化プラグイン同士が競合すると、表示崩れや別のパフォーマンス問題を起こすことがあります。
PageSpeed Insightsの1回の数字だけで判断する
ラボ計測は毎回完全に同じ値になるとは限りません。複数回の確認と実ユーザーデータを組み合わせます。
どんなサイトでCLSを特に意識すべき？
アイキャッチ画像・広告・目次が後から動かないか確認します。
ファーストビューの画像やWebフォント、Cookieバナーを確認します。
商品画像・価格・購入ボタンが動くと誤操作につながるため優先度が高いです。
広告枠や関連記事の動的挿入が多いため、CLSを継続的に確認します。
教科書判定
初心者は「0.1以下を目標に、画像・広告・埋め込みの表示領域を先に確保する」と覚えれば十分
WordPressサイトでCLSが悪い場合は、最初にアイキャッチ画像・記事内画像・広告・YouTube埋め込み・目次・Cookieバナーを確認してください。
普通のブログや会社サイトなら、画像サイズを正しく出力し、広告・iframe用のスペースを確保するだけでも改善できるケースがあります。
CLSはSEOだけの数字ではなく、文章を読んでいる途中に画面がずれる、ボタンを誤クリックするといった不快な体験を減らす指標です。0.1以下を目標にしつつ、ユーザーが安定して操作できるページを優先してください。
FAQ
Q．CLSはいくつなら良好ですか？
2026年10月時点のGoogle・web.devの基準では0.1以下が良好、0.1超～0.25以下が改善必要、0.25超が不良です。
Q．CLSは秒ですか？
いいえ。CLSは時間ではなく、レイアウトが動いた範囲と距離を基にした単位のないスコアです。
Q．画像の遅延読み込みをやめればCLSは直りますか？
必ずではありません。遅延読み込みを使っていても、事前に画像の表示領域を確保していればCLSを抑えられます。まずwidth・heightやaspect-ratioを確認してください。
Q．PageSpeed InsightsでCLSが0なのにSearch Consoleでは悪いのはなぜですか？
PageSpeed Insightsのラボ計測はその時のテスト環境、Search Consoleは実ユーザーのフィールドデータを基にするため差が出ることがあります。広告や端末サイズなど実利用時だけ起こるずれもあります。
Q．CLSを改善すれば検索順位は上がりますか？
順位上昇を保証するものではありません。Core Web Vitalsはページ体験の一部です。CLS改善はユーザー体験を良くすることを主目的に考えてください。
まとめ
この記事の結論
- CLSはページの視覚的安定性を測るCore Web Vitals指標
- 0.1以下が良好、0.25超は不良
- 評価では75パーセンタイルを見る
- サイズ未指定の画像・広告・iframe・動的コンテンツ・Webフォントが主な原因
- 画像や広告の表示領域を読み込み前から確保する
- WordPressではアイキャッチ・広告・目次・埋め込み・テーマ機能を確認する
- ラボデータだけでなく実ユーザーデータも確認する
- SEO順位だけでなく誤クリックや読みにくさを減らすために改善する
「Core Web Vitalsとは？SEOとの関係を初心者向けに解説」もあわせて確認してください。