CLS(累積レイアウトシフト)

CLS(累積レイアウトシフト)とは?

CLSはページ読み込み中に要素が予期せず移動する量を測定する指標で、0～1の数値で表現されます。数値が低いほど安定していることを意味します。 ウェブページを開いているときに、突然広告が表示されてページ全体が下にずれたり、ボタンが移動して誤クリックしてしまったりした経験がありませんか。これは「レイアウトシフト」と呼ばれる問題で、ユーザーの不満につながります。Googleはこの問題の大きさを測定する指標CLSを導入し、SEOの評価に組み込みました。

ひとことで言うと： 「ページ読み込み中に要素が動く度合い。動きが小さく、ぐらぐらしていなければスコアが低い(良い)」という指標です。

ポイントまとめ：

何をするものか： ウェブページの視覚的な安定性を0～1の数値で測定する指標
なぜ必要か： 予期しない要素移動が誤クリックを招き、ユーザー体験とビジネスに悪影響を与えるから
誰が見るか： ウェブデザイナー、フロントエンド開発者、マーケティング担当者

計算方法

CLSスコアは2つの値を掛け合わせて計算されます。(1)影響範囲：ずれた要素がページ全体の何%を占めるか、(2)移動距離：要素がビューポート(画面)に対してどれだけ移動したか。例えば、50%の領域の要素が25%移動したなら、CLSスコアは0.5×0.25=0.125になります。

レイアウトシフトは「予期せず発生した場合」のみカウントされます。ユーザーがボタンをクリックして表示が変わるなど、ユーザーの操作に応じたシフトは含まれません。

目安・ベンチマーク

0.1未満：「良好」 - ほぼ予期しないシフトがなく、快適なページです。0.1～0.25：「改善が必要」 - 目立つシフトがあり、改善が求められます。0.25以上：「不良」 - 重大な問題があり、即座の対応が必要です。Googleは0.1未満を目標にしていることから、この数値を意識して改善するべきです。

なぜ重要か

2020年、Googleはページ読み込み速度とともに「ページ体験」をSEOのランキング要因に組み込みました。良好なCLSスコアを持つサイトは検索結果で上位に表示されやすくなり、より多くの自然検索トラフィックを獲得できます。逆に不良なCLSスコアは検索順位を下げ、ビジネスに悪影響を与えます。また使いやすさという観点からも、突然動くページはユーザーの不満につながり、離脱率の増加につながります。

実際の改善例

画像サイズの指定 - 画像が読み込まれるとき、あらかじめ幅と高さを指定していないと、読み込み後にレイアウトが変わります。HTMLのwidth属性やheight属性、またはCSSアスペクト比を使用して事前にスペースを確保すれば、シフトを防げます。

広告スロットの予約 - 遅れて読み込まれる広告のためにあらかじめスペースを確保。これにより記事コンテンツが下に押し出されません。

フォント読み込みの最適化 - ウェブフォントが読み込まれるまでの間にシフトが起こらないよう、font-displayプロパティを使って読み込み順序を制御します。

よくある質問

Q: CLSスコアが0.1を超えていますが、すぐに修正する必要があります? A: はい、可能な限り早く改善することをお勧めします。特にeコマースサイトでは、予期しないシフトによる誤購入トラブルのリスクがあります。

Q: モバイルサイトとパソコンサイトでCLSスコアが違うのはなぜですか? A: 画面サイズが異なるため、同じ要素の移動でも影響範囲が変わります。モバイルはパソコンより画面が小さいので、同じピクセル数の移動でも相対的に大きく見えます。

Q: ユーザーのアクションで起こるシフト(ボタンクリック後の表示変更など)もカウントされますか? A: いいえ。CLSに含まれるのは「予期しない」シフトだけです。ユーザーが操作した結果の表示変更はカウントされません。

CLS(累積レイアウトシフト)