サーチコンソール内の「ウェブに関する主な指標」に、「CLSに関する問題：0.25超」が表示されていませんか？

CLS（Cumulative Layout Shift）とは、Googleがユーザー体験向上に向けて指標化した3つの要素のうち、レイアウトの安定性を示す指標です。

この記事では、「CLSに関する問題：0.25超」というメッセージが示す内容や、おもな原因と改善策について、どこよりも詳しく解説します。

コアウェブバイタルのCLSとは？SEOへの影響と測定方法について

そもそもCLSとは？

CLSとは「Cumulative Layout Shift」の略で、直訳すると「累積レイアウト変更」です。これは、ページを読み込んでからユーザーの端末で表示されるまでに、コンテンツのレイアウトにどの程度ずれが生じるかを数値化したものであり、CLSの数値が低いほど、ユーザーエクスペリエンス（UX・ユーザー体験）が良好であることを示します。

Googleはユーザー体験向上に向けて、「コアウェブバイタル（Core Web Vitals）」と呼ばれる指標を3つ設けており、CLSはその1つです。コアウェブバイタルについては次の章で解説します。

「CLSに関する問題：0.25超」とは？

Googleは2021年6月以降、「コアウェブバイタル（Core Web Vitals、ウェブに関する主な指標）」をGoogleのランキング要因に組み込むと発表しました。コアウェブバイタルは、ユーザーエクスペリエンスの重要指標として設けられたもので、次の3つの要素から成り立っています。

• LCP（Largest Contentful Paint）：ページの表示速度
• FID（First Input Delay）：ユーザー操作への応答速度
• CLS（Cumulative Layout Shift）：描画要素のレイアウトの安定性

Googleの検証によると、これら3つの要素について「しきい値を満たしているサイトでは、ページ読み込みをやめる（読み込みが完了する前にページを離れる）ユーザーが 24% 少なくなる」とされています。（Google Developers Japan）

また、コアウェブバイタルは、2021年6月以降はモバイル検索において、2022年2月以降はパソコン検索において、ランキング要因として組み込まれています。

Googleランキング要因になるCore Web Vitalsとは？概要から改善方法まで徹底解説！

前述のとおり、コアウェブバイタルのうち「CLS（Cumulative Layout Shift）」は、ページを閲覧している間に発生する描画要素のレイアウトのずれを数値化したものです。

読み込み中やユーザーがページをスクロールしたタイミングでレイアウトがずれると、ユーザーエクスペリエンスの点で好ましくありません。例えば、次のようなケースが挙げられます。

• ページが表示され本文を読み始めたら、画像や広告が時間差で出現し、本文が下にずれて困惑した
• リンクをタップしようとしたら、予期せず現れた広告によってそのリンクが下に追いやられ、誤って広告をタップしてしまった

Googleは、優れたユーザーエクスペリエンスを提供するには、ページのCLSを0.1未満に維持する必要があると定めています。

• 良好：1未満
• 改善が必要：25以下
• 不良：25を超える

つまり「CLSに関する問題：0.25超」は、CLSが不良と判定される、0.25を超えるページがサイト内に存在することを意味しています。

CLSの問題が見つかった場合は、速やかに原因を特定し、原因要素ごとに適切な対応を行なうことが必要です。

なお、CLSの測定方法については、以下の記事で詳しく解説しています。

コアウェブバイタルのCLSとは？SEOへの影響と測定方法について

CLSに関する問題の原因を特定する方法

CLSに関する問題は、おもに次のことが原因となっているケースが多いです。

• 画像や広告といったページに埋め込まれる要素について、サイズが指定されていない
• JavaScriptによって動的に生成されるコンテンツがある
• Webフォントがフォールバックフォントから置き換えられる際のサイズ差分

そこでまずは、CLSに関する問題の原因を特定する方法について、全3ステップで解説します。

【ステップ1】問題が発生しているページを特定する

まずはサーチコンソールを使用して、問題が発生しているページを特定します。ページはGoogleによって自動的にグループ化されていますが、同種のページ（同じ原因で問題が発生しているページ）が適切にまとめられていないケースもあるため、念のため確認しましょう。

【ステップ2】CLSの問題の原因となっている要素を特定する

