No Spinners UX Speed Museum

The Layout Leap

Have you ever read an article on a news page on a news site, and—*oops*—the content shifted and you lost where you were reading? That is Cumulative Layout Shift (CLS). This exhibit demonstrates how different types of late-loading elements—banners, hero images, sidebar assets, and even font changes—contribute to page instability. Use the scrubber to increase the number of "leaping" elements and compare the stable experience on the right.

We are preparing your experience...

CLS: 0.000
Leaping

2 elements causing shifts.

Stable

All elements have reserved space.

CLS: 0.000
178