CLS対策 | Notion

CLSとは？

Cumulative Layout Shift（累積レイアウトシフト）は、

ページの表示中に「レイアウトがガタつく」現象を数値化したもの。

→ **Googleの評価基準（Core Web Vitals）**の1つ。SEOにも直結！

✅ CLSが起こる主な原因

原因	例
画像や動画のサイズ未指定	読み込み時に枠がなく、後から表示されて要素がズレる
Webフォントの遅延表示	フォントが読み込まれるまで空白 or 差し替えで文字がズレる
広告・iframe・外部JSの読み込み	動的に挿入されて既存要素を押しのける
遅延読み込みの要素が急に出現	`lazy`画像やJSアニメーションなど

✅ 実務で使える！CLS対策 4選

方法	効果	実装例・補足
① `width` / `height` をHTMLに明示	表示前に枠を確保	`<img width="300" height="188">`（WordPressなら `the_post_thumbnail()` に出力）
② CSSで `aspect-ratio` を指定	枠の比率をCSSで確保できる	`.thumb { aspect-ratio: 16 / 9; }` → 高さも先に確保できる
③ `font-display: swap` を使う	フォントが届く前に代替フォントで表示される	`@font-face { font-display: swap; }` または `&display=swap`
④ 動的要素のスペースを事前に確保	広告やiframeなどの影響を防げる	`min-height` や `padding-top` でダミースペースを取っておく

✅ WordPressでの注意点（オリジナルテーマの場合）

要素	CLS対策
アイキャッチ画像	`width` / `height` を自動出力 or `aspect-ratio` で枠固定
投稿内画像・バナー	Gutenbergで `width` 属性がない → styleで指定する or CSS側で補完
Webフォント	自作テーマは `font-display: swap` を明示的に書かないと効かない
動画・iframe・広告	固定サイズ or CSSでスペースを事前に取る

✅ よくある画像パターンと対策例

html
コピーする編集する
<!-- CLSが出る悪い例 -->
<img src="image.jpg" alt="">

<!-- CLSが起きない良い例 -->
<img src="image.jpg" width="300" height="188" alt="" loading="lazy" decoding="async">

scss
コピーする編集する
.thumb {
  aspect-ratio: 300 / 188;
  object-fit: cover;
  object-position: center center;
}

→ 枠の高さが先に確保されることで、読み込み中もレイアウトが安定！

✅ Core Web Vitals的にも swap + width/height or aspect-ratio は必須！

指標	影響を受ける対策
CLS（レイアウトシフト）	`aspect-ratio`、`width/height`、`swap`
LCP（最大描画要素）	`loading="lazy"` 避ける／最上部画像は通常表示に
FID・INP（操作反応）	過度なJS遅延を避ける