【れいあうとしふと】
レイアウトシフト（CLS） とは？
💡 「押そうとしたボタンが逃げた！」——あのイライラを数値化した指標
📌 このページのポイント
- 画像やフォントの遅延読み込みで要素の位置がずれる現象
- CLSはレイアウトシフトの累積量を0〜1のスコアで表す（0.1以下が良好）
- 画像にwidth/heightを指定する、フォントにfont-display: swapを使うなどで改善できる
- GoogleのCore Web Vitalsの1つで、SEOにも影響する
ひよこ ネットで記事を読んでるとき、急にボタンの位置がズレて違うところ押しちゃったことがあるよ！
ペンギン先生 それがまさにレイアウトシフトだよ！画像や広告が遅れて読み込まれると、それまでの要素が押し下げられてズレちゃうんだ。ユーザーにとってすごくストレスだよね
ひよこ CLSって何の数値なの？
ペンギン先生 CLSはCumulative Layout Shiftの略で、そのズレの大きさと影響範囲を掛け合わせたスコアだよ。0に近いほど良くて、0.1以下が「良好」とされてるんだ。Googleがページの品質を測る3つの指標（Core Web Vitals）の1つでもあるよ
ひよこ どうすれば防げるのかな？
ペンギン先生 一番効果的なのは画像にwidthとheightを指定すること。ブラウザが読み込み前からスペースを確保してくれるよ。他にもWebフォントの読み込みでテキストがカクッと変わるのもCLSに含まれるから、font-display: swapを使うのも大事だね
ひよこ SEOにも関係あるって本当？
ペンギン先生 本当だよ。Googleは2021年からCore Web Vitalsをランキングシグナルにしてるんだ。CLSが悪いとSEOにマイナスになりうる。Chrome DevToolsのLighthouseでスコアを確認できるから、定期的にチェックするといいね
まとめ：ざっくりこれだけ覚えればOK！
「レイアウトシフト」って出てきたら「ページ読み込み中に要素がガクッとずれる現象」と思えればだいたいOK！
📖 おまけ：英語の意味
「Cumulative Layout Shift」 ＝ 累積レイアウトシフト
💬 Cumulative（累積の）Layout（配置）Shift（ずれ）で、ページ表示中のガタつきの合計量だよ