Cumulative Layout Shift (CLS)
Collected from: Web Browser (API)
Cumulative Layout Shift measures page stability, by monitoring significant movements of the elements on the page that may frustrate or mislead the user, during the entire page lifespan.
The CLS algorithm monitors every layout shift in the current context, thus excluding the content of iframes.
Layout shifts that happen 500 ms after an active user interaction (like a click, a keystroke, or the resize of the window) have no impact on the CLS. Hovering, scrolling, and update flinging are not considered active interactions.
Each of the other layout shift is scored according to the total affected area and the distance covered by the moved elements. Cumulative Layout Shift is the sum of all the considered layout shifts scores.
According to Google, to provide a good experience, sites should strive to have a CLS of less than 0.1, for most (75 %) of users.
To improve your Cumulative Layout Shift, make sure that the browser can allocate the right space for your images and iframes (including ads), even before it starts loading them, by defining their width and height, or aspect-ratio.
Cumulative Layout Shift is part of the Core Web Vitals. Google will use Core Web Vitals (Page Experience) as a Search ranking signal in 2021.
To make sure to properly use the CLS, we recommend that you deeply understand how it works. You can read our blog post: Cumulative Layout Shift, The Layout Instability Metric for further details.