テクニカル
CLS
ページ表示中に意図せず要素が動く（レイアウトずれ）量を計測する指標。
CLSとは？
CLS（Cumulative Layout Shift）は、ページ読み込み中や閲覧中に意図せず要素が動く「レイアウトのずれ」を数値化した指標です。Core Web Vitalsの3指標の1つです。
スコア0.1以下が良好、0.25以上は不良と判定されます。「ボタンを押そうとした瞬間に画面がずれて誤タップ」というイライラの正体です。
CLSの使い方・実践方法
CLSを改善する代表的な施策は次のとおりです。
- 画像・動画にwidth/height属性を明示
- Web Fontの読み込みで
font-display: swap+ size adjust - 広告枠の高さを事前に確保（プレースホルダ）
- 動的に挿入される要素は既存コンテンツの上に置かない
CLSで押さえるべきポイント
CLSの主要因は「画像のサイズ未指定」と「広告タグの遅延読み込み」です。HTMLにwidth/heightを明示するだけでも大きく改善することが多いです。
CLSを実践するなら
Saguru なら、月額270円から、SEOキーワード調査・上位サイト分析・自サイトSEO診断のすべてが使えます。「CLS」を理解した上で、すぐに実践に移せます。
登録なしで1日5回まで無料 ／ メール登録で1日30回 ／ ベーシック月額270円
CLSについてよくある質問
CLSの目標値は？
0.1以下が「良好」、0.25以上は「不良」として警告が出ます。
CLSはどのサイトに影響する？
すべてですが、特に画像が多いブログ、広告枠の多いメディア、SPA系で悪化しやすいです。
広告のCLSをゼロにする方法は？
広告枠のサイズを事前にCSSで確保することで、広告挿入時のずれを防げます。