Cumulative Layout Shift (CLS)
Slap yourself if
You think CLS is just images without width and height.
Why this exists
CLS exists because visual stability is orthogonal to speed. Pages can load fast yet feel broken if content moves after users start reading or interacting. Browsers needed a way to quantify that instability.
Mental model
CLS measures unexpected movement of visible content. It’s not about animation or slowness — it’s about the browser being forced to reflow layout after the user assumed things were stable.
- The browser paints content based on current layout assumptions.
- Late-loading resources or state changes alter layout.
- Existing elements shift position between frames.
- The browser records layout shift entries and aggregates them.
- Injecting content above existing UI without reserving space.
- Late-loading fonts changing text metrics.
- Async data expanding components after paint.
- Using animations that trigger layout instead of transforms.
Cumulative Layout Shift measures how much visible content moves unexpectedly during a page’s lifetime, capturing visual instability rather than load speed.
- Content jumping during or after load
- Layout depending on async data without placeholders
- Fonts loaded without metric stability
- CLS discussed only in terms of images
Deep dive
Requires Pro
Premium deep dives include more internals, more scars.