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

SEO
2021-7-13
更新日: 2024-12-11
yuta.tanaka

TanakaYuta SEO Div. コンサルタント

現在までに100社以上のSEO対策に従事し、様々なジャンル・キーワードで上位表示を実現。薬機法管理者の資格を有しているいること、SEOライターとして自身でもライティングができることから、広告表現が難しい医療・美容・健康を得意領域としている。「成分名」や「〇〇効果」などの難関キーワードでの上位表示実績多数。SNSでの情報発信にも力を入れており、約10,000名のフォロワーを獲得している。

執筆者の投稿をみる

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

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

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

無料SEO診断、受付中！

「なかなか順位が上がらない…」「今の代理店の対策が正しいか知りたい…」
など、SEO対策でお悩みの方に、50項目以上の無料SEO診断を実施しています。毎月先着10社限定で、経験豊富なSEOコンサルタントが改善のヒントをお届けします！
以下のリンクから、お気軽にお申し込みください！

【無料】SEO診断に申し込む

1 CLSとは
2 CLSスコア算出の仕組み
3 CLSの測定方法
4 CLS低下の原因
5 CLSの改善方法
6 その他のCore Web Vitals（コアウェブバイタル）指標の改善方法
- 6.1 LCPの改善方法
- 6.2 INPの改善方法
7 まとめ
8 SEOにお困りなら【無料SEO診断】

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)とは？改善方法・低下原因・測定方法を解説