Table of Contents
Cumulative Layout Shift (CLS) is an important, user-centric metric for measuring visual stability of a page. It is to help 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.
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.
Google's PageSpeedInsights calculates CLS with these additional filtering options:
- Only adds to the 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
- Does not report if the First Contentful Paint (FCP) is not captured
- Does not report if the page is loaded from the BackForward (BF) cache and the persisted flag is true**
- Does not report if the page was loaded in the background
- Should never be more then 100
Blue Triangle CLS
The way Blue Triangle collects the data for CLS is the same as Google, the main difference being that we will add the score values up as long as there has not been recent input*. We tap into the “layout-shift” PerformanceObserver and add up the values from each entry to determine the CLS. Because of this, Blue Triangle's calculations may not match the Google PageSpeedInsights. By not including the additional filtering options, Blue Triangle's CLS scores are more sensitive to skew in the data.
*”recent input” is determined by the boolean property `hadRecentInput` from the layout-shift entries
Cumulative Layout Shift: 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.