Core Web Vitals CLS（レイアウトシフト）を0.1以下に抑える改善手法

Performance CSS HTML SEO
結論

画像への width/height 明記とフォントの空間固定で CLS を 0.1 以下に抑えます。

<!-- web.dev (Google) 公式仕様：CLS を引き起こさない img タグの記述 -->
<!-- 1. HTML 属性でアスペクト比情報をブラウザへ提供 (表示エリアを事前予約) -->
<img 
  src="/hero-banner.webp" 
  width="1200" 
  height="630" 
  alt="メインバナー"
  style="width: 100%; height: auto;" 
/>
/* 2. Webフォント読込時の領域跳ね（FOUT/FOIT）を抑える CSS 設定 */
@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom-font.woff2') format('woff2');
  font-display: swap; /* 即時代替フォント表示 */
  size-adjust: 98%;   /* 代替フォントとサイズ・行高をジャストフィット同調 */
}

web.dev (Google) 公式仕様：CLS (Cumulative Layout Shift) 指標

Google公式ドキュメント（web.dev/articles/cls）で定義されている Core Web Vitals の最高重要指標の1つが CLS です。

CLS ≤ 0.1       : Good (良好・検索順位に優遇)
0.1 ~ 0.25      : Needs Improvement (要改善)
> 0.25          : Poor (不良・SEOランク急降下)

実際に起こる障害：width/height 省略による画面ガタつきと誤タップ事故

画像の <img src="photo.jpg"> タグに対して width と height 属性の指定を省略した場合、ブラウザは画像がネットワーク経由でダウンロード完了するまでその画像の高さを「0px」としてDOMレンダリングを行います。

画像ダウンロードが完了した瞬間、画像エリアが突然数百px膨れ上がり、画面下部にあった購入ボタンやリンクがドカンと押し下がる「レイアウトシフト事故」 が発生します。

ユーザーがボタンを押そうとした瞬間に位置がズレて誤タップが発生し、UX低下と Google SEO 評価の失格判定を招きます。

改善手順

  1. サイト内のすべての <img> および <video> タグに、ピクセル単位の width と height 属性を必ず記述する
  2. レスポンシブ対応は CSS の width: 100%; height: auto; または aspect-ratio: 16 / 9; を併用する
  3. @font-face に font-display: swap; を指定し、フォント読み込み完了前の画面消滅（FOIT）を防止する