次に、該当するページ内のどの要素がCLSの問題の原因になっているかを、特定する必要があります。

まずは対象ページをPageSpeed Insightsにかけてみましょう。すると、読み込み時のラボデータの下に連写キャプチャが表示されます。

時系列に並んでいる連写キャプチャを見比べて、あとから現れてずれの原因になっている要素を特定します。以下は該当部分を拡大したイメージです。

上のキャプチャの場合、黒い画像がCLSの問題の大きな原因となってテキストがずれているのがわかります。また、よく見るとSNSシェアボタンのあたりにも、ずれの発生が確認できます。つまり、このケースでは画像やシェアボタンがずれの原因であることがわかります。

このようにキャプチャから一発で原因が特定されるケースは多いものの、そうではない場合もあります。
まずは同じページを何度かPageSpeed Insightsにかけてみてください。キャプチャ取得のタイミングによって、CLSの問題発生が可視化できていない場合があるためです。

【ステップ3】PageSpeed Insightsで特定できない場合、Chrome拡張機能などを使用する

PageSpeed InsightsだけでCLSの問題の原因を特定できない理由は、GoogleがCLSの判定にChrome UX Reportの集計データを用いており、そのデータは、実際のユーザーのページ閲覧から閲覧終了までを対象としているためです。

一方、PageSpeed Insightsのラボデータは、LighthouseのBotという限定された環境におけるファーストビューのみを計測対象としています。

実際のユーザーは、ページをスクロールしたりページ内の要素をクリックしたりするため、それによって発生するCLSの問題は考慮されていないことになります。

これに対応するためには、実際にページをスクロールしたりクリックしたりしながらCLSの問題が発生していないかチェックする必要があります。その際におすすめなのが下記のChrome拡張機能です。

Web Vitals
https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma

「Web Vitals」を有効にしていると、現在のそのページのセッション中に計測されたコアウェブバイタルが表示されます。

例えば、ページのスクロール中に急に画像などが読み込まれたことで、下部にあるテキストなどがずれていないか、ページが無限スクロールになっていて一瞬フッターが表示されるものの、カクカクと次々にページが読み込まれていないかなどをチェックします。

これらのような要素があると、CLSの値がどんどん増えていくため、値が増えたタイミングから原因要素を割り出します。

また、クリックによって開くコンテンツの場合、クリック後0.5秒以内に表示されればCLSの問題としてカウントされませんが、0.5秒以上かかるとカウントされてしまいます。プルダウンやアコーディオンなどのコンテンツ表示に時間がかかっていないか確認しましょう。

ただし、この方法はタイミングまではわかっても、具体的な原因特定までには至らない可能性もあります。

ほかにも、ChromeデベロッパーツールのPerformance機能を使って調査する方法もあります。

Google Chromeデベロッパーツールとは？使い方や簡易的な解析テクニックについてご紹介します！

例えば、Chromeデベロッパーツールでは、PageSpeed Insightsと同じようにキャプチャを取得できます。読み込み速度が遅いほうが確認しやすいので、特にファーストビュー内を調査する場合は「Network conditions」を「Fast 3G」などにすると良いかもしれません。

また、Experience部分をクリックすると、レイアウトのずれを起こした要素がピックアップされるため、ここから原因となっている要素を特定します（ピックアップされている要素は移動した要素であり、必ずしも原因要素そのものではないことに注意が必要です）。

上のキャプチャでは、「Related Node」の部分を参照すると、pタグの要素がずれているようです。

このように、ページのスクロールを行なったりCLSの問題が発生しそうな要素をクリックしたりしながら、原因要素を特定します。

CLSに関する問題を改善する方法

上述の手順で原因要素が特定できたら、各要素に応じた対処を行ないます。なお、コアウェブバイタルのスコア改善については、以下の記事もご参照ください。

ページスピードインサイトの使い方とコアウェブバイタル（LCP/FID/CLS）のスコア改善方法

画像の表示サイズ（width・height）を指定する

PageSpeed Insightsの診断で、「画像要素でwidthとheightが明示されていない」と表示された場合には、画像の表示サイズを指定することで、CLSを改善できます。

さまざまなサイトを見ている経験上、画像は最もCLSの問題の原因となりやすい要素といえます。特にレスポンシブサイトでは、画像のwidth（幅）とheight（高さ）の要素が付与されていないケースが多いです。

