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

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」と「FID」の2つの指標があります。ここからは、LCPとFIDの改善方法を簡単にご説明します。

LCPの改善方法

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

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

FIDの改善方法

FIDは、マウスのタップやキー操作など、ユーザーが最初に行うアクションに対する反応速度のことです。100ミリ秒以下であれば良好とされており、300ミリ秒超えの場合は不良とされています。FIDの改善は、主に必要のないJavaScriptを削除したり、Webワーカーを使用したりすることが挙げられます。FIDに関しても改善方法を下記の記事にまとめているので、本記事と併せてご覧ください。

FID（First Input Delay）とは？低下の原因や測定、TBTの改善方法について解説

まとめ

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

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

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

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

弊社では、コアウェブバイタルをはじめとしたWebサイトの表示スピードの改善する「WEBサイト表示スピード高速化サービス」をご用意しています。まずは、下記のページから無料で資料をダウンロードしてみてはいかがでしょうか。

WEBサイト表示スピード高速化サービス資料 無料ダウンロードする

WordPressのサイト表示スピード改善をするなら「HP爆速くん for WP」

WordPressは世界で40%以上のWEBサイトで導⼊されている無料CMSで、エンジニアでなくても簡単にWEBサイトの構築が可能です。

しかし、⾼度なカスタマイズや表⽰スピードの⾼速化においては、WEBだけでなくWordPressに関する専⾨的な知識が必要で、⼀般的なWEB制作会社やSEO対策会社では対応できない可能性もあります。

WordPressサイトの表⽰スピードに悩む企業の課題を解決するため、SEO技術者集団の「ADAMTECHNOLOGIES 」と、WordPress専⾨家チーム「株式会社e2e」と技術共同開発し、WordPressサイトに特化した表⽰スピード⾼速化サービス『HP爆速くん for WP』をご提供しています。

「HP爆速くん for WP」は、Page Speed Insightsのスコアが上がらなければ一切料金をいただかない、完全成果報酬型のWordPressサイトの表示スピードの高速化サービスです。

「HP爆速くん for WP」の詳細が知りたい方は、下記リンクからご確認ください。

成果報酬型WordPressサイトの高速化サービス　『HP爆速くん for WP』の詳細はコチラ