悩めるWEB担当者様のための最新ノウハウをお届け

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

私がご紹介します

Tanaka Yuta

TanakaYuta SEO Div. コンサルタント

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

執筆者の投稿をみる

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

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

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

CLSとは

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

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

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

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

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

CLSの評価は0~1の数値で表され「0」は移動なし、「1」は移動量が最大であることを示します。

判断基準としては、0.1未満が「良い」、0.25以下は「要改善」、0.25を超えると「不十分」と判断され「ズレが生じた表示領域の比率 × 距離の比率」で計算されると言われています。

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サイト表示スピード高速化サービスの詳細はこちら

SEOにお困りなら【無料SEO診断】※毎月10社限定

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

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

無料SEO診断サンプル画像

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

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

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

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

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

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

【毎月10社限定】無料SEO診断に申し込む

関連記事

Keywords

無料!プロに相談する 無料!SEO対策のご相談はこちら

SEOコンサルティングって何してくれるの?