CLS(Cumulative Layout Shift)は、ページの読み込み中に要素が突然ずれる量を測る指標です。画像が後から表示されて本文が押し下げられたり、広告が挿入されて押そうとしたボタンが逃げたり——こうした「ガタつき」はユーザーをいら立たせ、誤タップの原因にもなります。良好の基準は0.1以下です。
原因1: サイズ未指定の画像
最も多い原因です。画像に width / height を指定していないと、ブラウザは画像を読み込むまでサイズが分からず、読み込み完了と同時に周囲の要素を押しのけます。
- すべての img に width と height 属性を指定する(CSSで表示サイズを調整してもよい)
- レスポンシブ画像では aspect-ratio を指定して縦横比を固定する
- next/image など、自動で領域を確保する仕組みを使う
原因2: 広告・埋め込み枠
広告、SNSの埋め込み、iframeなどは、コンテンツが届いてから領域が決まることが多く、CLSの大きな原因になります。あらかじめ最小の高さを確保しておきます。
- 広告枠には min-height を指定し、読み込み前から場所を予約する
- ファーストビューに、後から高さが変わる埋め込みを置かない
- 埋め込みが表示されなかった場合の高さも想定しておく
原因3: Webフォントの切り替え
Webフォントの読み込み完了時に、代替フォントから切り替わって文字の幅が変わると、レイアウトがずれます。font-display の指定と、代替フォントの選び方で緩和できます。
font-display: swap でフォント待ちの空白は防げますが、切り替え時のズレは残ります。代替フォントの字形サイズを本フォントに近づける size-adjust などの指定で、切り替え時のガタつきを抑えられます。
原因4: 動的に挿入される要素
クーポンバー、通知、同意バナーなどをJavaScriptで既存コンテンツの上や間に挿入すると、その分だけ下の要素が動きます。挿入する場合は、コンテンツの流れを押しのけない位置(画面下部への固定表示など)にするか、あらかじめ領域を空けておきます。