【イラスト付き】CLS改善策は？悪化させる原因や気になる測定方法も詳しく解説

自分で運営しているWEBサイトがあるんだけど、普段使わないデバイスでアクセスしてみたら、レイアウトが動いてしまって･･･上手く操作できないわ。

CLSって、初めて聞いたわね。

ブルーちゃん、お願いね！

まず「CLS」とは「Cumulative Layout Shift」の略で、直訳だと「累積レイアウト変更」という意味になるよ。

詳しく言うと「CLS」は、WEBサイト内のページを表示した際の、視覚的な安定性を測る指標のことなんだ！

「視覚的な安定」とは基本的に、ページを読み込んだ際に予期しないレイアウト変動が起きず、レイアウトが安定していることを指しているよ。

ちなみにCLSは「Core Web Vitals（コアウェブバイタル）」の中に含まれる指標の1つでもあるよ。

「Core Web Vitals」は、検索結果のどこにWEBサイトが表示されるかに影響するWEBパフォーマンスのことだよ。

ちなみに、CLSのほかにはLCP（Largest Contentful Paint）「コンテンツの表示までの時間」とINP（Interaction to Next Paint）「タイムラグ」があるよ。

「CLSが悪化する（低下する）＝表示されたWEBページで、意図せぬレイアウトのズレや崩れが生じることだよ。

次は、CLSが悪化する要因を見ていこう。

まず、CLSが悪化する要因として、画像や動画、広告のサイズが指定されていないことが挙げられるよ。

これは、画像のimgタグ、動画のvideoタグを設置する際に、width属性とheight属性が設定されていないことを指すよ。

画像や動画、広告を挿入する際は、事前に画像タグに幅（width）や高さ（height）を指定しておこう。

画像を読み込む前や後でズレが発生するのを防げるよ！

動的コンテンツをたくさん使うのも、CLSが悪化する要因だよ。

動画も含まれるけど、具体的にはユーザーの操作していない場合でも表示されるコンテンツのことを指すんだ。

大丈夫！

動的コンテンツに十分なスペースを確保しておくことで、レイアウトにズレが生じることがないよ！

WEBフォントの読み込みは本来、ユーザー側の閲覧環境に関係なく同一のデザインが表示されるんだ。

問題となるのは「FOIT」と「FOUT」だよ。

「FOIT」はWEBフォントを読み込む際に、テキストが一瞬見えなくなる現象のこと、「FOUT」は再び処理・演算して表示する現象のことだよ。

WEBフォントの数が多いと、読み込む回数も増えるから、自然に「FOIT」と「FOUT」が起こりやすくなってしまうんだ。

使いすぎないことも大事だけど、太さや斜体の違いを減らしたり、ローカルフォントを使用したりすることでも予防できるよ。

サーバーの応答に時間がかかりすぎても、CLSが悪化してしまうんだ。

簡単なのは、サーバーを増設する方法だよ。

サーバーが悪い自体が悪いわけではないこともあって、その場合はアクセス集中によるサーバーが麻痺が考えられるよ。

アクセス集中が考えられる場合は、アクセス制限を設けることで対策できるよ。

CLSの評価は「GOOD（良好）」「NEEDS IMPROVEMENT（改善が必要）」「POOR（不良）」で表示されるんだけど、それぞれ目安となるのが下記の数値だよ。

CLSの計算方法は難しいから、計算で求めるのはあまりおすすめできないんだ。

CLSの測定方法については、次の見出しで解説するよ！

CLSを測定したい場合は、ツールを使えば自分でも簡単にできるよ。

CLS測定の主な方法は、以下の2つだよ。

比較的簡単にCLSを測定できるのが「Googleサーチコンソール」を使う方法だよ。

WEBサイトの運営には欠かせないツールだね！

「ウェブに関する主な指標」という機能では、ページの表示速度や、実際のパフォーマンスを確認できるんだ。

CLSの測定は「PageSpeed Insights」というツールを使用するのもおすすめだよ。

CLSを測定したいページのURLを入力して、分析をクリックするだけだから簡単に測定できるんだ。

100点満点で、90点以上が緑、90点未満がオレンジ、50点未満が赤になっていて、3つのカラーで分かりやすく表示されるよ。

最後にまとめとして、以下3点を頭にメモしていってね。

CLSを改善して、ユーザーが閲覧しやすいWEBサイトを目指そう！