Chrome開発者ツールを使って、CLSエラーの原因となっている場所の特定をする方法

Search Consoleで表示される「CLS」エラーは、どのページにCLSの改善が必要なのかは教えてくれますが、具体的にどの部分がアウトなのかは教えてくれません。

Webrandum

Search Consoleに表示される「ウェブに関する主な指標」のCLSの意味と、不良時の改...

https://webrandum.net/search-console-cls-error

いままで全然気がつかなかったのですが、Search Consoleを開いてみるとCLS（Cumulative Layout Shift）でエラーが出ていました。今回はCLSとは何か？とその対処法をまとめておきます。CLSとは何か？Search ConsoleにはCLS以外にも「LCP」「FID」の全部で3つの指標があります。それぞれの指標の意味は下記の通りです。 略前意味CLSCumulative Layout Shift読み込み時のページレイアウトの変化量LCPLargest Contentful PaintユーザーがURLをリクエストしてから、最大のコンテンツ要素がレンダリングされるまでの時間FIDFirst Input Delay...

とはいえ、何度かリロードすればなんとなくレイアウトが読み込み後にしばらく経ってからズレてたりするので見て判断はできますが、どうしても分からない場合は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です。