SEO研究所サクラサクラボ

SEO・コンテンツマーケティングを成功に導くパートナー

  • SEO・コンテンツマーケティングなら
    サクラサクマーケティングにお任せください。

「CLSに関する問題:0.25超」問題の改善方法を詳しく解説!

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

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

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

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

【無料】ねぎお社長のSEOメールマガジン※30秒で登録完了
購読者数は既18000人を突破!
SEO業界20年のねぎお社長が最新情報、ノウハウ、考え方などこのメルマガでしが入手できない情報を配信。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

つまり「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>タグなどにより、プレースホルダを設定しておくことがポイントです。

プレースホルダによるCLSの抑制

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

読み込まれる広告の大きさがあらかじめ特定できない場合でも、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超」をはじめとする「ウェブに関する主な指標」のエラーは、実際のランキングへの影響は大きくないと考えられます。しかし、「ウェブに関する主な指標」の改善は、ユーザーエクスペリエンスの直接的な向上につながるため、その意味では積極的に取り組むことをおすすめします。

   

    ねぎお社長のSEOメールマガジン(無料)

    【登録者1.8万人以上】SEOの最新情報をお届け!






    プライバシーポリシー

           

    ねぎお社長 (根岸雅之)

    執筆者 / 監修者

    ねぎお社長 (根岸雅之)
    サクラサクマーケティング株式会社取締役 社長ねぎお社長 (根岸雅之)
    サクラサクマーケティング株式会社 取締役社長 COO

    1980年生まれ 大学卒業後、一貫して、広告・マーケティング業界に身を置く。2006年にSEM コンサルタントとして、インターネット総合代理店、株式会社オプトに入社。リスティング、ディスプレイ広告の運用から、SEOの施策提案など主にキーワードマーケティング領域に特化した業務に従事。同年10月に株式会社ブルトア(現サクラサクマーケティング株式会社)に転職。入社後は、営業をはじめ、SEOコンサルティング、新規事業開発、自社マーケ、人事、財務と幅広い領域を経験し、営業部長、執行役員、取締役と経て、2015 年に社名変更とともに取締役社長に就任。

    SEOコンサルタントとして大規模サイトから新規サイトまで、売上向上に繋がるコンサルティングを武器に200サイト以上の実績。2023年には『なぜほとんどコンテンツマーケティングは失敗に終わるのか?』を執筆。ねぎお社長のSEOチャンネルをはじめ、YouTube、メルマガ、SNを通じて積極的に情報発信。

    ◇ 出版書籍
    なぜほとんどコンテンツマーケティングは失敗に終わるのか?

    ◇ 情報発信
    ねぎお社長のSEOチャンネル
    ねぎお社長X(旧Twitter)
    ねぎお社長のAMAZON著者ページ
    ねぎお社長Facebook
    ねぎお社長Instagram
    ねぎお社長linkedin
    ねぎお社長note

    ◇ 掲載メディア
    リスティングプラス様 - 【最新版】SEOコンサルティングのプロが語る、今後中小企業が取り組むべきSEO対策
    シンフィールド様 - サクラサクマーケティング株式会社 取締役社長COO根岸 雅之氏に聞いた!SEO対策で最も重要なことを教えてください!

    ◇ 共催セミナー歴
    オウンドメディアの成功事例とSEOを支える運用型広告の活用
    今日から始められるWebマーケティング~コンテンツマーケティングとGoogle マイビジネス~
    GMO TECH × サクラサク共催セミナー~テクニカルSEOとコンテンツマーケ~
    リモート環境下においても売上・利益が成長し続ける組織創りと営業戦略

    その他のブログ記事

    Return Top