CLS（Cumulative Layout Shift）とは？低下の原因や測定方法、改善方法について解説

2021年6月からGoogleのランキング要因に組み込まれた、Webページのユーザーエクスペリエンスに関する重要指標のコアウェブバイタル（Core Web Vitals）。

コアウェブバイタルの３指標の中で、ユーザーの「ページコンテンツの視覚的な安定性」に対応する指標がCLSです。

本記事では、CLSについて「何を表しているのか・どう測定するのか・どう改善するのか」について解説します。

CLSとは

CLS（Cumulative Layout Shift）とは、ページコンテンツにおける「視覚的な安定性を示す指標」です。

表示されたページ内で、意図せぬレイアウトの「ズレ」や「崩れ」がみられることってありますよね？

例えば、Webサイトを閲覧している際に下記の様な現象を経験したことはありませんか？

• ページを開いた瞬間に画像が大きく表示され、その後小さくなった。
• ページが表示されテキストを読み始めたら、広告や画像が遅れて表示され、読んでいた文章が下に追いやられた。
• リンクをタップしようとしたら、突然広告が表示され、リンクが下に追いやられ広告を誤タップしてしまった。

こういった体験が、「ユーザーが意図せぬレイアウトのズレや崩れ」です。

CLSの評価は0~1の数値で表され「0」は移動なし、「1」は移動量が最大であることを示します。
判断基準としては、0.1未満が「良い」、0.25以下は「要改善」、0.25を超えると「不十分」と判断され「ズレが生じた表示領域の比率 × 距離の比率」で計算されると言われています。

当社で高速化施策を行なって速くならなかった要因ベスト３はこちら。
①外部リソースの読み込みが多い
②サーバーのスペックや設定に問題がある
③JSなど動きの多いレイアウト
これらはサイトの根本に問題があるので、
当社ではリニューアルや高速サーバーへの移管をご提案しています。#SEO #高速化— 田中雄太 / ADAMTECHNOLOGIES,Inc. (@yuuta_tanaka88) August 23, 2021

CLSスコア算出の仕組み

CLSのスコアは「Viewport」と呼ばれる表示領域にて、「レイアウトシフトの影響面積×実際にズレた距離」で算出される仕組みとなっています。たとえば、レイアウトシフトの影響面積が30、実際にズレた距離が0.15だとします。

この場合は「0.3×0.15」で0.045となります。また、CLSはあくまで全体でどれだけズレているかが基準となるので、上記の0.045が2箇所存在する場合のスコアは0.9です。これらの合計スコアを、0.1以下に抑えることが重要です。

CLSの測定方法

GoogleはCLSやコアウェブバイタルを測定するツールを提供しています。これらについて詳しくみていきましょう。

Web Vitals

Google Chromeの拡張機能である「Web Vitals」は、測定したいページをブラウザで表示すると右上に表示されます。

しかし「テスト環境におけるシミュレーションの結果」を表示するデータであるため、本来ユーザーが取得したデータの結果と異なる数字が表示される可能性があるので注意しましょう。

Google Chrome拡張機能『Web Vitals』

Light House

こちらもGoogle Chromeの拡張機能です。

測定したいページを開き「Generate report」と書かれている箇所をクリックすると、パフォーマンスの部分にメトリック（測定基準）が表示され、その項目の中にCLSが含まれています。

Google Chrome拡張機能『Light House』

PageSpeed Insights

PageSpeed Insights（https://developers-jp.googleblog.com/）にアクセスし、調査したいホームページのURLを入力し「分析」をクリックすると数値結果が表示されます。

また、こちらもWeb Vitalsと同じでテスト環境におけるシミュレーションの結果を表示するデータであるため、注意が必要となります。

『PageSpeed Insights』

CLS低下の原因

CLSが低下する要因として、次のような原因が考えられます。

• サイズの指定がされていない画像や広告が埋め込まれている
• JavaScriptによってコンテンツが動的に埋め込まれている
• Webフォントの読み込み

