このエントリーをはてなブックマークに追加

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検索の掲載順位にどの程度影響するか分からないが、気になる人は自分のサイトを調べてみるとよい。


このエントリーをはてなブックマークに追加