Table of Contents
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.
How CLS is Now Calculated
At its core, the CLS is calculated by adding the “value” property of the LayoutShift events. 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
-
Do not report if the page is loaded from the BackForward (BF) cache and the persisted flag is true*
-
Do not report if the FCP is not captured
-
Do not report if the page was loaded in the background
-
Do not report if the CLS score is higher than 100**
**This is a requirement specifically discussed with Google as a way to prevent outliers
Blue Triangle CLS
As with all metrics collected by Blue Triangle’s Real User Monitoring (RUM), we strive to keep up with and lead the implementation of new performance and end user experience metrics. Blue Triangle implemented this metric very early as compared to the rest of the performance industry, as such we have had to make some changes along the way as this metric continues to mature. We recently (Jan 19, 2022) implemented some changes to our CLS collection methodology to more closely align with Google’s specifications.
More information regarding why Google decided to update CLS methodology is available here.
How CLS is Collected in Blue Triangle's RUM
CLS is a score that is collected from the LayoutShift interface of the Layout Instability API. To access the “LayoutShift” interface, our tag instantiates a new PerformanceObserver with the type “layout-shift”.
Example:
new PerformanceObserver((list) => { console.log(list.getEntries());
}).observe({type: 'layout-shift', buffered: true});
It is important to understand that the CLS is not a variable that can be freely accessed via API call like the NavigationTimings API. CLS can only be recorded whenever a layout shift event fires after a PerformanceObserver has been instantiated. As the layout shift events fire, the scores must be tracked and summed together per the restrictions laid out by Google.
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
*https://github.com/GoogleChrome/web-vitals
https://developer.mozilla.org/en-US/docs/Web/API/Layout_Instability_API
Comments
0 comments
Please sign in to leave a comment.