# CLS

Cumulative Layout Shift — a Core Web Vitals metric that measures the amount of unexpected shifting of content elements while a page is loading.

**CLS (Cumulative Layout Shift)** is a Core Web Vitals metric that measures the total amount of unexpected movement of visible content elements while a page is loading. A high CLS leads to frustrating experiences, such as the text a user is reading suddenly shifting or the user clicking the wrong button.

Target values:

- **Good:** below 0.1
- **Needs improvement:** 0.1 – 0.25
- **Poor:** above 0.25

The main causes of CLS:

- Images and videos without specified dimensions
- Dynamic loading of ad or iframe spaces
- Text resizing while web fonts are loading (FOIT/FOUT)
- Banners or cookie notices added on top of content afterward

**Tip:** Add `width` and `height` attributes to all images, use `font-display: swap` for web fonts, and do not add anything on top of content without user interaction.