Technical calculation and measurement of CLS score

The Cumulative Layout Shift (CLS) score is a metric that quantifies the visual stability of a webpage by measuring unexpected layout shifts during page load or user interaction. It is calculated by multiplying two key components: the impact fraction and the distance fraction.

• Impact Fraction measures the proportion of the viewport area affected by the layout shift. It is calculated as the area of the unstable element(s) that moved, relative to the total viewport area.
• Distance Fraction measures how far the unstable element(s) moved, expressed as a fraction of the viewport's width or height (whichever is greater).

The formula for the layout shift score for a single shift is:

[ \text{Layout Shift Score} = \text{Impact Fraction} \times \text{Distance Fraction} ]

Layout shifts are grouped into session windows, which are bursts of layout shifts occurring within a short timeframe (up to 5 seconds, with a 1-second gap to close a session). The CLS score for a page is the highest layout shift score recorded within any single session window during the page lifecycle.

For example, if an element occupies 30% of the viewport and shifts down by 30% of the viewport height, the impact fraction is 0.6 (30% original + 30% shifted space), and the distance fraction is 0.3. The layout shift score for that session window would be:

[ 0.6 \times 0.3 = 0.18 ]

Only the session window with the highest score contributes to the final CLS score.

CLS can be measured in two ways:

• Lab measurement using synthetic tools (e.g., Lighthouse, PageSpeed Insights) that simulate page loads.
• Field measurement using real user data from sources like the Chrome User Experience Report (CrUX), which captures actual user experiences.

Popular tools for measuring CLS include PageSpeed Insights, BigQuery, and Looker Studio. Understanding this calculation helps developers optimize web pages to reduce unexpected shifts and improve user experience.