CLSに関する問題とは：指標の概要と確認方法、改善方法を解説します

サーチコンソールの ウェブに関する主な指標レポート では、Core Web Vitals に基づいたユーザーエクスペリエンスの状況を確認することができます。当記事では、Core Web Vitals の中の指標の一つ、CLS（Cumulative Layout Shift）に着目して、指標の概要と確認方法、改善方法について解説します。

CLS（Cumulative Layout Shift）とは

CLSはページの視覚的な安定性を評価する指標です。ページ内のコンテンツが表示された後、コンテンツの開始位置が移動することを レイアウトシフト といいます。CLSのスコアは、レイアウトシフトにおける、影響の割合 と 距離の割合 の積 で表します。

レイアウトシフトの原因としては以下のようなケースが挙げられます。

1. 画像の読み込みによる要素の移動
2. CSSの読み込みが遅く、遅れて適用されるCSSによる要素の移動
3. 広告や埋め込み動画の読み込みによる要素の追加や移動

CLSのスコア算出方法

CLSのスコアは、レイアウトシフトにおける、影響の割合 と 距離の割合 の積 で表しますが、移動する要素が画面内に占める割合が大きいほど、また、移動する距離が大きいほどスコアは低下します。

CLSのスコア = 影響の割合 × 距離の割合

CLSが「良好」と判定されるためには、スコアが0.1以下 である必要があります。また、サイトのページビューの 75% 以上が「良好」のしきい値を満たしていれば、そのサイトはパフォーマンスが「良好」に分類されます。

あくまでも画面内に表示されている要素がどの程度移動したかがスコアにかかわるので、画面内をスクロールしないと表示されない要素の位置が移動したとしてもスコアには関係がありません。

影響の割合、距離の割合の算出方法はGoogleが公開する開発者向けのガイドに詳細な説明があります。興味がある方は下記ガイドも参照すると、算出方法の細部を理解できます。
https://web.dev/articles/cls?hl=ja#layout-shift-score

CLS の確認方法

実際に CLS の値を確認してみましょう。CLS はGoogleが提供する計測ツール「PageSpeed Insights」で計測することができます。ツールにアクセスして計測対象のURLを入力するだけでCLSの値を確認することができます。

試しに弊社が運営しているレンタルサイクル事業 RIDEAWAY の ホームページを測定してみましょう。PageSpeed Insightsを開き、画面上部のテキストボックスにURLを入れ計測ボタンをクリックします。数十秒で結果が表示されます。

今回試したページでは、スコアが 0ととても良好な数値でした。ページを表示した際に最初に画面に表示される領域ではレイアウトシフトは全く起きていないということです。CLS はスコアの25%を占めます。100点を満点とした場合、25点はCLSの結果によりスコアが決まります。このページでは 25点ととても良いスコアでした。

CLSの改善方法

CLS改善の最初のステップも他の指標と同様、まずはレイアウトシフトが発生している箇所を特定することです。PageSpeed Insights の診断結果には、時系列でのスクリーンショットが確認できます。また、次に関連する監査を表示 でCLSを選択すると、レイアウトシフトを検知した要素を確認することができます。 改善が必要な箇所を特定してから対応方法を検討するようにしましょう。

画像の表示が原因の場合は、サイズを指定する

画像の読み込みが遅く、読み込み前後でレイアウトシフトが発生するケースがあります。レイアウトシフトが画像の表示にある場合は、画像のサイズをHTML上で適切に設定するようにしましょう。

画像のサイズは通常CSSで指定しますが、CSSによる指定だけだとブラウザが画像をダウンロードして表示するまで画面上のサイズが確定しません。HTML上の画像を扱うタグにheight属性（高さ）width属性（幅）を直接指定しておくことで、あらかじめ画像を表示する領域が確保されるようになり、レイアウトシフトを防ぐことができます。埋め込み型の動画や広告コンテンツなどでも同様の問題が発生する可能性がありますが、対処方法は画像と同じで、適切な高さ、幅をHTML上で指定しレイアウトシフトが発生しないよう対処することになります。

CSSの読み込みが遅い場合はインライン化する

CSSファイルが肥大化したサイトなどでは読み込みに時間がかかります。CSSの読み込みが遅れることで結果としてレイアウトシフトが起こっていることもあります。この場合は、CSSをインライン化して可能な限りCSSが適用されるまでのタイムラグを短くすることでレイアウトシフトを防ぎます。インライン化とは、CSSをHTML上に直接記述する手法です。CSSファイルを別に読み込む場合は、linkタグを使用しますが、インライン化では、レイアウトシフトに関連する部分のCSSだけ切り出し、HTML上にstyleタグとして直接記述します。

ウェブフォント読み込みの最適化

ウェブフォントとは、サーバーからダウンロードしたフォントファイルを使ってテキストを表示する技術です。ユーザーの端末にインストールされていないフォントも利用できるため、ユーザーの環境に依存せず、意図したデザインで文字を表示することができます。ウェブフォントはサーバーからダウンロードが必要な都合上、ダウンロード中は代替フォントと呼ばれる別のフォントで文字が表示されます。そのため、ウェブフォントが適用されるタイミングでレイアウトシフトが発生することがあります。

ウェブフォントによる影響を極力小さくする方法として、<link rel=preload> を使用してウェブフォントをできるだけ早く読み込む方法や、CSSの font-display: optional を使用して、ウェブフォントが読み込まれるまではフォントを表示しない方法などがあります。必要な対処はサイトの特性によるので最適な方法を検討する必要があります。

まとめ

当記事ではサーチコンソールで表示されるCLSの問題について、指標の概要と確認方法、改善方法を解説しました。Core Web Vitals はGoogle検索のランキング要因の一つとされています。Core Web Vitals のスコアが良好だからといってGoogle検索上の表示順位が上がるとは限りませんが、CLSの改善自体は優れたユーザー エクスペリエンスを提供するためにも重要な施策です。今回ご紹介した方法が現状確認、スコア改善の参考になれば幸いです。

弊社ではサーチコンソールとGA4データを1つにまとめて分析ができる「SEO分析ツール アナトミー」 を提供しております。アクセス解析、SEO分析に必要な機能が揃ったダッシュボードプランは全て無料でずっとご利用いただけます。是非、アナトミーに無料登録してダッシュボードをチェックをしてみてください。