皆さんはCLS(Cumulative Layout Shift)をご存知ですか？
CLSとは、UXの向上に重要なCore Web Vitalsの1つで、主にコンテンツの視覚的な安定性を測る指標です。
今回はCISの概要や効果、指標の測定方法、改善方法などについて解説します。

CLS(Cumulative Layout Shift)とは？

CLS(Cumulative Layout Shift)とは、UXの向上に重要とされているCore Web Vitalsの1つです。表示されるコンテンツの予期せぬレイアウトの「ズレ」を測る指標で、レイアウトがどの程度安定しているかを表します。

CLSの評価基準

以下はCLSの評価基準です。

UXが「良好」と判断されるためには、表示されるページは0.1以下のCLSを維持することが理想的と言われています。

Core Web Vitalsの概要

これら3指標(LCP,FID,CLS)を総称したものが、Core Web Vitalsです。Core Web Vitalsは、Googleの新しい検索ランキング要因にもなっています。

CLSの低下要因

ここでは、CLSの低下要因について3点解説します。

サイズ指定がない画像や広告の埋め込み

サイズ指定がない画像や広告の埋め込みは、CLSの低下要因になりえます。

画像にサイズ指定がないと、画像が読み込まれた時点で画像の高さ分レイアウトがズレ、画像読み込みのラグでスライダーの高さが変わります。
スライダーとは、スライドショーのことで、主にWebサイトのメインビジュアルに使用されるもの。
メインビジュアルのレイアウトがズレると視覚的な観点からUXが低下し、結果的にCLSの低下につながります。

JavaScriptによる動的なコンテンツが多い

JavaScriptによる動的なコンテンツが多い場合も、CLSの低下要因になりえます。
広告や埋め込み動画など動的なコンテンツがある場合にもレイアウトのズレが起こりやすいです。
画像の時と同じように、読み込みの際にスライダーの高さも変わるため、CLSが低下します。

Webフォントの読み込みに時間がかかる

Webフォントの読み込みに時間がかかる場合も、CLSの低下要因になりえます。

Webフォントとは、あらかじめWebサーバー上に置かれているフォントデータです。
主にインターネット上で配布されているフォントデータを読み込みます。

Webフォントを読み込めば、ユーザー側の閲覧環境に左右されず、コンテンツの製作者が意図したとおりのデザインで閲覧表示されるメリットがあります。

しかし、Webフォントを使用する際、FOUT(Flash of Unstyled Text)やFOIT(Flash of Invisible Text)に注意が必要です。

読み込むwebフォントが多ければ多いほど、フォントの変換に時間がかかり、コンテンツの表示速度が遅くなります。

CLSの改善方法

ここでは、CLSの改善方法について3点解説します。

画像サイズを常時指定する

画像サイズを常時指定することは、CLSの改善につながります。

画像サイズは、CSSで設定可能です。
その際、画像サイズを変更するimgタグにwidth属性(広さ：横)とheight属性(高さ：縦)を指定します。

画像サイズを指定すれば、画像が読み込まれる前でも表示領域を確保でき、表示されるコンテンツの予期せぬレイアウトの“ズレ”を防げます。

動的コンテンツのスペースの確保する

動的コンテンツを挿入する際に、あらかじめスペースを確保しておくこともCLSの改善につながります。
動画コンテンツも画像サイズを指定した時と同じように、表示領域を事前に確保することで、表示されるコンテンツの予期せぬレイアウトの“ズレ”を防ぐことが可能です。

フォールバックによるフォントの”ズレ”を改善する

フォールバックによるフォントの”ズレ”を改善することもCLSの改善につながります。

フォールバックとは、通常時に使用される方式や系統が正常に機能しなくなった際、機能や性能に制限を加えたり、別の方式や系統に切り替えて使用可能な状態を維持することです。

フォールバックの際も表示されるコンテンツに予期せぬレイアウトの“ズレ”が発生する場合があります。

コンテンツを制作する際は、フォールバック時のことも考え、CSSプロパティやWebフォントのレンダリングを最適化することがおすすめです。

CLSの測定ツール

ここでは、FIDの測定ツールについて3点解説します。

Google Search Console (Core Web Vitals report)

Google Search Console (Core Web Vitals report)では、検索エンジンにおけるサイトパフォーマンスを分析できます。使用すると、検索KWの順位やアクセス数など、コンテンツの検索順位を下げる可能性のある問題点を確認できます。Googleが無料で提供しているツールで、企業のWeb担当者の方やサイトを運営している方であれば、導入すべきツールです。

Google Search Consoleを利用してみる

PageSpeed　Insights

PageSpeed　Insightsは、ページの読み込み速度を計測し、Googleが決めたスコアで表示するツールです。調べたいサイトがあった場合、そのサイトのURLを入力すると、速度スコアとともにCore Web Vitalsの数値が表示されます。モバイル端末だけでなく、デスクトップも含めてページパフォーマンスに関するレポートを確認可能なため非常に便利なツールです。

PageSpeed Insightsを利用してみる

Chrome DevTools

Chrome DevToolsとは、開発者向けのデバッグツールです。Google Chromeに搭載されており、デザインの確認だけでなく、スマホ端末で表示した際のエラーの確認などデバッグの際必要な確認の多くを行えます。

Chrome DevToolsを利用してみる

CLSを改善してUXを高め、SEO対策を始めよう！

今回はCLSの概要や効果、指標の測定方法、改善方法などについて解説しました。予期せぬレイアウトの“ズレ”はユーザーにストレスを与え、UX評価を下げる要因になります。
視覚的なCLSは、LCPやFIDに比べ、目に見えて改善しやすいです。CLSを改善すれば、UXを高められるだけでなく、SEO対策にもつながります。CLS改善の際は、ぜひ本サイトを参考にしていただけますと幸いです。もしSEOに関して何か不安があれば、いつでも弊社へご相談ください。SEOを考慮した最適解をご提示いたします。

また、弊社ではサイトの無料分析を行っています。気になる方はお気軽にご相談ください。

資料をご希望の方は、下記フォームよりお申し込みください。
ご登録いただいたメールアドレス宛に、PDF閲覧用のURLが送信されます。
迷惑メールフォルダ等に入っていないかご確認くださいませ。