(See below for details on how individual layout shift scores are calculated.)Ī burst of layout shifts, known as a session window, is when one or more individual layout shifts occur in rapid succession with less than 1-second in between each shift and a maximum of 5 seconds for the total window duration. What is CLS? #ĬLS is a measure of the largest burst of layout shift scores for every unexpected layout shift that occurs during the entire lifespan of a page.Ī layout shift occurs any time a visible element changes its position from one rendered frame to the next. The Cumulative Layout Shift (CLS) metric helps you address this problem by measuring how often it's occurring for real users. Personalized or third-party content often doesn't behave the same in development as it does in production, test images are often already in the developer's browser cache, and API calls that run locally are often so fast that the delay isn't noticeable.

What makes this issue even more problematic is that how a site functions in development is often quite different from how users experience it. The culprit might be an image or video with unknown dimensions, a font that renders larger or smaller than its fallback, or a third-party ad or widget that dynamically resizes itself. Unexpected movement of page content usually happens because resources are loaded asynchronously or DOM elements get dynamically added to the page above existing content.

A screencast illustrating how layout instability can negatively affect users. Most of the time these kinds of experiences are just annoying, but in some cases, they can cause real damage. Or even worse: you're about to tap a link or a button, but in the instant before your finger lands-BOOM-the link moves, and you end up clicking something else! Have you ever been reading an article online when something suddenly changes on the page? Without warning, the text moves, and you've lost your place.

Cumulative Layout Shift (CLS) is an important, user-centric metric for measuring visual stability because it helps quantify how often users experience unexpected layout shifts-a low CLS helps ensure that the page is delightful.

Windows terminal font fallback