累積レイアウトシフト (CLS)
累積レイアウトシフト (CLS) は、サイト全体のレイアウト安定性を測定する指標です。ページ読み込み時に予期せずレイアウトが変動するサイトは、ユーザーの誤操作や注意散漫を引き起こす可能性があります。
累積レイアウトシフト (CLS) は、DOMによって最初にレンダリングされた後に要素が移動した場合に発生します。この例では、テキストブロックの後にボタンが画面にレンダリングされ、ブロックが下方にシフトしています。CLSの計算では、影響範囲と移動距離の組み合わせが考慮されます。
新しい要素が画面にレンダリングされる際に位置が変動する要素は、CLSに影響を与えます。
各要素の個別のレイアウトシフトスコアは、予期しない移動が発生した場合にのみCLSとしてカウントされます。DOMに新しい要素が追加されたり、既存の要素のサイズが変更されたりしても、読み込まれた要素がその位置を維持している場合、レイアウトシフトとしてはカウントされません。
さらに詳しく
- Google: 累積レイアウトシフトのドキュメント
- Vercel: ブログ: コアウェブバイタル - 累積レイアウトシフト