Cumulative Layout Shift, or CLS, measures how much a page layout moves unexpectedly while it loads. Layout shifts can make a site frustrating because visitors try to click one thing and suddenly the page moves.
What causes layout shift
- Images without width and height
- Ads or embeds that load late
- Fonts that swap in a disruptive way
- Dynamic banners inserted above existing content
How to reduce CLS
Set image dimensions
Always define image width and height so the browser can reserve the right amount of space.
Reserve space for embeds
If you use video embeds, ads, or forms, give them containers with predictable dimensions.
Be careful with banners
Cookie notices, announcements, and sticky bars can all shift the layout if they push content down after loading.
Optimize web fonts
Use font-display settings carefully and test whether a fallback font causes a noticeable layout change.
Why this matters
A site can feel “broken” even if it loads quickly if the content keeps moving. Improving CLS helps visitors trust the page and interact with it more easily.