Chrome開発者ツールを使って、CLSエラーの原因となっている場所の特定をする方法
Search Consoleで表示される「CLS」エラーは、どのページにCLSの改善が必要なのかは教えてくれますが、具体的にどの部分がアウトなのかは教えてくれません。
とはいえ、何度かリロードすればなんとなくレイアウトが読み込み後にしばらく経ってからズレてたりするので見て判断はできますが、どうしても分からない場合はChrome開発者ツールを使って原因の場所を特定できたりもします。
Chrome開発者ツールのPerformanceタブ
Performanceタブのレコード
Chrome開発者ツールの［Performance］タブからCLSの原因は確認できます。
開いてすぐは下記のような画面になっているので、左上にあるリロードアイコンをクリックして、サイトを再読み込みして記録してもらいます。
リロードアイコンをクリックすると、サイトが再読み込みされて、開発者ツールは下記のような画面になります。
ページの読み込みが完了したタイミングで「Stop」ボタンを押して記録をストップします。
Layout Shiftの位置を確認
レコードをストップすると、サイトのパフォーマンスに関する情報が表示されます。
さきほどのリロードアイコンをクリックしてから、「Stop」ボタンを押すまでのサイトのパフォーマンス関連の情報がタイムラインのように並んで表示されます。
画面の下の方に、「Experience」という項目があり、Layout Shiftと表示されている場合はその部分がCLSエラーの原因になっている可能性が高いです。
ここにExperienceやLayout Shiftが表示されていない場合は、ページロードが早すぎるか、CLSエラーを開発者ツールでも感知できていないので、何度か試してみる必要がありそうです。
Layout Shiftが表示されたら、Layout Shiftが発生している部分のタイムラインにマウスオーバーして、スクショを見比べることでレイアウトが大幅に移動している場所がないか確認できます。
関連する要素の確認
また、タイムライン上のLayout Shiftをクリックすると［Summary］というパネルが表示されます。
下の方にスクロールすると「Related Node」の部分に関連しそうな要素名が書かれているので、ここからも原因を突き止められます。
あとはCSSで原因となる部分の修正を行えば完了です。
修正後に改めて確認して、Layout Shiftが表示されなくなっていればOKです。
