SEO研究所サクラサクラボ

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

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

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

CLSは「Cumulative Layout Shift」の略で、Googleがユーザー体験向上に向けて指標化した「コアウェブバイタル(Core Web Vitals、ウェブに関する主な指標)」の3大要素のうちの1つです。2021年6月以降、SEOにもわずかながら影響してくることが予想されています。

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

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

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

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

Googleの検証によると、これら全3要素について「しきい値を満たしているサイトでは、ページ読み込みをやめる(読み込みが完了する前にページを離れる)ユーザーが 24% 少なくなること」と言われています。(Google Developers Japan
また、コアウェブバイタルは2021年6月以降、モバイル検索においてランキング要因になることが明らかになっています。(当初は5月予定でしたが6月に延期され、またPC検索には影響しないと言われています)
参考:Googleランキング要因になるCore Web Vitalsとは?概要から改善方法まで徹底解説!

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

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

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

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

• 良好 : 0.1未満
• 改善が必要 : 0.25以下
• 不良 : 0.25を超える

cls

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

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

この記事ではCLSの改善や対処法を中心に解説します。
CLSの定義や詳しい測定方法については以下の記事をご覧ください。

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

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

CLSは、主に次のことが原因となっているケースが多いです。

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

Googleが定める推奨値0.1を目指して、CLSを改善していきましょう。

問題が発生しているページの特定

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

例として挙がっているページを調査し、ページスピードインサイトなどを活用してCLSの原因となっている要素を特定し、原因要素に応じた対応施策を行います。

CLSの原因となっている要素の特定

問題解決のためには、実際にページ内のどの要素がCLSの原因になっているかを特定する必要があります。

まずは対象ページをPageSpeed Insightsにかけてみましょう。すると読み込み時のラボデータの下に連写キャプチャが表示されます。
キャプチャが表示されている部分を横に見ながら後から現れてずれの原因になっている要素を特定します。
以下は該当部分を拡大したイメージです。

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

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

Chrome拡張機能などを使用する

PageSpeed InsightsだけでCLSを特定できない理由は、CLSの判定に際してGoogleはChrome UX reportの集計データを用いており、それは実際のユーザーのページ閲覧から閲覧終了までを対象としているためです。
一方、PageSpeed InsightsのラボデータはLightHouseのbotという限定された環境で、ファーストビューのみを計測対象としています。
実際のユーザーはページをスクロールしたり、ページ内の要素をクリックしたりしますから、それによって発生するCLSが考慮されていないことになります。

これに対応するために、実際にページをスクロールしたりクリックしたりしながらCLSが発生していないかチェックします。

その際におすすめなのがChrome拡張機能です。
https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma

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

たとえばページのスクロール中に急に画像などが読み込まれて下部にあるテキストなどがずれていないか、ページが無限スクロールになっていて一瞬フッターが表示されるもののカクカクと次々にページが読みこまれていないかなどをチェックします。そのような要素があると、ツールのCLSの値がどんどん増えていきますので、値が増えたタイミングから原因要素を割り出します。

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

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

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

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

たとえば、以下のPageSpeed Insightsと同じようにキャプチャを取得できます。読み込み速度が遅いほうが確認しやすいので、特にファーストビュー内を調査する場合は”Network Condition”を”Fast 3Gなどにするとよいかもしれません。

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

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

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

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

上述の手順で原因要素が特定できたら各要素に応じた対処を行います。
以下の記事も参照ください。

ページスピードインサイトの使い方とコアウェブバイタル(LCP/FID/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は先に読み込まれるようにしておく必要があります。

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

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

無限スクロール中に一瞬フッターが表示されるページでは、読み込みのたびにフッターが移動し、CLSスコアが低下する可能性があります。対処法としては、以下の3つが考えられます。
・プレースホルダを設定する
・フッターを削除する
・スクロール前にコンテンツを表示しておく

この中ではフッターを削除する対応が一般的なようです。

Webフォント

Webフォントが適用された際に、適用されたフォントがフォールバックフォントとサイズが異なっていると、わずかなレイアウトのずれが生じる可能性があります。
フォントは<link rel=”preload”>でpreloadしたり、CSSのfont-displayプロパティを使用したりすることで影響を軽減できますが、フォントだけではCLS不良の主要要因にはならないと考えられるため、問題を解消するためには他にCLSの原因となっている要素がないか特定することが必要でしょう。

まとめ

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

ねぎお社長 (根岸雅之)

執筆者 / 監修者

サクラサクマーケティング株式会社 取締役社長 COO

1980年生まれ 東京都稲城市出身、都立三鷹高等学校、専修大学文学人文科学を卒業後、2003年に学校関連の広告・出版を扱う株式会社JS コーポレーションに入社。

3年勤務した後に、学生時代より、ベンチャー企業への興味関心が高かったこと、より企業の課題解決に向き合っていきたいという想いから、WEB マーケティング業界へ転身。
2006年にSEM コンサルタントとして、インターネット総合代理店、株式会社オプトに入社。リスティング、ディスプレイ広告の運用から、SEOの施策提案など主にキーワードマーケティング領域に特化した業務に従事。

同年10月に、当時4名のベンチャー企業であった当社の役員と共鳴し、転職。入社後は、営業をはじめ、SEOコンサルティング、新規事業開発、自社マーケ、人事、財務と幅広い領域を経験し、営業部長、執行役員、取締役と経て、2015 年に社名変更とともに取締役社長に就任。

SEOコンサルタントとして大規模サイトから新規サイトまで、売上向上に繋がるコンサルティングを武器に200サイト以上の実績。9年連続でラスベガスで開催されるPUBCONに参加するなど海外の最新のSEO情報の収集にも尽力。
現在は、サクラサクラボの編集長、サクラサクラボチャンネルでの情報発信などの自社マーケティングを通じてBtoBマーケティングにも精通し、ここで培ったノウハウをもとにコンサルティングを展開。

3歳から現在に至るまで、サッカーを続けており、組織マネジメントにおいて、この経験値を大いに活用している。

◇ 情報発信
ねぎお社長のWEBマーケティングチャンネル
ねぎお社長Twitter
ねぎお社長Facebook
ねぎお社長Instagram
ねぎお社長linkedin
ねぎお社長note

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

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

その他のブログ記事

Return Top