皆さんは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の評価基準です。
| 不良 | 改善が必要 | 良好 | |
| CLSの評価基準 | 0.25以上 | 0.25以内 | 0.1以下 |
UXが「良好」と判断されるためには、表示されるページは0.1以下のCLSを維持することが理想的と言われています。
Core Web Vitalsの概要
| 概要 | |
|---|---|
| LCP(Largest Contentful Paint) | メインコンテンツの読み込み時間を測る指標 |
| FID(First Input Delay) | Webサイトやページのインタラクティブ性を測る指標 |
| CLS(Cumulative Layout Shift) | コンテンツの視覚的な安定性を測る指標 |
これら3指標(LCP,FID,CLS)を総称したものが、Core Web Vitalsです。Core Web Vitalsは、Googleの新しい検索ランキング要因にもなっています。
CLSの低下要因
ここでは、CLSの低下要因について3点解説します。
・JavaScriptによる動的なコンテンツが多い
・Webフォントの読み込みに時間がかかる
サイズ指定がない画像や広告の埋め込み
サイズ指定がない画像や広告の埋め込みは、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)に注意が必要です。
| FOIT (Flash of Invisible Text) | ブラウザがWebフォントをダウンロードする前にテキストが非表示になる時間 |
|---|---|
| FOUT (Flash of Unstyled Text) | ブラウザがWebフォントをダウンロードする前にフォールバックのフォントでテキストがレンダリングされる時間 |
読み込む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担当者の方やサイトを運営している方であれば、導入すべきツールです。
PageSpeed Insights
PageSpeed Insightsは、ページの読み込み速度を計測し、Googleが決めたスコアで表示するツールです。調べたいサイトがあった場合、そのサイトのURLを入力すると、速度スコアとともにCore Web Vitalsの数値が表示されます。モバイル端末だけでなく、デスクトップも含めてページパフォーマンスに関するレポートを確認可能なため非常に便利なツールです。
Chrome DevTools
Chrome DevToolsとは、開発者向けのデバッグツールです。Google Chromeに搭載されており、デザインの確認だけでなく、スマホ端末で表示した際のエラーの確認などデバッグの際必要な確認の多くを行えます。
CLSを改善してUXを高め、SEO対策を始めよう！
今回はCLSの概要や効果、指標の測定方法、改善方法などについて解説しました。予期せぬレイアウトの“ズレ”はユーザーにストレスを与え、UX評価を下げる要因になります。
視覚的なCLSは、LCPやFIDに比べ、目に見えて改善しやすいです。CLSを改善すれば、UXを高められるだけでなく、SEO対策にもつながります。CLS改善の際は、ぜひ本サイトを参考にしていただけますと幸いです。もしSEOに関して何か不安があれば、いつでも弊社へご相談ください。SEOを考慮した最適解をご提示いたします。
また、弊社ではサイトの無料分析を行っています。気になる方はお気軽にご相談ください。
「Core web vitals」資料公開中！
資料をご希望の方は、下記フォームよりお申し込みください。
ご登録いただいたメールアドレス宛に、PDF閲覧用のURLが送信されます。
迷惑メールフォルダ等に入っていないかご確認くださいませ。