このようなケースだと、ブラウザは画像のダウンロードが完了するまで画像の大きさを知ることができないため、ダウンロード時にCLSの問題が発生してしまいます。

これを避けるためには、HTMLで原寸の画像サイズを指定し、CSSで比率を指定しておきます。こうすることで、画像のダウンロードが完了しなくても、ブラウザがあらかじめ、画像のためにどれくらいの領域を確保すれば良いかを判断できるようになるのです。

HTML上の記述

<img src="image.jpg" width="640" height="360">

CSS上の記述

img {
  width:100%;
  height:auto;
 }

広告のの表示場所や設定を変更する

そもそも広告がファーストビュー内上部にあることは、SEO的に好ましくありません。広告が、ファーストビュー内のメインコンテンツの視認を妨げていると、ユーザーエクスペリエンスを損なうものとして、Googleに評価を下げられてしまうためです。広告は、よりページ下方に配置することをおすすめします。

とはいえ、サイトの方針などから、広告を取り除くことが難しい場合もあるかもしれません。その場合のCLSにおける考え方は画像と同じで、読み込み前にブラウザが領域の大きさを予約できるようにしておくことです。

そのためには<div>タグなどにより、プレースホルダを設定しておくことがポイントです。

上図の例では、青い広告が読み込まれる前から、グレーのプレースホルダが表示されることで、読み込み前後のレイアウト移動が起きていません。

読み込まれる広告の大きさがあらかじめ特定できない場合でも、min-heightなどを設定しておくことで、CLSを0にできなくとも影響を軽減することは可能です。

<div id="ad-slot" style="min-width: 300px; min-height: 250px;"></div>

動的コンテンツの表示場所や設定を変更する

JavaScriptを用いることなどにより、ページ読み込みに遅れて表示されるコンテンツもCLSの問題の原因となりやすい要素です。

最近では、新型コロナウイルスの対応に関するアナウンスなどが、サイト上部に動的コンテンツとして埋め込まれており、これがCLSの問題の原因となっているケースも多く見られます。

その場合、以下のような対応を検討しましょう。

• プレースホルダを設定する
• JavaScriptを使用せずに表示させる
• 表示位置を下方に移動する

なお、ユーザーのクリックアクションの直後に挿入されるコンテンツによるCLSはカウントされませんが、クリック後、読み込みに時間がかかってしまう場合は、CLSの問題の原因となります。その場合は、同じようにプレースホルダを設定するなどの対応を行ないましょう。

CLSのずれの原因になるCSSを最適化する

ページの表示速度の向上を目的とした遅延読み込みや、JavaScriptを通じてあとから読み込まれるCSSに関して、これらがあとから適用されると、CLSの問題発生につながります。

特にファーストビュー内のレンダリングに関与するCSSは、先に読み込まれるようにしておく必要があります。

Webフォントの設定を変更する

Webフォントが適用された際に、適用されたフォントとフォールバックフォントのサイズが異なっていると、わずかなレイアウトのずれが生じる可能性があります。

フォントは、<link rel=”preload”>で優先的に読み込みを行なったり、CSSのfont-displayプロパティを使用したりすることで影響を軽減できますが、フォントだけではCLS不良の主要要因にはならないケースが大半です。

無限スクロールページでCLSが発生している場合

無限スクロールページでは、原因要素自体は動的コンテンツですが、やや特別なケースなのでピックアップして紹介します。

無限スクロール中に一瞬フッターが表示されるページでは、読み込みのたびにフッターが移動し、CLSスコアが悪くなる可能性があります。対処法としては、以下の3つが考えられます。

• プレースホルダを設定する
• フッターを削除する
• スクロール前にコンテンツを表示しておく

このなかでは、フッターを削除する方法が一般的です。

まとめ

現状のGoogleのランキングの決め方からすると、「CLSに関する問題：0.25超」をはじめとする「ウェブに関する主な指標」のエラーは、実際のランキングへの影響は大きくないと考えられます。しかし、「ウェブに関する主な指標」の改善は、ユーザーエクスペリエンスの直接的な向上につながるため、その意味では積極的に取り組むことをおすすめします。