目次
「CLS（Cumulative Layout Shift）」は、Webページの視覚的な安定性を測る指標です。CLSの悪化はユーザー体験の悪化に直接的に影響するケースがあるため、Webサイトの運営に携わっている人なら誰もが監視しておくべき指標のひとつといえます。
また、CLSは「Core Web Vitals（コアウェブバイタル）」という、Googleが提唱する指標群に組み込まれており、検索順位にも影響を及ぼしています。このページではCLSの意味や計測方法をわかりやすく解説するとともに、スマートなCLSの改善方法も紹介していきます。
サイト表示速度の現状を競合と比較してプロが診断！
CLS（Cumulative Layout Shift）とは？言葉の意味と定義
「CLS」とは、Webページの読み込み時や操作時に、ユーザーが予期していないタイミングで発生するレイアウト変化（レイアウトシフト）の量をスコア化した指標です。Webページの視覚的な安定性を評価するために使用されます。CLSのスコアが低ければ低いほど視覚的に安定しており、Googleは0.1以下を理想的なCLSであるとしています。なお、CLSは「Cumulative Layout Shift」の略語です。
CLSがいかにユーザー体験にとって重要なのかは、下の動画を見るとよくわかります。動画内でユーザーは「No, go back」のボタンをタップしようとしていました。しかし、ページ上部に遅れて広告が表示されたため、ページ全体の要素が下にシフト。これにより、「No, go back」があった位置に「Yes place my order」ボタンが移動してきました。その結果、ユーザーは誤って「Yes place my order」ボタンをタップしてしまっています。
ユーザーが予期していないタイミングでのレイアウト変化は、コンテンツの閲覧しやすさを損なうだけでなく、経済的な損失すらも招いてしまう可能性があるのです。
■レイアウトシフトによって発生したユーザーの誤タップ
注文の確認画面。ユーザーは購入をキャンセルするために「No, go back」ボタンをタップしようとしたが、レイアウトシフトの発生によって「Yes place my order」ボタンを誤ってタップし、注文を確定してしまっている。
出典：Cumulative Layout Shift（CLS）
レイアウトシフトが起きる代表的な要因
レイアウトシフトが起きる要因には様々なものがありますが、多くのサイトは以下の3つの要因に起因するレイアウトシフトを抱えています。
- 画像や動画のサイズが指定されていない
Webページ内に表示される画像や動画のサイズが事前に指定されていないと、画像や動画を読み込んだときに周囲の要素が動いてしまいます。 - 広告やコンテンツが遅れて読み込まれる・動的読み込まれる
動的に挿入される広告やコンテンツが遅れて読み込まれると、周囲のコンテンツが押し出される形になりレイアウトシフトが発生します。 - カスタムフォント（Webフォント）が遅れて読み込まれる
Webページのテキスト要素にカスタムフォント（Webフォント）を使用していると、「カスタムフォントが読み込まれるまでテキストが表示されない」「標準フォントで表示されてからカスタムフォントに置き換わる」という挙動が発生するケースがあります。このときテキストが追加表示されたり、フォントの形状が変化することでレイアウトシフトが発生します。
CLSの計測対象と計測方法
CSLは「ユーザーが予期していないタイミングで発生するレイアウト変化（レイアウトシフト）の量をスコア化した指標」であると説明しました。それでは、具体的にどんなレイアウトシフトを測定対象としており、どのようにスコア化しているのでしょうか。CLSの詳細について解説していきます。
ユーザーが予期しないすべてのレイアウトシフトがCLSの計測対象
最初のページ読み込みからユーザーがページを操作している最中までに発生する、ユーザーが予期していないレイアウトシフトのすべてがCLSの計測対象となります。
ただし、クリックやタップ、ボタンの押下などのユーザーによる操作から500ミリ秒以内に発生するレイアウトシフトは除外されます。これは、そのレイアウトシフトがユーザーの操作の結果であることが想定され、ユーザーが予期していないものではないからです。
CLSの計測方法
CLSの計測方法を理解するためには、「レイアウトシフトスコア」と呼ばれる指標と、それがどのようにCLSとして計測・アウトプットされるかを知る必要があります。それぞれについて見ていきましょう。
レイアウトシフトスコアの算出方法
レイアウトシフトスコアとは、Webページ内で発生するレイアウトの変化それぞれに与えられるスコアです。次の数式で算出されます。
レイアウトシフトスコア = 影響率×距離の割合
「影響率」「距離の割合」の算出方法は以下の通りです。
【影響率】
レイアウトシフトが、表示領域内のどのくらいの割合に影響を与えたかを示す数値です。例えば、下の図では、グレー背景のテキスト領域の上に白い空白領域が追加されたことで、表示領域全体の75％が影響を受けています。このときの影響率は「0.75」です。
白い空白領域が追加されたことで、グレー背景のテキスト領域が下にシフトしている。その結果として赤い点線で示した、表示領域全体の75％に変化が発生した。
出典：Cumulative Layout Shift（CLS）
【距離の割合】
レイアウトシフトによって要素がどの程度動いたかを示す指標で、動いた実際の距離を表示領域の最大寸法で割った値です。下の図では表示領域の最大寸法である高さの25％の距離を要素が移動しているため、距離の割合は「0.25」です。
白い空白領域が追加されたことで、要素が紫色の矢印の距離だけ移動している。この矢印の長さは表示領域の縦幅の25％にあたっている。
出典：Cumulative Layout Shift（CLS）
【レイアウトシフトスコアの算出】
上記の例の場合のレイアウトシフトスコアは、影響率が「0.75」、距離の割合が「0.25」なので、以下のように算出されます。
レイアウトシフトスコア＝0.75×0.25＝0.1875
CLSが計測・決定される仕組み
ユーザーがWebページにアクセスすると、複数のタイミングで複数のレイアウトシフトが発生する可能性があります。そのため、CLSを計測する際には、ひとつひとつのレイアウトシフトスコアを単純にCLSに反映させるわけではなく、グループ化（バースト・セッションウィンドウ）して計測します。
グループ化の条件は、各レイアウトシフトの間隔が1秒未満であること。このとき、最大5秒間のレイアウトシフトをひとつのグループとします。言葉だけではわかりづらいので例を挙げて説明しましょう。
仮にWebページ内で下記のようなグループA、グループBのレイアウトシフトが発生していたとします。グループAには「A-1」「A-2」「A-3」の3つのレイアウトシフトが含まれており、グループBは「B-1」「B-2」のふたつのレイアウトシフトで構成されています。
■グループA
| 影響率 | 距離の割合 | レイアウトシフトスコア | |
| レイアウトシフトA-1 | 0.10 | 0.05 | 0.005 |
| レイアウトシフトA-2 | 0.50 | 0.25 | 0.125 |
| レイアウトシフトA-3 | 0.30 | 0.15 | 0.045 |
■グループB
| 影響率 | 距離の割合 | レイアウトシフトスコア | |
| レイアウトシフトB-1 | 0.20 | 0.10 | 0.020 |
| レイアウトシフトB-2 | 0.40 | 0.20 | 0.080 |
このとき、それぞれのグループのレイアウトシフトスコアは、グループを構成するすべてのレイアウトシフトスコアの合計となります。つまり、グループAのレイアウトシフトスコアは「0.175」、グループBは「0.100」です。
そして最終的なCLSには、グループごとに算出されたレイアウトシフトスコアのうち、最も大きな数値が採用されます。つまり、ここで説明した例では、グループAのレイアウトシフトスコアである「0.175」が、WebページのCLSとなるわけです。
CLSを計測するためのツールと使い方
CLSのスコアを確認する方法には様々なものがあり、どれを選んだとしても大きな問題は発生しません。このページではGoogleが提供するWebパフォーマンス診断ツール「PageSpeed Insights」を使ったCLSの計測方法を紹介します。
PageSpeed InsightsにアクセスしてURLを入力
PageSpeed Insightsにアクセスすると、URLの入力ボックスが表示されます。CLSを計測したいWebページのURLを入力して「分析」ボタンを押しましょう。
ページ上部にあるURLの入力ボックスにCLSを計測したいWebページのURLを入力し、「分析」ボタンをクリックする。CLSはページ単位で計測するものなので、計測したいページのURLをピンポイントで入力すること。
出典：PageSpeed Insights
診断結果が表示される
「分析しています」と表示されたあとに診断結果が表示されます。診断結果は現実のユーザーのアクセスデータを集約した「実際のユーザーの環境で評価する」と、課題把握用の特定環境のデータを表示する「パフォーマンスの問題を診断する」のふたつのブロックに分かれています。CLSを確認する際は、「実際のユーザーの環境で評価する」と「パフォーマンスの問題を診断する」の「パフォーマンス」ブロックをチェックしましょう。
実際のユーザーの環境で評価する
過去28日間に実際にアクセスしたユーザーに対してどのようなユーザー体験を提供できたかを確認できます。「Chrome ユーザー エクスペリエンス レポート（CrUX）」という、Google Chromeを用いてアクセスしたユーザーのデータを集約したものです。
「実際のユーザーの環境で評価する」の数値は複数のユーザーのデータを基にしているため、診断結果に表示される数値は75パーセンタイルの数値です。この数値が0.1以下で「良好」、0.25以下で「改善が必要」、0.25を超えると「不良」と評価されます。
青い囲みで示した右上の「Cumulative Layout Shift（CLS）」にCLSのスコアが表示されている。画面の例では0.25がCLSの75パーセンタイルの数値。
出典：PageSpeed Insights
パフォーマンスの問題を診断する
特定環境下でのWebサイトのパフォーマンスを確認できます。各指標の数値だけでなく、改善余地を示すためのスコア、さらには具体的な課題と改善方法が表示されるため、Webサイトの改善点を探す目的で使用します。
左の画面が各指標の数値やスコアが表示されている部分。CLSのスコアは右列の2段目に表示されており、ここでは0.246となっている。右の画面は具体的な課題と改善方法の一覧。
出典：PageSpeed Insights
スマートなCLS改善方法
CLSの改善方法は、他のCore Web Vitals指標である「LCP（Largest Contentful Paint）」「INP（Interaction to Next Paint）」のものと比べると格段にシンプルです。基本的には挿入される画像や動画、コンテンツなどの表示領域を事前に確保しておくだけでOK。また、カスタムフォントに起因するレイアウトシフトはフォントの表示、読み込み方法を最適化することで軽減できます。
画像、動画、コンテンツの表示領域を事前に確保する
画像や動画、コンテンツの挿入によるレイアウトシフトを防ぐためには、事前に挿入領域を確保しておく方法が有効です。
<img>要素（画像）や<video要素>（動画）には、width属性とheight属性を利用して、デフォルトの縦横のサイズを指定しておきましょう。最新のブラウザでは、「width属性」と「height属性」に設定された値に合わせてアスペクト比（縦横比）が自動的に計算され、CSSの設定に即して実際の表示領域を事前に確保することができます。
広告や動的に挿入されるコンテンツは<div>要素として記述されることが多いため、CSSの「aspect-ratio」プロパティを使用してコンテンツのアスペクト比を指定し、事前に表示領域を確保します。
フォントの表示・読み込み方法を最適化する
フォント要因のレイアウトシフトを改善する最も効果的でシンプルな方法はカスタムフォント（Webフォント）を使用しないことです。デザインや世界観に強いこだわりがない限り、デフォルトのフォントでもユーザー体験に大きな損失はないはずです。レイアウトシフトを防止するという観点では、可能な限り、カスタムフォントの使用を避けることをおすすめします。
カスタムフォントを使用する場合は、カスタムフォントが読み込まれるまでのテキストの表示方法と読み込み優先度に注目してレイアウトシフトの防止を図りましょう。
「FOIT（Flash of Invisible Text）」という、カスタムフォントが読み込まれるまでの時間にテキストが表示されない状態が起きている場合は、CSSの「font-display」プロパティを使用して、カスタムフォントが読み込まれる前にデフォルトのフォントを使用してテキストを表示する設定にします。具体的には「font-display: swap;」という形で、「swap」という値を設定します。
「FOIT（Flash of Invisible Text）」の発生を抑える方法として、カスタムフォントへのリンクの「rel」属性に「preload」という値を設定する方法もあります。この設定により、フォントが優先的に読み込まれ、カスタムフォントの読み込み時間を短縮できます。
CLSについてのよくある質問
最後にCLSについて多くの人が抱いている疑問にまとめて回答していきます。気になる点がある人はぜひチェックしてください。
Q：フィールデータとラボデータが大きく異なっているのですが、どちらを参考にするのがいいでしょうか？
PageSpeed Insightsの診断結果の「実際のユーザー環境で評価する」の内容をフィールドデータ、「パフォーマンスの問題を診断する」の内容をラボデータと表現することがあります。CLSに限らず、PageSpeed Insightsの診断結果をチェックする際は、フィールドデータを参考にすることをおすすめします。実際にユーザーが体験している現象に近しいものだからです。
ラボデータは特定の環境に限定された診断結果であり、現実の状態とは大きく異なるケースがあります。ラボデータは改善の指針を立てるためのものという認識をしておくのがよいでしょう。
Q：CLSの改善はSEO（検索エンジン最適化）に効きますか？
「効く」「効かない」の選択肢で答えるのであれば、「効く」が正しい回答ではあります。Googleの検索順位を決めるランキングシグナルのひとつとして採用されているからです。
ただし注意が必要なのは、「効く＝必ず順位が上がる」ではないこと。検索順位の決定において、検索意図との関連性やコンテンツの品質のほうがCSLよりも影響度が高いため、仮にCLSだけが理想的だったとしても上位表示は難しいといえます。
Q：PageSpeed Insightsで「レイアウトが大きく変わらないようにする」と診断結果一覧に表示されました。どうすればいいですか。
PageSpeed Insightsの診断結果一覧に「レイアウトが大きく変わらないようにする」と表示されたときは、CLSの改善余地があることを示しています。診断結果を展開すると、大きなレイアウトシフトが起きた要素とレイアウトシフトを引き起こした要因を確認することができるので個別に対処しましょう。
サイト表示速度の現状を競合と比較してプロが診断！
あわせて読みたいコアウェブバイタル（Core Web Vitals）関連記事
コアウェブバイタル（Core Web Vitals）とは？
コアウェブバイタルの意味や確認方法、SEOへの影響を、WebマーケターやSEO担当者に向けてわかりやすく解説しています。
⇒ コアウェブバイタルの意味とSEOへの影響を詳しく見る
LCP（Largest Contentful Paint）とは？
LCPの意味や計測の対象・方法、改善策を、WebマーケターやSEO担当者に向けてわかりやすく解説しています。
⇒ LCPの意味と改善方法を詳しく見る
INP（Interaction to Next Paint）とは？
INPの意味や計測の対象・方法、改善策を、WebマーケターやSEO担当者に向けてわかりやすく解説しています。
⇒ INPの意味と改善方法を詳しく見る
執筆者
