2021年08月27日 -

CLS(Cumulative Layout Shift)とは?概要や効果、指標の測定方法、改善方法などについて徹底解説!

皆さんは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を考慮した最適解をご提示いたします。

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

コアウェブバイタル集中対策セミナー実施決定!

    必須会社名

    必須部署名

    必須

    必須

    必須メールアドレス

    任意SEO対象サイトURL

    任意電話番号

    任意ウェブ集客に関してお持ちの課題を教えてください。

    個人情報保護方針

    当サイトの運営に際し、お客様のプライバシーを尊重し個人情報に対して十分な配慮を行うとともに、大切に保護し、適正な管理を行うことに努めております。

    【個人情報の利用目的】
    a) お客様のご要望に合わせたサービスをご提供するための各種ご連絡。
    b) お問い合わせいただいたご質問への回答のご連絡。

    取得した個人情報は、ご本人の同意なしに目的以外では利用しません。
    情報が漏洩しないよう対策を講じ、従業員だけでなく委託業者も監督します。
    ご本人の同意を得ずに第三者に情報を提供しません。
    ご本人からの求めに応じ情報を開示します。
    公開された個人情報が事実と異なる場合、訂正や削除に応じます。
    個人情報の取り扱いに関する苦情に対し、適切・迅速に対処します。

    当社規定の「個人情報保護方針」の内容に同意する