Skip to content
UXAtomSpeed

Core Web Vital

Cumulative Layout Shift (CLS)

How much the layout jumps while the page loads.

Good
0.1 or less
Poor
over 0.25

What it measures

CLS adds up unexpected layout shifts, weighted by how much of the screen moved and how far. Shifts right after a click or tap do not count.

Common causes of a poor CLS

  • Images and embeds without width and height.
  • Ads or banners inserted above existing content.
  • Web fonts that swap in at a different size.

How to improve it

  1. Set width and height or aspect-ratio on all media.
  2. Reserve space for ads, embeds and cookie banners.
  3. Match fallback font metrics with size-adjust.
  4. Animate with transform and opacity only.