So, in this example the impact fraction is 0.75 and the distance fraction Unstable element has moved by 25% of the viewport height, which makes the In the example above, the largest viewport dimension is the height, and the Horizontally or vertically) divided by the viewport's largest dimension (width Is the greatest distance any unstable element has moved in the frame (either Unstable elements have moved, relative to the viewport. The other part of the layout shift score equation measures the distance that The red, dotted rectangle indicates the union of the element's visibleĪrea in both frames, which, in this case, is 75% of the total viewport, so its Then, in the next frame, the element shifts down by 25% of the viewport In the image above there's an element that takes up half of the viewport in oneįrame. Viewport-is the impact fraction for the current frame. The union of the visible areas of all unstable elements for the previous frameĪnd the current frame-as a fraction of the total area of the How unstable elements impact the viewport area between two frames. layout shift score = impact fraction * distance fraction The impact fraction and the distance fraction (both defined below). The layout shift score is a product of two measures of that movement: To calculate the layout shift score, the browser looks at the viewport sizeĪnd the movement of unstable elements in the viewport between two renderedįrames. Size, it doesn't count as a layout shift-as long as the change doesn'tĬause other visible elements to change their start position. If a new element is added to the DOM or an existing element changes Note that layout shifts only occur when existing elements change their start Such elements are considered unstable elements. Start position (for example, its top and left position in the default writing Layout shifts are defined by the Layout InstabilityĮntries any time an element that is visible within the viewport changes its Note: To learn more about the research and methodology behind this recommendation, see: Defining the Core Web Vitals metrics thresholds Layout shifts in detail

Good threshold to measure is the 75th percentile of page loads, segmentedĪcross mobile and desktop devices. To ensure you're hitting this target for most of your users, a To provide a good user experience, sites should strive to have a CLS score ofĠ.1 or less. To see which tools still provide the ability to benchmark against the original implementation, check out Evolving Cumulative Layout Shift in web tooling. Blue bars represent the scores of each individual layout shift.Ĭaution: Previously CLS measured the sum total of all individual layout shift scores that occurred during the entire lifespan of the page. The largest burst is the session window with the maximum cumulative score of allĮxample of session windows. Shift and a maximum of 5 seconds for the total window duration. Layout shifts occur in rapid succession with less than 1-second in between each (See below for details on how individual layoutĪ burst of layout shifts, known as a session Occurs during the entire lifespan of a page.Ī layout shift occurs any time a visible element changes its position from one What is CLS?ĬLS is a measure of the largest burst of layout shift scores for every Measuring how often it's occurring for real users. The Cumulative Layout Shift (CLS) metric helps you address this problem by In production, test images are often already in the developer's browser cache,Īnd API calls that run locally are often so fast that the delay isn't Or third-party content often doesn't behave the same in development as it does What makes this issue even more problematic is that how a site functions inĭevelopment is often quite different from how users experience it. That renders larger or smaller than its fallback, or a third-party ad or widget The culprit might be an image or video with unknown dimensions, a font Unexpected movement of page content usually happens because resources are loadedĪsynchronously or DOM elements get dynamically added to the page above existingĬontent. Most of the time these kinds of experiences are just annoying, but in someĪ screencast illustrating how layout instability can negatively affect Worse: you're about to tap a link or a button, but in the instant before yourįinger lands-BOOM-the link moves, and you end up clicking something The page? Without warning, the text moves, and you've lost your place. Have you ever been reading an article online when something suddenly changes on It 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. Source Key term: Cumulative Layout Shift (CLS) is a stable Core Web Vital metric.

Last shift online