![CLS改善策は?悪化させる原因や気になる測定方法も詳しく解説のアイキャッチ画像](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/5f95648e3f5e488e9a5dc88d579f3ef8/Group%20684.png?w=1200&fm=webp)
SEO
更新日: 2024/4/29
CLS改善策は?悪化させる原因や気になる測定方法も詳しく解説
![character_balloon](/media/character/purple_sad_left.png)
自分で運営しているWEBサイトがあるんだけど、普段使わないデバイスでアクセスしてみたら、レイアウトが動いてしまって・・・上手く操作できないわ。
それは、CLSのスコアが悪化しているってことだね。
![character_balloon](/media/character/blue_inspiration_right.png)
![character_balloon](/media/character/purple_normal_left.png)
CLSって、初めて聞いたわね。
それじゃあ今回は、CLSとは何かについて解説してから、悪化する要因とその改善策、測定方法も紹介するよ!
![character_balloon](/media/character/blue_normal_right.png)
![character_balloon](/media/character/purple_inspiration_left.png)
ブルーちゃん、お願いね!
CLSについて知ろう
![character_balloon](/media/character/blue_inspiration_left.png)
まず「CLS」とは「Cumulative Layout Shift」の略で、直訳だと「累積レイアウト変更」という意味になるよ。
![character_balloon](/media/character/blue_confidence_left.png)
詳しく言うと「CLS」は、WEBサイト内のページを表示した際の、視覚的な安定性を測る指標のことなんだ!
視覚的な安定・・・いまいちイメージが湧かないわ。
![character_balloon](/media/character/purple_panic_right.png)
![character_balloon](/media/character/blue_happy_left.png)
「視覚的な安定」とは基本的に、ページを読み込んだ際に予期しないレイアウト変動が起きず、レイアウトが安定していることを指しているよ。
![character_balloon](/media/character/blue_normal_left.png)
ちなみにCLSは「Core Web Vitals(コアウェブバイタル)」の中に含まれる指標の1つでもあるよ。
「Core Web Vitals(コアウェブバイタル)」って何なの?
![character_balloon](/media/character/purple_question_right.png)
![character_balloon](/media/character/blue_inspiration_left.png)
「Core Web Vitals」は、検索結果のどこにWEBサイトが表示されるかに影響するWEBパフォーマンスのことだよ。
![character_balloon](/media/character/blue_normal_left.png)
ちなみに、CLSのほかにはLCP(Largest Contentful Paint)「コンテンツの表示までの時間」とINP(Interaction to Next Paint)「タイムラグ」があるよ。
CLSのスコアが悪化する要因は?改善策を解説
そういえば、CLSの悪化って具体的にどうなることを指すの?
![character_balloon](/media/character/purple_question_right.png)
![character_balloon](/media/character/blue_scared_left.png)
「CLSが悪化する(低下する)=表示されたWEBページで、意図せぬレイアウトのズレや崩れが生じることだよ。
でも、CLSってどうして悪化するのかしらね。
![character_balloon](/media/character/purple_troublesome_right.png)
![character_balloon](/media/character/blue_normal_left.png)
次は、CLSが悪化する要因を見ていこう。
1.画像のサイズ指定がされていない
2.動的コンテンツを多く使っている
3.WEBフォントの読み込みに問題がある【FOITとFOUT】
4.サーバーの応答に時間がかかっている
1.画像のサイズ指定がされていない
![character_balloon](/media/character/blue_normal_left.png)
まず、CLSが悪化する要因として、画像や動画、広告のサイズが指定されていないことが挙げられるよ。
![character_balloon](/media/character/blue_confidence_left.png)
これは、画像のimgタグ、動画のvideoタグを設置する際に、width属性とheight属性が設定されていないことを指すよ。
見た目だけでなく、細かい数値を揃えておく必要があるのね。
![character_balloon](/media/character/purple_inspiration_right.png)
![character_balloon](/media/character/blue_up_left.png)
画像や動画、広告を挿入する際は、事前に画像タグに幅(width)や高さ(height)を指定しておこう。
![character_balloon](/media/character/blue_happy_left.png)
画像を読み込む前や後でズレが発生するのを防げるよ!
2.動的コンテンツを多く使っている
![character_balloon](/media/character/blue_painful_left.png)
動的コンテンツをたくさん使うのも、CLSが悪化する要因だよ。
動的コンテンツって、動画のこと?
![character_balloon](/media/character/purple_question_right.png)
![character_balloon](/media/character/blue_confidence_left.png)
動画も含まれるけど、具体的にはユーザーの操作していない場合でも表示されるコンテンツのことを指すんだ。
そういえば、WEBサイトを開いたときに、定期購入の紹介などがいきなり出てくることがあるわ。
![character_balloon](/media/character/purple_surprised_right.png)
でも、動的コンテンツは広告効果が高いから使わないというわけにはいかないわね。
![character_balloon](/media/character/purple_panic_right.png)
![character_balloon](/media/character/blue_happy_left.png)
大丈夫!
![character_balloon](/media/character/blue_normal_left.png)
動的コンテンツに十分なスペースを確保しておくことで、レイアウトにズレが生じることがないよ!
3.WEBフォントの読み込みに問題がある【FOITとFOUT】
![character_balloon](/media/character/blue_normal_left.png)
WEBフォントの読み込みは本来、ユーザー側の閲覧環境に関係なく同一のデザインが表示されるんだ。
![character_balloon](/media/character/blue_inspiration_left.png)
問題となるのは「FOIT」と「FOUT」だよ。
どちらも初めて聞いたわ。
![character_balloon](/media/character/purple_surprised_right.png)
![character_balloon](/media/character/blue_confidence_left.png)
「FOIT」はWEBフォントを読み込む際に、テキストが一瞬見えなくなる現象のこと、「FOUT」は再び処理・演算して表示する現象のことだよ。
![character_balloon](/media/character/blue_worry_left.png)
WEBフォントの数が多いと、読み込む回数も増えるから、自然に「FOIT」と「FOUT」が起こりやすくなってしまうんだ。
WEBフォントはあまり使わないほうがいいのね。
![character_balloon](/media/character/purple_scared_right.png)
![character_balloon](/media/character/blue_inspiration_left.png)
使いすぎないことも大事だけど、太さや斜体の違いを減らしたり、ローカルフォントを使用したりすることでも予防できるよ。
4.サーバーの応答に時間がかかっている
![character_balloon](/media/character/blue_normal_left.png)
サーバーの応答に時間がかかりすぎても、CLSが悪化してしまうんだ。
サーバーの応答時間を早めるには、どうしたらいいの?
![character_balloon](/media/character/purple_worry_right.png)
![character_balloon](/media/character/blue_inspiration_left.png)
簡単なのは、サーバーを増設する方法だよ。
![character_balloon](/media/character/blue_happy_left.png)
サーバーが悪い自体が悪いわけではないこともあって、その場合はアクセス集中によるサーバーが麻痺が考えられるよ。
そういえば、チケットの発売時刻に、集中アクセスで繋がらないことがあったわ。
![character_balloon](/media/character/purple_sad_right.png)
![character_balloon](/media/character/blue_confidence_left.png)
アクセス集中が考えられる場合は、アクセス制限を設けることで対策できるよ。
目安となるCLSの数値は?
結局CLSって、どれくらいがの数値が適切なのか、目安を知っておきたいわね。
![character_balloon](/media/character/purple_normal_right.png)
![character_balloon](/media/character/blue_normal_left.png)
CLSの評価は「GOOD(良好)」「NEEDS IMPROVEMENT(改善が必要)」「POOR(不良)」で表示されるんだけど、それぞれ目安となるのが下記の数値だよ。
GOOD(良好) | 0.1以下 |
NEEDS IMPROVEMENT(改善が必要) | 0.25以下 |
POOR(不良) | 0.25以上 |
自分で計算する必要があるのかしら。
![character_balloon](/media/character/purple_worry_right.png)
![character_balloon](/media/character/blue_worry_left.png)
CLSの計算方法は難しいから、計算で求めるのはあまりおすすめできないんだ。
![character_balloon](/media/character/blue_normal_left.png)
CLSの測定方法については、次の見出しで解説するよ!
CLSの測定方法をチェック
CLSの測定は、自分で計算するのは難しいのよね?
![character_balloon](/media/character/purple_question_right.png)
![character_balloon](/media/character/blue_normal_left.png)
CLSを測定したい場合は、ツールを使えば自分でも簡単にできるよ。
わたしのWEBサイトのCLSがどれくらいなのか、気になってきたわね。
![character_balloon](/media/character/purple_worry_right.png)
![character_balloon](/media/character/blue_confidence_left.png)
CLS測定の主な方法は、以下の2つだよ。
1.Googleサーチコンソールを使用する
2.PageSpeed Insightsを使用する
1.Googleサーチコンソールを使用する
![character_balloon](/media/character/blue_normal_left.png)
比較的簡単にCLSを測定できるのが「Googleサーチコンソール」を使う方法だよ。
Googleサーチコンソールは、SEO対策をする際に使ったことがあるわ。
![character_balloon](/media/character/purple_inspiration_right.png)
![character_balloon](/media/character/blue_confidence_left.png)
WEBサイトの運営には欠かせないツールだね!
![character_balloon](/media/character/blue_smile_left.png)
「ウェブに関する主な指標」という機能では、ページの表示速度や、実際のパフォーマンスを確認できるんだ。
2.PageSpeed Insightsを使用する
![character_balloon](/media/character/blue_happy_left.png)
CLSの測定は「PageSpeed Insights」というツールを使用するのもおすすめだよ。
![character_balloon](/media/character/blue_confidence_left.png)
CLSを測定したいページのURLを入力して、分析をクリックするだけだから簡単に測定できるんだ。
評価はどのように表示されるの?
![character_balloon](/media/character/purple_question_right.png)
![character_balloon](/media/character/blue_smile_left.png)
100点満点で、90点以上が緑、90点未満がオレンジ、50点未満が赤になっていて、3つのカラーで分かりやすく表示されるよ。
CLSが悪化する原因や改善策も分かったし、今までよりスムーズにWEBサイトを運営できそうだわ。
![character_balloon](/media/character/purple_inspiration_right.png)
![character_balloon](/media/character/blue_normal_left.png)
最後にまとめとして、以下3点を頭にメモしていってね。
まとめ
◆CLSとは「WEBサイト内のページを表示した際の、視覚的な安定性を測る指標」のこと
◆CLS悪化の主な要因は「1.画像のサイズ指定がされていない」、「2.動的コンテンツを多く使っている」、「3.WEBフォントの読み込みに問題がある」、「4.サーバーの応答に時間がかかっている」
◆CLSの測定は「1.Googleサーチコンソール」か「2.PageSpeed Insights」を使用する
CLSが悪化している要因を明確にして、適切な改善策をとることが大事ね。
![character_balloon](/media/character/purple_confidence_right.png)
![character_balloon](/media/character/blue_confidence_left.png)
CLSを改善して、ユーザーが閲覧しやすいWEBサイトを目指そう!
![character_balloon](/media/character/blue_writer.png)
ブルー
SEOやエンジニアリングマーケティングが得意。非常にめんどくさがりで、動きたくないがために自分でコードを書いて自作のMAを組んだりする。自動化のためなら努力は惜しまない。
最新の記事一覧
7割の人にとって味が最も重要!?エナジードリンクのアンケート調査結果をご紹介!
アンケート・調査結果
副業で5万円以上稼ぐ人は15%しかいない?副業の実態について調査しました!
アンケート・調査結果
53%の人は最後に浴衣を着てから5年以上経った?!浴衣の実態を徹底調査!
アンケート・調査結果
約82%の人が部屋着のズボンを履いてテレワークをしている!テレワークの現状を調査しました!
アンケート・調査結果
「1杯目はビール!」は約6割しかいない!?お酒についてアンケート調査しました!
アンケート・調査結果
企画書とは?目的や作り方、おすすめのテンプレートを紹介
マーケティング
取引や計算で使われるグロスとは?使用例や注意点を徹底解説!
マーケティング
「スーパーフレックス制度」とは?導入に向けて注意する点を解説!
マーケティング
ペルソナ設定とは?目的と作り方、注意点について徹底解説!
マーケティング
視聴者を魅了し続ける冠番組とは?成功している冠番組の特徴を解説
ビジネス
有名企業のペルソナマーケティング事例5選!何に活用できるか解説
マーケティング
破ると法律違反になるステマとは?過去のステマ事件や対策を紹介
マーケティング
多くの市場で危惧されるコモディティ化とは?コモディティ化対策5選
マーケティング
社会に影響を与えるマスメディアとは?影響力やリスクについて解説
マーケティング
カーボンニュートラルとは?実現のための取り組みや課題も解説
ビジネス
ネゴシエーションとは?ビジネスにおける意味と成功のポイントを解説
ビジネス
音声SNSとは?注目される理由やメリットを解説【アプリも紹介】
ディスプレイ広告
オーガニックサーチとは?広告なしで質の高い集客を実現できる!
SEO
問題解決フレームワークの活用法は?使用するメリットや注意点も解説
ビジネス
ブランドロイヤリティとは?顧客ロイヤリティとの違いを解説
広報・PR
最新の記事一覧
7割の人にとって味が最も重要!?エナジードリンクのアンケート調査結果をご紹介!
アンケート・調査結果
副業で5万円以上稼ぐ人は15%しかいない?副業の実態について調査しました!
アンケート・調査結果
53%の人は最後に浴衣を着てから5年以上経った?!浴衣の実態を徹底調査!
アンケート・調査結果
約82%の人が部屋着のズボンを履いてテレワークをしている!テレワークの現状を調査しました!
アンケート・調査結果
「1杯目はビール!」は約6割しかいない!?お酒についてアンケート調査しました!
アンケート・調査結果
企画書とは?目的や作り方、おすすめのテンプレートを紹介
マーケティング
取引や計算で使われるグロスとは?使用例や注意点を徹底解説!
マーケティング
「スーパーフレックス制度」とは?導入に向けて注意する点を解説!
マーケティング
ペルソナ設定とは?目的と作り方、注意点について徹底解説!
マーケティング
視聴者を魅了し続ける冠番組とは?成功している冠番組の特徴を解説
ビジネス
有名企業のペルソナマーケティング事例5選!何に活用できるか解説
マーケティング
破ると法律違反になるステマとは?過去のステマ事件や対策を紹介
マーケティング
多くの市場で危惧されるコモディティ化とは?コモディティ化対策5選
マーケティング
社会に影響を与えるマスメディアとは?影響力やリスクについて解説
マーケティング
カーボンニュートラルとは?実現のための取り組みや課題も解説
ビジネス
ネゴシエーションとは?ビジネスにおける意味と成功のポイントを解説
ビジネス
音声SNSとは?注目される理由やメリットを解説【アプリも紹介】
ディスプレイ広告
オーガニックサーチとは?広告なしで質の高い集客を実現できる!
SEO
問題解決フレームワークの活用法は?使用するメリットや注意点も解説
ビジネス
ブランドロイヤリティとは?顧客ロイヤリティとの違いを解説
広報・PR