Core Web Vitals事例

CLSのデモ

CLSとは

Cumulative Layout Shift (CLS) とは、レイアウトがシフトする量を測る指標で、Core Web Vitalsのいち計測値になっています。

画像やダイナミックコンテンツの読み込み(ローディング)により、ページコンテンツが表示されている最中にレイアウトがズレてしまう事を測る指標です。


画像出典:https://www.youtube.com/watch?v=ioYqOicFtX0

このレイアウトのズレにより誤操作を誘発するなど、ユーザー体験を低下させてしまいます。 以上から、Core Web Vitalsではレイアウトのズレを減らすべく、そして検索ユーザーのユーザー体験の低下を防ぐべく、レイアウトのズレの有無をCLSという指標を用いてWebページを評価しています。

公式サイトによると、ズレを表す計算値は0.1以下を推奨(Good)とされており、それ以上のズレは改善が必要です。


画像出典:https://web.dev/cls/