サイズの指定がされていない画像や広告が埋め込まれている

画像や広告を埋め込む際に、サイズが指定されていないとCLSスコアを低下させてしまいます。具体的には、画像（<img>タグ）や動画（<video>タグ）を設置する際に、width属性とheight属性が設定されていない場合です。

事前に画像タグに幅（width）や高さ（height）を指定しておくことで、その画像が入るスペースを空けておき、画像の読み込み前後で崩れが発生しないようにすることで、CLSのスコアに好影響があります。

レスポンシブ画像の場合のサイズ指定方法

以下は、レスポンシブ画像にサイズを指定する方法の一例です。
この場合は、ユーザーエージェントごとにCSSで同じアスペクト比になるよう各サイズの画像を出し分けています。

HTML

<img width="1200" height="1200" src="main-1200.jpg" srcset="main-1200.jpg 1200w, main-1500.jpg 1500w, main-1500.jpg 1500w"/>


CSS

img {
aspect-ratio: attr(width) / attr(height);
}


レスポンシブ画像ではない場合のサイズ指定方法

レスポンシブ画像でない場合は、以下のように、imgタグに直接数値を指定すれば問題ありません。

<img src="main.jpg" width="640" height="360"/>

JavaScriptによってコンテンツが動的に埋め込まれている

JavaScriptでコンテンツを動的に埋め込んでいる場合、レイアウトが大きくズレてしまうケースがあります。動的に挿入しているコンテンツの一例としては、ユーザー行動に関係なく表示される広告などが挙げられます。これらを活用することで高い広告効果を発揮することに期待はできますが、CLSスコアが落ちる大きな原因となります。

Webフォントの読み込み

Webフォントは、サーバーの中にあるフォントファイルをブラウザが読み込み、ユーザーのデバイスに関係なく任意の書体を表示させられるフォントです。Webフォントが適用されるタイミングで、「FOUT（Flash of Unstyled Text）」と呼ばれる再レンダリングする現象が起きてしまいます。また「FOIT（Flash of Invisible Text）」と呼ばれる、Webフォントが適用されるように、テキストを一時的に見えなくする現象も同時に起きます。これらは、CLSスコアを低下させる大きな原因です。

CLSの改善方法

では、これらのCLSの原因を改善するには何を行えばいいのでしょうか？ここからその改善方法について紹介します。

【改善方法①】画像サイズを指定する

画像は常にwidth要素とheight要素でサイズを指定します。
cssアスクペクト比率を使って画像が表示される前から予定する画像領域を確保することも有効です。

ブラウザは画像よりもデータの軽いテキストから読み込みを始め、同時に画像の読み込みを開始します。

このため、画像サイズが指定されていないと、ブラウザが画像を表示する範囲を判断できなくり、レイアウトのズレに繋がります。

よって、サイズの指定がされていない画像が問題になる場合は、画像が読み込まれる前に画像の表示する範囲を予め確保することで解決できます。

【改善方法②】広告表示領域を予約する

広告の表示範囲を指定することも、画像と同じで有効的です。

しかし、広告を最大サイズで予約をすると空白ができる可能性があり、結果的にユーザーに違和感を与えることに繋がってしまいますので注意が必要です。

広告は、コンテンツに適した画像サイズを予約することが大切です。

【改善方法③】Webフォントの使用を最小限に抑える

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

ユーザー側の閲覧環境に影響されず、サイトの製作者が意図したとおりのデザインで閲覧してもらえるというメリットがあります。

一方で、FOUT（Flash of Unstyled Text）やFOIT（Flash of Invisible Text）が生じる可能性があるといったデメリットも存在します。

FOUTとは、Webフォントがブラウザに読み込まれるまで代替フォントが表示される仕組みです。フォントが切り替わる際にレイアウトが崩れるため、CLSを低下させる要因となります。

