How to Measure and Calculate CLS: Impact Fraction and Distance Fraction Explained

Cumulative Layout Shift (CLS) is calculated by multiplying two key components: Impact Fraction and Distance Fraction.

• Impact Fraction measures how much of the viewport area is affected by the layout shift. It is calculated by dividing the area of the impact region (the combined area of elements before and after the shift) by the total viewport area. The impact region is typically a rectangle covering all shifted elements and their original positions.

  [ \text{Impact Fraction} = \frac{\text{Area of Impact Region}}{\text{Area of Viewport}} ]

• Distance Fraction measures how far the shifted elements have moved relative to the viewport height. It is calculated by dividing the maximum distance any unstable element has moved by the viewport height.

  [ \text{Distance Fraction} = \frac{\text{Maximum Move Distance}}{\text{Viewport Height}} ]

The layout shift score for a single shift is then:

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

For example, if elements covering 70% of the viewport shift down by 20% of the viewport height, the layout shift score is:

[ 0.7 \times 0.2 = 0.14 ]

CLS is measured over session windows—bursts of layout shifts within up to 5 seconds—and the highest layout shift score in any session window is used as the CLS score for the page.

This method captures both the size of the affected area and the distance it moves, reflecting the visual instability users experience during page load or interaction.