Core Web Vitals事例

CLSのデモ

これはCumulative Layout Shift (CLS) の検証デモサイトです。CLSとはレイアウトの移動量を示す指標です。 2021年5月からCLSを始めとするCore Web Vitalsがページエクスペリエンスのひとつに組み込まれます。

▼ここに画像①あり

▲ここに画像あり

▼ここに画像②あり

▲ここに画像あり
ズレてしまうレイアウト箇所

ここは画像やコンテンツのローディングによって、ページのレイアウトがズレてしまう(下に押し下げられてしまう)箇所です。 ユーザーがページを読んでいる最中にレイアウトが途中でズレてしまう事で、ユーザーの目線を混乱させたり、フォームやリンク箇所の上部レイアウトがズレる事で誤った操作(クリックやフォームの投稿など)を誘発しかねません。

ページのレイアウト移動を排除する事で、ユーザー体験の低下を未然に防ぐ事ができます。