CLS改善方法｜ページスピードインサイトの低下要因をわかりやすく解説

PageSpeed Insights（ページスピードインサイト）はCore Web Vitals（コアウェブバイタル）という指標を用いて計測しています。Core Web Vitalsはページの読み込み速度、インタラクティブ性、視覚安定性というユーザーエクスペリエンスを測定するための指標です。

このCore Web Vitalsの中の視覚安定性の指標をCLSで判定しています。CLSはCumulative Layout Shiftの略です。ページ読み込み時にレイアウトの位置ズレを数値化したもので、CLSスコアを0.1未満となるようにします。なお、レイアウトの位置ズレが発生しなければスコアは0となります。

CLS判定方法

CLSの判定はPageSpeed Insights、Google ChromeデベロッパーツールのLighthouse、Search Consoleを使用します。PageSpeed InsightsはLighthouseを使用しているので実質2種類の判定方法となります。

特定のページについて判定する場合はPageSpeed Insights（またはLighthouse）、サイト全体の状況を把握したい場合はSearch Consoleを使用すると良いかなと考えます。

なお、スコアは緑（良好：0.1以下）、オレンジ（要改善：0.1以上〜0.25以下）、赤（不良：0.25超）です。

CLSの低下原因

CLSが発生する原因は要素の位置ズレです。コンテンツの途中で最初はなかった広告が入ってズレるとかです。主に以下が該当するのではないでしょうか。

• 広告の挿入
• 画像の表示
• 地図の埋め込み表示（iframeなど）
• Ajaxによるコンテンツ追加

CLSの判定はファーストビューに対して行われるので、特に最初に画面表示される部分は上記への対応をしましょう。

CLS改善方法

実際のCLS改善方法です。上記項目について以下対応を行います。

• 広告の設定の見直し
• 画像のwidthとheightを設定する
• iframeのwidthとheightを設定する
• Ajaxで読み込むエリアのwidthとheightを設定する

広告設定はGoogle Adsenseにログインして行います。左メニュー「広告＞設定したいサイト＞ページ内フォーマット」に遷移しバナー広告、Multiplex 広告、関連する検索のチェックを外します。または除外エリアでファーストビュー部分を除外設定するのも良いでしょう。コンテンツ部分に自動広告が挿入されなければCLS改善ができます。

他は高さ（height）の設定を行えば解消できます。要素の高さを設定しておけば位置ズレは発生しません。

CLS以外のPageSpeed Insights指標

Core Web VitalsにおいてCLSは指標の一つです。他の指標であるLCPについてはこちらの記事をご覧ください。もう一つの指標あるINP（Interaction to Next Paint）については次回の記事で発信しますのでお待ちください。