【れいあうとしふと】
レイアウトシフトとCLS とは？
最終更新:
💡 「押そうとしたボタンが動いた！」を減らそう
レイアウトシフトは、表示されているページ要素の位置がずれる現象。CLSは、予期しないずれが連続した区間のうち、合計スコアが最も大きい区間で表示の安定性を評価する指標。
📌 このページのポイント
- 画像・広告・フォントなどの表示で、既存の要素がずれることがある
- CLSはレイアウトシフトそのものではなく、表示の安定性を測る指標
- 良好の基準はCLS 0.1以下。実利用の評価では75パーセンタイルを使う
- 画像や広告の領域を確保し、フォントの切り替わりも確認する
ひよこ 記事を読んでいたらボタンが動いたよ！
ペンギン先生 画像や広告などが後から表示されて、もともと見えていた要素が押し下げられることがあるね。それがレイアウトシフトだよ。読み込みが終わった後も、ページへの内容の追加などで起こり得るんだ。
ひよこ CLSは全部のずれを足すの？
ペンギン先生 現在の方式では、予期しないずれが続いた区間ごとにスコアをまとめ、最も大きい区間を採るよ。区間は、ずれの間隔が1秒未満で続き、全体で最大5秒。ページを開いてからのずれを全部足すだけではないんだ。
ひよこ どんな値ならよいの？
ペンギン先生 0に近いほど安定しているよ。良好の基準は0.1以下。多くの利用者でその基準を満たすかを見るときは、スマホとPCを分け、実利用データの75パーセンタイルで評価する。スコアが必ず0から1の範囲に収まるわけではないよ。
ひよこ どうすればずれを減らせる？
ペンギン先生 画像のwidthとheightなどで表示の比率を示し、広告などの領域も先に確保しよう。フォントは、代替フォントとの文字の寸法の違いにも注意する。font-display: swapだけでずれが必ずなくなるわけではないんだ。
ひよこ 操作で動く部分も全部悪いの？
ペンギン先生 クリックなどの直後に起こる、想定された変化はCLSの計算から除かれる場合があるよ。読み込み直後の検査だけでは後のずれを見落とすので、実際の操作も確認しよう。Core Web Vitalsは検索でも使われるけれど、CLSだけ良くすれば上位になるという保証はないんだ。
まとめ：ざっくりこれだけ覚えればOK！
「レイアウトシフト」って出てきたら「見ているページの配置が途中でずれること」と思えばだいたいOK！
📖 おまけ：英語の意味
「Layout Shift / Cumulative Layout Shift」 ＝ 配置のずれ / 累積レイアウトシフト
💬 Layoutは配置、Shiftはずれ。CLSは連続した予期しないずれをまとめて評価する指標で、ページを開いてからのずれをすべて足す方式ではないよ。