CLSCumulative Layout Shift
CLS (Cumulative Layout Shift) は、ページ読み込み中にレイアウトが予期せずずれた量を累積した指標です。Core Web Vitals の1つで、0.1未満が「良好」とされます。
詳細解説
CLS は視覚的安定性を測る指標で、ページ表示中に発生する予期しないレイアウト移動の累積スコアです。広告バナーが後から挿入されてボタンの位置がずれる、画像のサイズ指定がなく描画後にずれる、Web フォント読み込みでテキストが再配置される、といった事象が CLS を悪化させます。0.1未満が「良好」、0.1-0.25が「改善が必要」、0.25超が「不良」です。改善策は、1) img タグに width/height 属性を必ず指定、2) 広告枠の min-height を予約、3) font-display: optional または swap で FOUT 対策、4) 動的挿入要素は既存コンテンツの上ではなく下に配置、です。CLS は誤クリックの主因となるため UX 上も重要な指標です。
実装例 / 使い方
- 01img タグに width/height を指定するだけで CLS が0.05以下に改善します
- 02AdSense の自動広告は CLS を0.2以上悪化させるため固定枠運用が推奨されます
- 03CLS 0.25超は購入ボタンの誤タップで売上を5-10%損失する原因になります
関連する用語
Core Web Vitals
Core Web Vitals は、Google が定めるページ体験の3つの基幹指標 (LCP・INP・CLS) のことです。2024年3月に FID が IN...
LCP
Largest Contentful PaintLCP (Largest Contentful Paint) は、ページ内で最も大きなコンテンツ (画像・動画・テキストブロック) が表示完了するまでの時間です...
INP
Interaction to Next PaintINP (Interaction to Next Paint) は、ユーザー操作からブラウザが次の描画を行うまでの遅延を計測する指標です。2024年3月に FI...
FID
First Input DelayFID (First Input Delay) は、ユーザーが最初にページを操作してからブラウザが応答するまでの遅延時間です。Core Web Vitals の...
PageSpeed Insights
PageSpeed Insights (PSI) は、Google が提供する無料のページ速度測定ツールです。URL を入力するだけで Core Web Vit...
CLSを、実際に活用する
用語の意味は分かった。次は実装。EXBANK の無料診断で、貴社で具体的にどう活用できるかをご提案します。
営業時間 平日10-18時 / 通常24時間以内に返信