アダムテクノロジーズ運営チーム

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

高速化

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

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の測定方法

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

Web Vitals

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

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

Light House

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

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

PageSpeed Insights

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

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

CLS低下の原因

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

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

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フォントのレンダリングの最適化を行うことが大切です。

まとめ

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

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

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

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

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

この記事の執筆者

田中雄太

twitterアイコン Facebookアイコン

アダムテクノロジーズ執行役員 SEOコンサルタント

株式会社アダムテクノロジーズ 執行役員。
ユーザーニーズと最も近いSEO対策で、あらゆるビジネスを加速させ、より良い社会の実現を目指す。
入社から5年間で100社以上のSEO対策に従事し、様々なジャンル・キーワードでの上位表示を実現。顧客目線での目標達成にコミットしたSEOコンサルティングが強み。

DOWNLOAD

資料ダウンロード

資料のイメージ画像

当社でご提供しているサービスの資料ダウンロードはこちらから。
SEOに課題を感じている方は、ぜひご覧になってください。

SEO診断の資料はこちら WEBサイト高速化の資料はこちら

CONTACT

お問い合わせ

大規模サイトにおけるSEO対策上の問題点を解消し、
集客の最大化を実現する相談役として
ぜひお気軽にご連絡ください。
経験豊富な技術者がSEO診断を行います。