CLSの確認方法は？PageSpeed Insightsでの確認手順

2026年1月9日

Googleサーチコンソールの「ウェブに関する主な指標」レポートでCLSの問題が検出された場合や、現在のパフォーマンス状況を把握するためには、適切なツールを用いて数値を計測する必要があります。

本記事では、Googleが提供する「PageSpeed Insights（PSI）」を使って、CLSの数値を実際に計測する方法を解説します。

CLSの用語の説明については、以下の記事でご紹介しています。

PageSpeed InsightsでCLSを確認する方法

まず、改善したいページのURLを用意し、以下の手順で計測を行います。

上記の画像の、右にある測定値が CLSの値になります。計測数値が良好の場合、緑色になります。
今回試したページでは、スコアが 0 ととても良好な数値でした。ページを表示した際に最初に画面に表示される領域ではレイアウトシフトは全く起きていないということです。

評価基準

PageSpeed Insights の診断結果では、原因となる箇所を確認できます。
まず、PageSpeed Insightsの診断結果を下にスクロールし、画面のスクリーンショットが並んだセクションを表示します。

上記の画像では、テキストと画像が、レイアウトシフトの原因だとわかりました。この情報を元に自身のサイトを改善していきます。

また、Googleのデベロッパーツール（開発者ツール）の「パフォーマンス」タブからでもCLSの数値と原因を特定できます。

画面上部の「実際のユーザーの環境で評価する」レポートと画面下部の「パフォーマンスの問題を診断する」レポートの数値がズレている場合があります。それぞれのレポートで参照しているデータが違うためこのような原因が起こります。

たとえ下部の診断結果が良くても、「実際のユーザーの環境で評価する」レポートの方で 0.1以上の数値が出ていたら、実際のユーザーの多くはレイアウト崩れを体験しています。その場合は 0.1以下を目指してサイトを修正してみてください。

特定した原因に対し、以下の修正を行います。

最も頻出する原因です。HTMLのimgタグに width 属性と height 属性を記述します。

修正前： <img src="sample.jpg" alt="サンプル">
修正後： <img src="sample.jpg" alt="サンプル" width="640" height="360">

このように数値を指定することで、ブラウザは画像の読み込み前に表示スペースを確保します。その結果、画像表示時のレイアウト移動を防ぐことができます。

WordPressなどのCMSを使用している場合は、以下の設定を確認してください。

WordPressの場合： WordPressでは、画像を挿入すると自動的に幅と高さが指定されます。もしCLSエラーが出る場合は、古いテーマを使用しているか、画像を表示するプラグインの設定で「サイズ指定を無効化」している可能性があります。テーマや「画像最適化プラグイン」の設定を見直すか、該当の画像を一度削除して貼り直すことで改善することがあります。

ノーコードツール（Wix, STUDIOなど）の場合： 多くのツールでは自動で対策されていますが、画像を「自動」や「Auto」というサイズ設定にしていると、読み込み時にサイズが確定せずズレることがあります。管理画面上で画像のサイズを「固定（px指定）」にするか、枠の大きさを固定するなど対策する必要があります。