Google Chromeによるレイアウトシフトの調べ方

レイアウトシフトとは、ウェブページを表示したときに、ガタンとコンテンツの位置がずれること。 高さ（height）を指定していない画像や広告などでよく見られる。

1. まず、Google Chromeを起動し、［F12］キーやメニューからディベロッパーツールを表示する。
2. 「Lighthouse」タブを選択し、測定したいウェブページを表示し、［Generate report］ボタンをクリックする。
3. Performanceの「Cumulative Layout Shift」にスコアが表示される。 Cumulativeは累積という意味。 数値が小さいほど良い。

これはわりと分かりやすいが、この他にもレイアウトシフトが視覚的に分かる機能がある。

1. 同じくChromeのディベロッパーツールで、タブ右端のギアマーク（⚙️）の隣にある「︙」のメニューにて「More tools」→「Rendering」と進む。
2. 表示されたウィンドウにて「Layout Shift Regions」をチェックする。

この状態でウェブページを表示すると、レイアウトシフトが起きた瞬間、該当箇所が青（紫）色で表示される。

ただし、回線速度やサーバーのレスポンスが良好な場合、一瞬で表示されるので分かりにくい。 そういうときは、以下のオプションでNetworkやCPUを遅くしたり、キャッシュを無効化するとよい。

• 「Performance」タブを選択し、そのギアマーク（⚙️）でオプションを表示するとNetworkやCPUが選択できる。 Networkでは、Fast 3G、Slow 3Gなどが選べる。 CPUでは、4x slowdownなどが選べる。
• 「Network」タブを選択し、「Disable cache」をチェックしてキャッシュを無効にする。

SEO界隈ではコアウェブバイタル（Core Web Vitals）が注目され、その中の一つにCumulative Layout Shift（CLS）がある。 Google検索の掲載順位にどの程度影響するか分からないが、気になる人は自分のサイトを調べてみるとよい。