CLSの確認方法。画像と地図で表示がずれるときの見直し方

1. PageSpeed Insightsで、携帯電話のCLSを読む

文末のリンクからPageSpeed Insightsを開き、気になる公開ページのURLを入れて「分析」を押します。「携帯電話」の上部にある「実際のユーザーの環境で評価する」で、Cumulative Layout Shift（CLS）を探します。ページ単位のデータが少ない場合は、同じサイトの複数ページをまとめた「オリジン」のデータが出ることもあります。対象ページ単体を調べるときは、どちらの範囲の数字かを確認します。

上部に「データがありません」と出ても、下の「パフォーマンスの問題を診断する」で今回のテスト結果を見られます。2026年11月9日に毎日1%改善のホームページを測ったときは、上部は「データがありません」、下には「レイアウト シフトの原因」が表示されました。この項目は、ずれが小さいときにも表示されることがあります。

2. ずれた場所を見て、その前に何が表示されたか考える

「レイアウト シフトの原因」があれば開き、「要素」の欄で実際に動いた部分を見ます。たとえば文章が動いた場合は、その上で写真や地図が後から表示され、文章を押し下げたかを確認します。スクロールしてから起きるずれは今回のテストに出ないことがあるので、実際のスマホでも開き、気になる場所までスクロールします。

施工写真が表示された瞬間にその下の文章が動くなら、写真の幅と高さの比率に合う場所を、読み込み前から確保します。画面幅に合わせて写真を縮める場合は、高さも同じ比率で縮めます。埋め込んだ地図なら、表示される前から地図用の枠を確保します。

3. 修正前と同じページを測って、ずれ方を見比べる

私たちなら、変える場所を1か所に決め、同じURLを「携帯電話」で数回測り直します。テストの値にはばらつきがあるため、数字の傾向と、実際にスマホで見たずれ方を比べます。上部に出る利用データは過去28日間の集計なので、公開直後の変化は今回のテストと手元の画面で先に確かめます。

読み込み速度などもあわせて確認したい場合は、「無料のSEOチェックツール3選。検索・表示速度・構造化データの見方」から、何を調べるかに合う画面を選べます。

今日やることは、ずれた場所を1つ記録する

ページを1つ測り、画面のどの辺りが、いつ動くかをメモします。制作担当者に頼むなら、たとえば「料金ページの地図が出たときに、下の問い合わせボタンが下がります。スマホで、地図が表示される前から枠を確保できるか確認してください」と伝えます。