CLSとは？

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活用

関連用語

• Core Web Vitals / LCP / INP

Tufe Companyのソリューション

• Web Production