Table of Contents
| Good CLS values are 0.1 or less, poor values are greater than 0.25, and anything in between needs improvement |
Overview
Cumulative Layout Shift (CLS) is an important, user-centric metric for measuring visual stability of a page. It helps quantify how often users experience unexpected layout shifts—a low CLS helps ensure that the page is functioning and convenient for the user. CLS 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.
Calculation
To calculate the layout shift score, the browser looks at the viewport size and the movement of unstable elements in the viewport between two rendered frames. The layout shift score is a product of two measures of that movement: the impact fraction and the distance fraction.
| layout shift score = impact fraction * distance fraction |
How CLS is Now Calculated
At its core, the CLS is calculated by adding the “value” property of the LayoutShift events within session windows, not over the entire page lifetime. To get more accurate CLS values the following requirements have been added to filter out bad values or outliers:
-
Only add up more score if the layout-shift event occurred less than 1 second after the previous entry and less than 5 seconds after the first entry in the session (Session Window)
-
Do not report if the page is loaded from the BackForward (BF) cache and the persisted flag is true to avoid double counting
-
Do not report if the FCP is not captured
-
Do not report if the page was loaded in the background
Glossary
CLS End: calculated as the epoch timestamp of the last layout shift that occurred (that timestamp - navigationStart = CLS End); separate metric from CLS
Cumulative Layout Shift(CLS): user-centric metric for measuring visual stability; a measure of the largest burst of layout shift scores for every unexpected layout shift that occurs during the entire lifespan of a page.
Impact Fraction: measures how unstable elements impact the viewport area between two frames.
Distance Fraction: measures the distance that unstable elements have moved, relative to the viewport; greatest distance any unstable element has moved in the frame (either horizontally or vertically) divided by the viewport's largest dimension (width or height, whichever is greater).
Layout Shift: occurs any time a visible element changes its position from one rendered frame to the next.
Layout Shift Score: product of two measures of that movement: the impact fraction and the distance fraction.
Sources
Comments
0 comments
Please sign in to leave a comment.