CLSとは？

CLS（Cumulative Layout Shift） は、ページのレイアウトが予期せず動く量を測る指標。ユーザーがクリックしようとした瞬間に広告が読み込まれて誤タップする、などの体験を防ぎます。

スコア基準

  • 良好: 0.1以下
  • 要改善: 0.1〜0.25
  • 不良: 0.25超

改善施策

  1. 画像に width/height 指定: スペースを予約
  2. 広告スロットのサイズ固定
  3. フォント読み込み最適化: font-display: swap + preload
  4. 動的コンテンツは下に配置（既存レイアウトを動かさない）
  5. aspect-ratio CSS活用

関連用語

Tufe Companyのソリューション