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

URL: https://webrandum.net/chrome-dev-tool-cls/
公開日: 2020-10-23
更新日: 2020-10-23
カテゴリー: アクセス解析・サイト運用
タグ: Google Chrome, 開発者ツール
出典: Webrandum（著者: サイトウ マサカズ）

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

[Search Consoleに表示される「ウェブに関する主な指標」のCLSの意味と、不良時の改善方法](https://webrandum.net/search-console-cls-error)

とはいえ、何度かリロードすればなんとなくレイアウトが読み込み後にしばらく経ってからズレてたりするので見て判断はできますが、どうしても分からない場合はChrome開発者ツールを使って原因の場所を特定できたりもします。

## Chrome開発者ツールのPerformanceタブ

### Performanceタブのレコード

Chrome開発者ツールの［Performance］タブからCLSの原因は確認できます。

開いてすぐは下記のような画面になっているので、左上にあるリロードアイコンをクリックして、サイトを再読み込みして記録してもらいます。

![開発者ツールのPerformanceタブ](https://webrandum.net/mskz/wp-content/uploads/2020/10/image_1-6.png)

リロードアイコンをクリックすると、サイトが再読み込みされて、開発者ツールは下記のような画面になります。

ページの読み込みが完了したタイミングで「Stop」ボタンを押して記録をストップします。

![開発者ツールのレコード中](https://webrandum.net/mskz/wp-content/uploads/2020/10/image_2-5.png)

### Layout Shiftの位置を確認

レコードをストップすると、サイトのパフォーマンスに関する情報が表示されます。

さきほどのリロードアイコンをクリックしてから、「Stop」ボタンを押すまでのサイトのパフォーマンス関連の情報がタイムラインのように並んで表示されます。

![Performanceタブのタイムライン](https://webrandum.net/mskz/wp-content/uploads/2020/10/image_3-4.png)

画面の下の方に、「Experience」という項目があり、Layout Shiftと表示されている場合はその部分がCLSエラーの原因になっている可能性が高いです。

ここにExperienceやLayout Shiftが表示されていない場合は、ページロードが早すぎるか、CLSエラーを開発者ツールでも感知できていないので、何度か試してみる必要がありそうです。

Layout Shiftが表示されたら、Layout Shiftが発生している部分のタイムラインにマウスオーバーして、スクショを見比べることでレイアウトが大幅に移動している場所がないか確認できます。

![LayoutShiftの位置を確認](https://webrandum.net/mskz/wp-content/uploads/2020/10/image_4-2.png)

### 関連する要素の確認

また、タイムライン上のLayout Shiftをクリックすると［Summary］というパネルが表示されます。

下の方にスクロールすると「Related Node」の部分に関連しそうな要素名が書かれているので、ここからも原因を突き止められます。

![LayoutShiftに関係する要素の確認](https://webrandum.net/mskz/wp-content/uploads/2020/10/image_5-1.png)

あとはCSSで原因となる部分の修正を行えば完了です。

修正後に改めて確認して、Layout Shiftが表示されなくなっていればOKです。