ChromeのデベロッパーツールでCLSを調査する

こんにちは。GMOインサイトのT.Oです。

今回はCore Web Vitalsの重要な指標の1つであるCLSをChromeのデベロッパーツールを使用して調査する方法についてご紹介いたします。

Core Web Vitalsとは

Googleが定義するウェブページの品質指標で、ユーザー体験を定量的に評価するための3つの重要な指標から構成されています。

1.LCP(Largest Contentful Paint)

・ページの主要なコンテンツの読み込み速度を測定
・2.5秒以内が推奨されるしきい値

2.FID(First Input Delay)

・ユーザーの最初の操作に対する応答時間を測定
・100ミリ秒以内が推奨されるしきい値

3.CLS(Cumulative Layout Shift)

・ページの視覚的な安定性を測定
・0.1以下が推奨されるしきい値

CLSとは

CLSはページの読み込み中に発生する予期しないレイアウトのシフト（ずれ）を数値化したものです。

CLSの評価基準

良好: 0.1以下
要改善: 0.1〜0.25
悪い: 0.25以上

CLSが高い場合の問題点

1.ユーザー体験への影響

・リンクやボタンの位置がずれることによる誤クリックの発生
・読んでいるテキストの位置が突然変わることによる読書体験の低下
・フォーム入力中の予期しないカーソルの移動

2.SEOへの影響

・Google検索のランキング要素としてCore Web Vitalsが使用されます
・コンテンツの関連と品質が最優先ですが、同じコンテンツ品質を持つページ間ではCore Web Vitalsのスコアが考慮されます
・モバイル検索結果での順位に特に大きな影響があります

Chrome デベロッパーツールでCLSを調査する

まずChrome のデベロッパーツールを開いて（Windows/Linux: F12またはCtrl+Shift+I、Mac: Cmd+Option+I）パフォーマンスタブを選択します。
→Web Vitalsの3指標の計測値が表示されます
この状態から以下の手順でCLSの調査を行います。

1.画面左上の「記録して再読み込み」ボタン（⟳）を選択
→記録が開始されます。ページの読み込みが完了すると記録が完了します。

2.記録が完了すると画面の中段に「レイアウトシフト」が表示されます。
→「レイアウトシフト」を選択します。

3.画面下段の「概要」、「ボトムアップ」、「呼び出しツリー」、「イベントログ」表示から「イベントログ」を選択します。
→イベントログの「アクティビティ」に「レイアウトシフトクラス」が表示されます。

4.「レイアウトシフトクラス」の左側に表示されている▶を選択します。
→レイアウトシフトが発生した回数分、リストが表示されます。

5.レイアウトシフトのリスト表示のうち、いずれか1つを選択すると該当のレイアウトシフトで発生したCLSのスコア、累積スコアが表示されます。
→リスト表示されたレイアウトシフトのスコアをそれぞれ確認することで、どのレイアウトシフトが大きな値となっているか把握できます。

6.レイアウトシフトの「移動元」、「移動先」が表示されている部分にそれぞれマウスオーバーするとデベロッパーツールの左側に表示されているWebページの表示にレイアウトシフトが発生しているHTML要素が赤い領域として表示されます。
→どのようなレイアウトシフトが発生しているか視覚的に確認することができます。