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

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

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

⇒Googleがぺージエクスペリエンスアップデート延期発表！今後の予定・変更点は？

コアウェブバイタル（Core Web Vitals）の概要

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

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

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

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

CLSとは

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

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

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

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

測定ツールと使い方

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

Search Console

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

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

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

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

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

PageSpeed Insights

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

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

Light House (Google Chrome拡張機能)

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

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

Web Vitals (Google Chrome拡張機能)

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

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 サイト制作サービスを提供しております。「サイトからお問い合わせやコンバージョンを創出したい」とお考えの方はぜひ、ご相談ください。