Skip to content
イノーバマーケティングチーム2024/02/02 17:53:081 min read

CLSとは?コアウェブバイタルの概要、測定ツールから低下要因、改善方法まで解説

CLSは、ユーザーに優れたユーザーエクスペリエンス(以下UX)を実現するための核になる、コアウェブバイタルの3指標の一つです。今回は、コアウェブバイタルの概要とCLS、測定ツールと確認方法、CLSの低下要因と改善方法について紹介します。

イノーバでは、サイト設計やサイト活用を支援する、BtoB企業専門のWEB サイト制作サービスを提供しております。よろしければこちらもご覧ください。

 

※(5/14更新)今月予定されていた、コアウェブバイタルを含むページエクスペリエンスアップデートの延期がGoogleより発表されました。詳細は以下の記事よりご覧ください

参考記事:Googleがぺージエクスペリエンスアップデート延期発表!今後の予定・変更点は?

コアウェブバイタル(Core Web Vitals)の概要

コアウェブバイタル(Core Web Vitals)は、2021年5月からグーグルの検索ランキング要因に新しく組み込まれる予定の3つの指標です。コアウェブバイタルは、ウェブバイタル(Web Vitals)の中でも核(Core)となる重要な指針、「LCP」「FID」「CLS」をさします。

102図1.png

画像引用元:Web Vitals の概要: サイトの健全性を示す重要指標

ウェブバイタル(Web Vitals)とは、
"ウェブで優れたユーザーエクスペリエンスを実現するために重要だと思われる品質シグナルの統合ガイドを提供する取り組みです。"
引用元:Web Vitals の概要: サイトの健全性を示す重要指標

この3つの指標は、グーグルがUXで核になると考えるユーザーの重要なニーズ「読み込み時間(LCP)」「インタラクティブ性(FID)」「ページコンテンツの視覚的な安定性(CLS)」に対応しています。

CLSとは

102図2.png

コアウェブバイタルの3指標の中で、ユーザーの「ページコンテンツの視覚的な安定性」のニーズに対応するのがCLSです。CLSはCumulative Layout Shiftの略で、「累積レイアウト変更」の意味があります。

CLSは、ページの視覚的な安定性を測る指標で、読み込みフェーズで予期しないレイアウトのズレがどのくらい発生したかを表します。

"Cumulative Layout Shift は、ページがどのくらい安定しているように感じられるかを表します。視覚的な安定性を測定し、表示されるページ コンテンツにおける予期しないレイアウトのずれの量を定量化します。"
引用元:Web Vitals の概要: サイトの健全性を示す重要指標

評価スコアの範囲は、0から1です。0は移動なし、1は移動量が最大であることを示します。スコア0.1未満が「良好」、0.25以下は「改善が必要」、0.25を超えると「不良」と判断されます。

測定ツールと使い方

グーグルは、コアウェブバイタルの測定ツールを各種提供しています。それぞれのツールでのCLS確認方法を紹介します。

Search Console

102図3.png

画像引用元:Core Web Vitals report Search Console checks site speed

ホームページ全体のコアバイタルの3指標傾向と問題があるURL が分かります。3指標は「良好: Good」「改善が必要: Need Improvement」「不良: Poor」の3段階で判定表示されます。

分析したいホームページをSearch Consoleに登録し、左サイドメニューバー「拡張: Enhancements」の中にある「ウェブに関する主な指標: Core Web Vitals」を選択します。表示されるのは、実際のユーザーから取得したフールドデータで分析されたレポートです。

レポートの詳細で「不良: Poor」にCLSがないか確認し、問題があれば、そのページURLを調べます。「改善が必要: Need Improvement」のURLは改善の余地がありますが「不良: Poor」より重要度は下がるため、「不良: Poor」のURLを全て修正してから、「改善が必要: Need Improvement」の問題に対処するのがオススメです。

具体的な問題箇所は提示されないので、詳しい問題点と改善策は、次に紹介するPageSpeed Insightsで問題が検出されたページの共通点を分析して確認します。

PageSpeed Insights

102図4.png

PageSpeed Insightsにアクセスし、調査したいホームページのURLを入力して、分析をクリックします。

102図5.png

表示されるCLS(Cumulative Layout Shift)の数値が、グーグルが設定する目標数値内かを確認します。
データは、ラボデータとフィールドデータで確認できます。フィールドデータは実際のユーザーから取得したデータ、ラボデータは特定の環境で取得したテストデータです。さらにその下にあるCLSに関係する問題点と改善提案を参照します。

Light House (Google Chrome拡張機能)

102図6.png

Light Houseには、Chrome拡張機能やコマンドラインツールとして実行する方法などがあります。(※画像はChrome機能拡張での操作画面です。)

102図7.png

Performanceの下にある、Cumulative Layout Shiftを参照し、CLSが目標数値内かを確認します。

Web Vitals (Google Chrome拡張機能)

102図8.png

機能拡張を有効化し、Chromeブラウザで計測したいサイトのページを開いて測定すると、結果が表示されます。CLSが目標数値内かを確認します。

参考資料:BtoBマーケティングを体系的に学ぶ

CLSの低下要因

CLSの一般的な低下要因には次のようなものがあげられます。

●  サイズ指定がない画像

●  サイズ指定がない広告、埋め込み、iframe

●  コンテンツが動的に埋め込まれる

