CLSの評価を約2か月で「不良」から「良好」へ。大規模サイト向けCMSのECサイトで、Core Web VitalsのCLS対策として後から表示される部分の場所を先に確保し、読み込み中の画面のずれを解消

ページのあちこちで、読み込みの途中に表示がずれる

ヘッダー、サイドバー、本文と、ページのほぼすべての部分で読み込みの途中に表示がずれていました。購入ボタンを押そうとした瞬間に後から表示された部分に押し下げられ、別のリンクを押してしまうことも起きていました。

Googleの評価も「不良」だった

Google Search Console（自社サイトの検索での状態を確かめられる、Googleの無料ツール）では、CLSの評価が「不良」になっていました。CLS（Cumulative Layout Shift）は、読み込み中に画面の要素がどれだけずれたかを表す指標です。Googleがページの使いやすさを測る指標の一つで、検索結果の評価にも使われています。

1. どの部分が、いつずれているかを特定する

ページの読み込みを細かい時間の単位で追い、どの部分がどのタイミングで表示されたときにずれが起きているかを調べました。調べるのには、Chrome DevTools（ブラウザのChromeに備わっている、ページの動きを調べる機能）などを使っています。その結果、ずれの多くがブラウザで組み立てる部分が表示されるタイミングで起きていることがわかりました。

2. ヘッダー・サイドバー・本文で、後から入る部分の場所を確保する

ずれの原因になっていた部分ごとに、中身が届く前から場所の大きさが決まるようにしました。画像やバナーは縦横の比率を、それ以外の部分は最低限の高さをあらかじめ決めています。読み込み中は、そこに仮の枠を表示します。

直した部分の範囲（イメージ）

3. ページの種類ごとに直し、評価の変化を確かめる

Google Search Consoleでは、似た作りのページがまとめて評価されます。そのため、ページの種類ごとに直し、評価が変わるのを確かめながら進めました。評価が「良好」になるまでは約2か月でした。

約2か月で、Google Search ConsoleのCLSの評価が「不良」（赤）から「良好」（緑）になりました。

読み込みの途中で表示がずれなくなり、押そうとしたところとは別のところを押してしまうことも起きにくくなっています。読み込み中は仮の枠が表示されるため、お客様には何かが表示されるところだとわかるようになりました。