Shiftの略で、予期しないレイアウトのズレを表します。画像などがあとから読み込まれたせいで画面がガクッってなるあれです。一応Google先生の説明的には以下のようになっています。ページがどのくらい安定しているように感じられるかを表します。コンテンツにおける予期しないレイアウトのずれの量を定量化しますhttps://developers-jp.googleblog.com/2020/05/web-vitals.htmlCLS対策をするCLS対策で最初に思い浮かぶのは画像です。何も対策をしていないときは以下のような挙動をします。次にCLS対策をしているものは次のような挙動になります。私はEmotionを使ってこれを実装しているのですが、以下のようになります。/>;};CLS対策をするにはまず、画像のheightが事前に計算できないといけません。今回は読み込む画像の大きさを予め指定し、aspect-ratioを使うことでレスポンシブ対応をしています。画像の大きさ指定に関してはmarkdownのparserを自分で拡張することでいい感じにやっています。