●  Webフォントの読み込み(FOUTやFOIT)

●  DOMを更新する前にネットワーク応答を待機するアクション

サイズ指定がない画像が要因になるのは、サイズ指定されていない画像の下にテキストがレイアウトされているような場合です。

この場合、ブラウザはテキストの方が軽いためテキストから読み込みを始めます。ページにテキストを表示している間に、画像を読み込みながら画像サイズを理解し、テキストの上に画像が入る領域をつくり、そこに画像を表示させます。

ユーザー側では、読みかけていたテキストの上にいきなり画像が出現し、テキストが画像の下に押しやられ呼んでいたのを中断されるといった体験をします。初めから画像サイズが指定されていれば、ブラウザは画像領域を初めから確保できるためレイアウトのズレは起こりません。

Webフォントは、サーバーにフォントファイルを置き、ブラウザに読み込みこんで表示することで、パソコン環境に左右されず指定したフォントが表示されます。Webフォントの読み込みが要因になる場合は、Webフォントがブラウザに読み込まれる間に生じるFOUTやFOITが関係します。

FOUT(Flash of Unstyled Text)は、Webフォントが読み込まれるまで代替フォントが表示され、指定したWebフォントに切り替わる際、文字幅の変化からコンテンツ移動やチラつきがおこる現象です。
FOIT(Flash of Invisible Text)は、Webフォントが読み込まれるまで、テキストが表示されない現象です。

CLSの改善方法

CLSの改善では、以下のような対策が考えられます。

画像サイズを指定する

サイズ指定がない画像が問題になる場合は、画像が読み込まれる前に画像の表示領域を確保することで解決できます。画像は常にwidthとheight要素でサイズを指定するか、cssアスクペクト比率を使い画像が表示される前から予定する画像領域を確保するようにします。

広告表示領域を予約する

広告も画像と同じように、表示領域を事前に確保することで、トラブルが防げます。
広告サイズが定まっていない時は、過去の経験から最も適切だと思われるサイズで表示領域を予約するとよいでしょう。ただし、常に最大サイズで指定してしまうと空白ができるので注意が必要です。

WebフォントのFOUTやFOITを最小限に抑える

FOUTやFOITを最小限に抑えるには、CSSプロパティのfont-displayやHTML で Webフォントのレンダリングサイクルを最適化します。
ただし、 は、対応していないブラウザがあるので注意が必要です。

まとめ

何かの操作をしようとしている最中のページの予期しないズレは、様々なストレスをユーザーに与えます。視覚的な安定性は、ユーザーがサイトに集中するためにも大切です。CLSは他のコアウェブバイタルの指標である「LCP」「FID」に比べると、原因が比較的わかりやすく改善しやすいといわれます。近くSEOのランキング要因に組み込まれる指標にもなるため、各種ツールを活用してさっそく状況を把握していきましょう。

イノーバでは、Webサイト集客やサービスの魅力の伝達力強化などをご支援する、BtoB企業専門のWEB サイト制作サービスを提供しております。「サイトからお問い合わせやコンバージョンを創出したい」とお考えの方はぜひ、ご相談ください。

参考資料:BtoBマーケティングを体系的に学ぶ

avatar

イノーバマーケティングチーム

株式会社イノーバの「イノーバマーケティングチーム」は、多様なバックグラウンドを持つメンバーにより編成されています。マーケティングの最前線で蓄積された知識と経験を生かし、読者に価値ある洞察と具体的な戦略を提供します。

関連記事

人気記事

2024/02/04 15:35:03

5W1Hとは?今すぐビジネスに活かせる3つの応用パターンを事例含めて徹底解説!

5W1Hの基礎知識と正しい使い方
Start Reading
2024/02/05 10:34:24

ブランディングの意味とプロセスを分かりやすく解説!マーケティングとの違いや、SNSで好印象を与えるコツも紹介

ブランディングの意味やプロセスを分かりやすく解説します。マーケティングやプロモーションとの違いも説明。効果的なブランディングのコツやポイント、成功事例も紹介。イノーバの伴走型マーケティング支援サービスもご覧ください。
Start Reading
2024/02/02 21:14:35

URLの基礎知識:構成要素の意味からSEO対策まで分かりやすく解説!

URLとは何か、基本的な構成要素から分かりやすく説明。独自ドメインやHTTPSなどのSEO対策も解説。Webサイトを制作・運営する上で知っておくべきURL の基礎知識をまとめました。
Start Reading
2024/02/05 10:44:38

ディレクトリとは何か?初心者向けに意味や種類、WebディレクトリとSEOの関係まで徹底解説!

ディレクトリの意味や種類、Web上でのディレクトリの役割について初心者向けに丁寧に解説。ディレクトリとフォルダの違いや、Webディレクトリがなぜ重要なのかなども詳しく説明しています。ディレクトリを理解して、Webサイト制作・運営に役立てましょう。
Start Reading
2024/02/05 10:37:34

ファイブフォース分析とは?具体例を挙げながらわかりやすく解説

ファイブフォース分析とは?具体例を挙げながらわかりやすく解説
Start Reading
2024/02/05 8:54:38

マーケティング戦略で使える5W1Hとは?基本知識とケーススタディ7選

マーケティング戦略で使える5W1Hとは?基本知識とケーススタディ7選
Start Reading