Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS)メトリックは、サイト全体のレイアウトの安定性を測定するものです。ページを読み込んでいる最中に予期せずレイアウトがずれるサイトは、ユーザーの誤操作や注意散漫につながる可能性があります。

Cumulative Layout Shift (CLS) は、DOMによって初期レンダリングされた後に要素が移動した場合に発生します。この例では、テキストブロックの後にボタンが画面にレンダリングされたため、ブロックが下にずれています。CLSの計算では、影響度と距離の組み合わせが考慮されます。

個々の要素のレイアウトシフトスコアは、予期しない移動が発生した場合にのみCLSにカウントされます。新しい要素がDOMに追加されたり、既存の要素のサイズが変更されたりしても、読み込まれた要素がその位置を維持している場合、レイアウトシフトにはカウントされません。

さらに読む

• Google: Cumulative Layout Shift ドキュメント
• Vercel: ブログ：Core Web Vitals - Cumulative Layout Shift