CLSゼロ：画像・広告・埋め込みの“予約サイズ”完全ガイド

レイアウトの「ガタつき」はUXを直撃します。鍵は“予約サイズ”の先出し。画像・広告・埋め込みの枠を先に確保しておけば、CLS は恒常的に0.00xに抑えられます。

先に結論（運用ルール）

すべての <img> に width/height（実寸）。fill の場合は親に aspect-ratio。
広告は min-height を固定（132 / 250 / 300px が目安）＋遅延マウント時も占位。
埋め込みはラッパーに aspect-ratio（16/9 等）を設定。
CLS p75 は≤ 0.10（良好）。運用では0.02 未満を目指す。

要点（TL;DR）

画像は寸法明示＋レスポンシブは srcset/sizes を実表示幅に一致。
広告は固定枠＋占位で“後から膨らむ”を封じる。
埋め込みは比率固定でロード後の押し下げゼロ。
検証はLayout Shift RegionsとPerformanceでピンポイントに潰す。

1. 画像：固定サイズとレスポンシブ設計

<!-- 固定カード -->
<img src="/card.webp" width="640" height="400" alt="カード" loading="lazy" decoding="async" />

<!-- レスポンシブ（ヒーロー/LCP想定） -->
<link
  rel="preload"
  as="image"
  href="/hero-1200.avif"
  imagesrcset="/hero-800.avif 800w, /hero-1200.avif 1200w, /hero-1600.avif 1600w"
  imagesizes="(min-width: 1024px) 1000px, 92vw"
/>
<img
  src="/hero-1200.avif"
  srcset="/hero-800.avif 800w, /hero-1200.avif 1200w, /hero-1600.avif 1600w"
  sizes="(min-width: 1024px) 1000px, 92vw"
  width="1600" height="900"
  alt="ヒーロー"
  fetchpriority="high"
  decoding="async"
/>

width/height は実寸、sizes は描画幅。過大ダウンロードは CLS だけでなく LCP/INP にも悪影響です（関連： INP時代の画像最適化）。

2. 広告：固定枠＋遅延マウント

/* 例：記事上部に固定132px（遅延マウントでも占位） */
<Suspense fallback={<div className="min-h-[132px]" />}>
  <AdSlot placement="top" />
</Suspense>

レイアウト	推奨 min-height	備考
記事上部	132px	ファーストビューを邪魔しない高さ
本文内	250px	モバイル視認性とリフロー抑制の折衷
記事下部	300px	未充当時も押し下がらない

ローダースクリプトは全体で1回のみ。高さは AdSlot 側のスタイルか fallback で必ず確保します。

3. 埋め込み：比率固定とキャプションの扱い

.embed {
  aspect-ratio: 16/9;
  width: 100%;
  max-width: 720px;
}
.embed > iframe { width: 100%; height: 100%; }

<!-- 例：YouTube -->
<div class="embed">
  <iframe src="https://www.youtube.com/embed/xxxx" title="動画" allowfullscreen></iframe>
</div>

キャプションは予約枠の直下に置き、ロード後に出現して押し下げない構造にします。

4. 検証（Chrome DevTools）

Performance 計測で Layout Shift の菱形マーカーを確認。
Rendering > Layout Shift Regions をONにして揺れた領域を特定。
Lighthouse の CLS を複数回計測し、p75 で ≤ 0.10 を維持。

5. 公開前チェック（10項目）

すべての <img> に寸法（width/height）あり、または親に aspect-ratio。
レスポンシブは srcset/sizes が実表示幅に一致。
広告は固定 min-height を確保、遅延マウントでも占位。
埋め込みはラッパーで aspect-ratio を指定。
上部広告はファーストビューを過度に侵食しない高さ。
CLSの主因（Webフォント・非同期ウィジェット等）も併せて点検。
画像/広告の遅延読み込みがスクロール直後の押し下げを生んでいない。
Before/After を /compare で視覚比較、容量は /compressor で確認。
PSI/RUM の p75 CLS ≤ 0.10、できれば 0.02 未満。
回帰が出た場合は差分コミットで原因特定（画像・広告・埋め込みのどれか）。

6. まとめ：予約サイズが“ガタつき”を消す

画像・広告・埋め込みの予約サイズを設計すれば、CLSは再現よく抑えられます。あとは srcset/sizes と優先度設計を組み合わせれば、速さと安定を同時に達成できます。