【イラスト付き】CLSとは？用語の意味や数値化する方法について徹底解説！

ねえ、ブルー！CLSって何だろう？ブルーは詳しいよね？

ぜひ教えて！

CLSはコアウェブバイタルの1つなんだよ

ウェブバイタルは、Googleが設定しているサイトの健全性を表す指標のことだよ

コアウェブバイタルは、ウェブバイタルを測るなかでコア（中核）となる指標のことをいうんだ

コアウェブバイタルにはLCP、FID、CLSがあるよ

ちなみに、LCP（Largest Contentful Paint）はページの読み込み速度、表示時間の指標で、FID（First Input Delay）はインタラクティブ性を示す指標だよ

インタラクティブ性というのは、サイト内で最初にアクションを起こした時の反応の速さを示す指標だね

CLS（Cumulative Layout Shift）は累積レイアウトシフトという意味で、ページコンテンツの視覚的な安定性を示す指標のことだよ

サイトのページ内のレイアウトのずれなどを数値化するんだ

イエローは次のような経験はない？

このような現象が起きると、UXが下がってしまうんだ

CLSは「ズレが生じた表示面積の比率×実際にズレていた比率」で計算できるよ

スコアが0.1未満なら良好、0.25以下なら改善が必要、0.25以上なら不良と評価されるんだ

例えば、画面のちょうど半分のところに広告が出てきてしまって、その分、文章が下にズレてしまったとするよ

ズレた面積は画面全体の50％（0.5）ということになるよね

広告面積が画面全体の15％（0.15）とすると、計算式はどうなると思う？

そうだね。この場合、0.075でスコアが0.1を下回るから良好といえるよ

CLSをチェックするための万能ツールはないんだ

だから、次のような複数のツールを使い分けていくことが重要なんだよ

Google search Consoleは、SEO効果を測定するツールで、サイト全体の診断結果を蓄積しているよ

過去90日分の診断結果を常に蓄積しているし、自動で調査と集計をしてくれるんだ

ただし、改善点の特定に少し弱くて、サイト内の全ページが漏れなく調査されるわけではないことが注意点だね

Page Speed Insightsは、Googleが提供しているWebサイトを診断するツールだよ

Webサイトから利用できてURLの入力でユーザーがアクセスした環境の実測値とシミュレーションで測定した値を10秒ほどで算出するんだ

ページごとの改善箇所や改善方法が詳しく把握できるよ

ChromeやEdgeの開発者ツールは、SEOチェックツールとして活用されているよ

非公開サイトであっても、HTTP/HTTPSプロトコルを通っていてブラウザに表示されていれば使用できるよ

ただし、チェックするときはPCの通信速度によってスコアが変わる可能性があるから注意してね

Light Houseは、自動でレポートを作成して、コアウェブバイタルを含めたウェブバイタル全体を測定するよ