CLSが大きい（表示中に画面がずれる）

CLSは「表示中に画面のレイアウトがどれだけずれたか」の指標です。読んでいた文章が急に下がる、押そうとしたボタンがずれて別のものを押す、という体験の数値化です。原因はほぼ3つに絞られ、いずれも対処法が確立しています。

公開日: 2026年8月16日 ／ 最終更新日: 2026年9月6日

カテゴリ: パフォーマンス ／ 影響度: 高 ／ 想定工数: 3時間 ／ ルールID: cls_poor

この指標の意味

CLS（Cumulative Layout Shift）は、ページの読み込み中や操作中に発生したレイアウトのずれを累積した値です。Googleの公表基準では0.1以下が「良好」、0.25超が「不良」です。

速度の指標ではなく「安定性」の指標である点が特徴です。速いページでもCLSが悪いことは普通にあります。

Smash SEOの検出条件

各ページのCLSをPageSpeed Insights API経由で取得し、0.25を超えるページを重大判定、0.1〜0.25を警告判定します。Googleの公表基準そのままです。

あわせて、CLSの主要原因である「画像のwidth/height未指定」「Webフォントのdisplay設定」「広告枠のプレースホルダー未確保」をそれぞれ個別ルールとして検出します。

原因1: 画像のサイズ未指定

最も多い原因です。imgタグにwidth/heightが無いと、ブラウザは画像を読み込むまで高さを確保できず、読み込み完了時に後続のコンテンツを押し下げます。

対処: サイズを明示する

<!-- ずれる -->
<img src="/photo.jpg" alt="商品写真" />

<!-- ずれない: 実寸を指定(CSSで縮小表示してもアスペクト比が確保される) -->
<img src="/photo.jpg" alt="商品写真" width="1200" height="800" />

原因2: Webフォントの読み込み

フォント読み込みの前後で文字の大きさが変わり、行数が変わってレイアウトがずれるパターンです。font-displayの設定と、フォントのpreloadで軽減できます。

対処: swap指定とpreload

@font-face {
  font-family: "CustomFont";
  src: url("/fonts/custom.woff2") format("woff2");
  font-display: swap;
}

原因3: 広告・埋め込みの枠

広告やSNS埋め込みが読み込まれた瞬間に、その高さ分だけコンテンツが押し下げられるパターンです。事前に枠の高さをCSSで確保（プレースホルダー）しておけば、読み込まれてもレイアウトは動きません。

対処: 枠の高さを事前確保

.ad-slot {
  min-height: 280px;  /* 配信される広告の高さを確保 */
}

修正後の確認方法

• PageSpeed InsightsでCLSの値と「レイアウトシフトの原因」の診断を確認する
• 再診断して該当ページが減っていること
• スマートフォン実機で、読み込み中に文章やボタンがずれないことを目視確認する

よくある質問

CLSはPCとモバイルどちらで見るべきですか？

両方測定されますが、優先すべきはモバイルです。画面が小さいぶん、ずれの影響が相対的に大きく、モバイルファーストインデックスの評価対象でもあります。

関連記事

• LCPが遅い（表示に4秒以上かかる）
  LCPは「ページの主要コンテンツが表示されるまでの時間」で、Core Web Vitalsの中核指標です。2.5秒以内が良好、4秒超は不良という基準をGoogleが公表しています。改善は闇雲にやらず、原因の系統を特定してから効く順に手を付けます。
• 表示速度改善の優先順位 — 全部やらないという判断
  速度改善で最も多い失敗は、PageSpeed Insightsの指摘を上から全部潰そうとすることです。指摘には効果が10倍違うものが混在しています。この記事は「何をやるか」より「何をやらないか」を決めるための記事です。
• viewportメタタグが設定されていない
  viewportメタタグが無いと、スマートフォンでページがPC幅のまま縮小表示され、文字が極端に小さくなります。Googleはモバイル版を基準に評価するため、影響は限定的ではありません。修正コストが小さいわりに効果が大きい項目です。

この問題が自分のサイトで起きているかは、URLを入力するだけで確認できます。 無料で診断する ／ ルール一覧 ／ 料金プラン