また、FOITとは、Webフォントが読み込まれるまでテキストが表示されない現象のことを指します。こちらもCLSを低下させます。

これらの現象を防ぐためには、CSSプロパティやWebフォントのレンダリングの最適化を行うことが大切です。

その他のCore Web Vitals（コアウェブバイタル）指標の改善方法

CLS以外にも、Core Web Vitals（コアウェブバイタル）には「LCP」と「INP」の2つの指標があります。

「INP」は、2024年3月12日から「FID」に代わって導入された指標です。ここからは、LCPとINPの改善方法を簡単にご説明します。

LCPの改善方法

LCPは、ページ内における最も大きなコンテンツを読み込むのに必要な時間のことです。LCPの改善方法は、主に画像容量を圧縮したり、コードを軽量化したりなどが挙げられます。また、プラグインやソースコードを追加するなどして、Lazy Loadを設定するのも効果的です。LCPの詳しい改善方法は下記の記事でまとめているので、ぜひ参考にしてください。

LCP(Lrgest Contentful Paint)とは？改善方法・低下原因・測定方法を解説

INPの改善方法

INPは、マウスのタップやキー操作など、ユーザーが最初に行うアクションに対する反応速度のことです。200ミリ秒以下であれば良好とされており、500ミリ秒超えの場合は不良とされています。

INPの改善は、「ページ読み込み時」と「ページ読み込み後」の2つの側面から行う必要があります。

ページ読み込み時の改善は

• 使用しないコードを削除する
• ページ読み込み中に不要なJavaScriptを遅延読み込みする

などを行い、ページ読み込み後の改善には

• postTask APIを使用し、適切なタスクの優先順位を設定する
• requestIdleCallbackを使用し、すぐに必要のない処理をブラウザがアイドル状態の時に実行するようスケジュールする

といった調整が必要です。

INPに関しても改善方法を下記の記事にまとめているので、本記事と併せてご覧ください。

Core Web Vitalsの新指標「INP」とは？計測方法、改善方法を解説

まとめ

今回はコアウェブバイタルの3指標の一つである「CLS」について、その概要や改善方法を解説してきました。

コアウェブバイタルにおける他の指標についての解説は下記のページを参考にしてください。

コアウェブバイタル（Core Web Vitals）とは？SEOに与える影響と対策方法についてわかりやすく解説します！

また、「CLSを分析・改善を加えるのが難しい」「よくわからない」とお考えになられるご担当者様もいるかと思います。

弊社では、コアウェブバイタルをはじめとしたWebサイトの表示スピードの改善する「WEBサイト表示スピード高速化サービス」をご用意しています。ぜひお気軽にお問い合わせください。

WEBサイト表示スピード高速化サービスの詳細はこちら

SEOにお困りなら【無料SEO診断】

株式会社デジタルアイデンティティでは、創業から14年以上、SEO対策に注力してきました。
検索エンジンをハックするようなブラックハットな手法に頼ることなく、Googleの推奨に沿ったホワイトハットな手法で上位表示を実現してきました。

そんな弊社のSEOナレッジを50以上の項目に落とし込んだSEO診断を無料でご提供しています！
（毎月先着10社様限定とさせていただいています）

無料SEO診断はこんな方におすすめ！

• SEO対策をどこから始めればいいかわからない…
• 自社でSEO対策をしているが思うように順位が上がらない…
• 他社にSEO対策を依頼しているがセカンドオピニオンが欲しい…
• なぜ競合サイトの検索順位が高いのか知りたい…
• 現在のSEO対策が正しいのか確認したい…

弊社の無料SEO診断でわかること

• 現在のSEO評価
• SEO項目ごとの改善方法
• SEO項目ごとの優先度

正しい現状認識は、SEO対策で効果を出す上で何よりも重要です。

自社のSEO対策について、少しでも気になる方は以下のリンクからお気軽にお申し込みください。

【簡単1分】無料SEO診断に申し込む