SEO
更新日: 2024/4/29
CLS改善策は?悪化させる原因や気になる測定方法も詳しく解説
自分で運営しているWEBサイトがあるんだけど、普段使わないデバイスでアクセスしてみたら、レイアウトが動いてしまって・・・上手く操作できないわ。
それは、CLSのスコアが悪化しているってことだね。
CLSって、初めて聞いたわね。
それじゃあ今回は、CLSとは何かについて解説してから、悪化する要因とその改善策、測定方法も紹介するよ!
ブルーちゃん、お願いね!
CLSについて知ろう
まず「CLS」とは「Cumulative Layout Shift」の略で、直訳だと「累積レイアウト変更」という意味になるよ。
詳しく言うと「CLS」は、WEBサイト内のページを表示した際の、視覚的な安定性を測る指標のことなんだ!
視覚的な安定・・・いまいちイメージが湧かないわ。
「視覚的な安定」とは基本的に、ページを読み込んだ際に予期しないレイアウト変動が起きず、レイアウトが安定していることを指しているよ。
ちなみにCLSは「Core Web Vitals(コアウェブバイタル)」の中に含まれる指標の1つでもあるよ。
「Core Web Vitals(コアウェブバイタル)」って何なの?
「Core Web Vitals」は、検索結果のどこにWEBサイトが表示されるかに影響するWEBパフォーマンスのことだよ。
ちなみに、CLSのほかにはLCP(Largest Contentful Paint)「コンテンツの表示までの時間」とINP(Interaction to Next Paint)「タイムラグ」があるよ。
CLSのスコアが悪化する要因は?改善策を解説
そういえば、CLSの悪化って具体的にどうなることを指すの?
「CLSが悪化する(低下する)=表示されたWEBページで、意図せぬレイアウトのズレや崩れが生じることだよ。
でも、CLSってどうして悪化するのかしらね。
次は、CLSが悪化する要因を見ていこう。
1.画像のサイズ指定がされていない
2.動的コンテンツを多く使っている
3.WEBフォントの読み込みに問題がある【FOITとFOUT】
4.サーバーの応答に時間がかかっている
1.画像のサイズ指定がされていない
まず、CLSが悪化する要因として、画像や動画、広告のサイズが指定されていないことが挙げられるよ。
これは、画像のimgタグ、動画のvideoタグを設置する際に、width属性とheight属性が設定されていないことを指すよ。
見た目だけでなく、細かい数値を揃えておく必要があるのね。
画像や動画、広告を挿入する際は、事前に画像タグに幅(width)や高さ(height)を指定しておこう。
画像を読み込む前や後でズレが発生するのを防げるよ!
2.動的コンテンツを多く使っている
動的コンテンツをたくさん使うのも、CLSが悪化する要因だよ。
動的コンテンツって、動画のこと?
動画も含まれるけど、具体的にはユーザーの操作していない場合でも表示されるコンテンツのことを指すんだ。
そういえば、WEBサイトを開いたときに、定期購入の紹介などがいきなり出てくることがあるわ。
でも、動的コンテンツは広告効果が高いから使わないというわけにはいかないわね。
大丈夫!
動的コンテンツに十分なスペースを確保しておくことで、レイアウトにズレが生じることがないよ!
3.WEBフォントの読み込みに問題がある【FOITとFOUT】
WEBフォントの読み込みは本来、ユーザー側の閲覧環境に関係なく同一のデザインが表示されるんだ。
問題となるのは「FOIT」と「FOUT」だよ。
どちらも初めて聞いたわ。
「FOIT」はWEBフォントを読み込む際に、テキストが一瞬見えなくなる現象のこと、「FOUT」は再び処理・演算して表示する現象のことだよ。
WEBフォントの数が多いと、読み込む回数も増えるから、自然に「FOIT」と「FOUT」が起こりやすくなってしまうんだ。
WEBフォントはあまり使わないほうがいいのね。
使いすぎないことも大事だけど、太さや斜体の違いを減らしたり、ローカルフォントを使用したりすることでも予防できるよ。
4.サーバーの応答に時間がかかっている
サーバーの応答に時間がかかりすぎても、CLSが悪化してしまうんだ。
サーバーの応答時間を早めるには、どうしたらいいの?
簡単なのは、サーバーを増設する方法だよ。
サーバーが悪い自体が悪いわけではないこともあって、その場合はアクセス集中によるサーバーが麻痺が考えられるよ。
そういえば、チケットの発売時刻に、集中アクセスで繋がらないことがあったわ。
アクセス集中が考えられる場合は、アクセス制限を設けることで対策できるよ。
目安となるCLSの数値は?
結局CLSって、どれくらいがの数値が適切なのか、目安を知っておきたいわね。
CLSの評価は「GOOD(良好)」「NEEDS IMPROVEMENT(改善が必要)」「POOR(不良)」で表示されるんだけど、それぞれ目安となるのが下記の数値だよ。
GOOD(良好) | 0.1以下 |
NEEDS IMPROVEMENT(改善が必要) | 0.25以下 |
POOR(不良) | 0.25以上 |
自分で計算する必要があるのかしら。
CLSの計算方法は難しいから、計算で求めるのはあまりおすすめできないんだ。
CLSの測定方法については、次の見出しで解説するよ!
CLSの測定方法をチェック
CLSの測定は、自分で計算するのは難しいのよね?
CLSを測定したい場合は、ツールを使えば自分でも簡単にできるよ。
わたしのWEBサイトのCLSがどれくらいなのか、気になってきたわね。
CLS測定の主な方法は、以下の2つだよ。
1.Googleサーチコンソールを使用する
2.PageSpeed Insightsを使用する
1.Googleサーチコンソールを使用する
比較的簡単にCLSを測定できるのが「Googleサーチコンソール」を使う方法だよ。
Googleサーチコンソールは、SEO対策をする際に使ったことがあるわ。
WEBサイトの運営には欠かせないツールだね!
「ウェブに関する主な指標」という機能では、ページの表示速度や、実際のパフォーマンスを確認できるんだ。
2.PageSpeed Insightsを使用する
CLSの測定は「PageSpeed Insights」というツールを使用するのもおすすめだよ。
CLSを測定したいページのURLを入力して、分析をクリックするだけだから簡単に測定できるんだ。
評価はどのように表示されるの?
100点満点で、90点以上が緑、90点未満がオレンジ、50点未満が赤になっていて、3つのカラーで分かりやすく表示されるよ。
まとめ
CLSが悪化する原因や改善策も分かったし、今までよりスムーズにWEBサイトを運営できそうだわ。
最後にまとめとして、以下3点を頭にメモしていってね。
まとめ
◆CLSとは「WEBサイト内のページを表示した際の、視覚的な安定性を測る指標」のこと
◆CLS悪化の主な要因は「1.画像のサイズ指定がされていない」、「2.動的コンテンツを多く使っている」、「3.WEBフォントの読み込みに問題がある」、「4.サーバーの応答に時間がかかっている」
◆CLSの測定は「1.Googleサーチコンソール」か「2.PageSpeed Insights」を使用する
CLSが悪化している要因を明確にして、適切な改善策をとることが大事ね。
CLSを改善して、ユーザーが閲覧しやすいWEBサイトを目指そう!
ブルー
SEOやエンジニアリングマーケティングが得意。非常にめんどくさがりで、動きたくないがために自分でコードを書いて自作のMAを組んだりする。自動化のためなら努力は惜しまない。
最新の記事一覧
構造化マークアップテストを解説!実装方法や便利なツールも紹介
SEO
URL検査ツールとは?活用術や使うときの注意点を徹底解説!
SEO
クロール済み – インデックス未登録とは?原因と対策も解説!
SEO
検出-インデックス未登録の原因と対策は?どのような状態かも解説!
SEO
LCPとは?用語の説明から低下の原因、改善方法まで解説!
SEO
hrefとは?用語の意味やURLの指定方法について解説!
SEO
CLSとは?用語の意味や数値化する方法について徹底解説!
SEO
マーケットシェアとは?種類や使い方、計算方法について徹底解説!
マーケティング
WordPressでパンくずリストを簡単に設置する方法は?
wordpress
WordPressのプラグインとは?おすすめプラグインと注意点を解説
wordpress
WordPressホームページの作り方!メリットや注意点も解説
wordpress
権威性とは?権威性のメリットや高める方法について解説!
SEO
Amazon SEOの仕組みとは?上位表示させる方法も解説!
SEO
画像SEOとは?効果的な画像のポイントや注意点を解説!
SEO
URL正規化とは?canonicalって?チェック方法も解説!
SEO
オールドドメインとは?SEOへの効果や購入時の選び方を解説!
SEO
アクセス解析とは?解析前にすべき2つのこと|おすすめツール3選
SEO
SEO成功への鍵であるバックリンクとは?悪いリンクへの対処法2選
SEO
オーガニックサーチとは?広告なしで質の高い集客を実現できる!
SEO
最新の記事一覧
構造化マークアップテストを解説!実装方法や便利なツールも紹介
SEO
URL検査ツールとは?活用術や使うときの注意点を徹底解説!
SEO
クロール済み – インデックス未登録とは?原因と対策も解説!
SEO
検出-インデックス未登録の原因と対策は?どのような状態かも解説!
SEO
LCPとは?用語の説明から低下の原因、改善方法まで解説!
SEO
hrefとは?用語の意味やURLの指定方法について解説!
SEO
CLSとは?用語の意味や数値化する方法について徹底解説!
SEO
マーケットシェアとは?種類や使い方、計算方法について徹底解説!
マーケティング
WordPressでパンくずリストを簡単に設置する方法は?
wordpress
WordPressのプラグインとは?おすすめプラグインと注意点を解説
wordpress
WordPressホームページの作り方!メリットや注意点も解説
wordpress
権威性とは?権威性のメリットや高める方法について解説!
SEO
Amazon SEOの仕組みとは?上位表示させる方法も解説!
SEO
画像SEOとは?効果的な画像のポイントや注意点を解説!
SEO
URL正規化とは?canonicalって?チェック方法も解説!
SEO
オールドドメインとは?SEOへの効果や購入時の選び方を解説!
SEO
アクセス解析とは?解析前にすべき2つのこと|おすすめツール3選
SEO
SEO成功への鍵であるバックリンクとは?悪いリンクへの対処法2選
SEO
オーガニックサーチとは?広告なしで質の高い集客を実現できる!
SEO