チャプター20

累積レイアウトシフト (CLS)

累積レイアウトシフト (CLS) は、サイト全体のレイアウトの安定性を測る指標です。ページの読み込み中にレイアウトが予期せずずれるサイトは、意図しないユーザーエラーや注意散漫につながる可能性があります。

累積レイアウトシフト (CLS) は、DOMによって最初にレンダリングされた後に要素がシフトした場合に発生します。この例では、テキストブロックの後にボタンが画面にレンダリングされ、ブロックが下にずれました。CLSを計算する際には、影響と距離の組み合わせが考慮されます。

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

チャプター完了20