Cumulative Layout Shift

The Cumulative Layout Shift metric aims to measure the stability of the page layout. More shifts in the layout could result in visitors becoming disoriented or frustrated while visiting your website of webshop.

This metric is available in RUM, synthetic monitoring and soft navigations.
There is a low correlation between CWV and Lighthouse outcomes.
CLS is part of Google's Core Web Vitals.

Anything that is pushing contents down or to the side could be the cause of a Layout Shift. Video ads, but also insufficient image placeholders on -for example- product listing pages are examples of unexpected layout shifts.

Do note that the root cause of a layout shift is often not reported. It's often the element that got pushed away that is being reported.

Nuances of the Cumulative Layout Shift metric

There are some important nuances when it comes to the Cumulative Layout Shift:

• unexpected shifts
  only unexpected shifts will be considered a layout shift. This makes sense considering the fact that a typical FAQ will push contents down as well.
• 500ms threshold
  more technically, any shifts that are happening 500ms after user interaction is considered unexpected;
• page life cycle
  unlike Lighthouse -or synthetic monitoring in general-, CLS is measured throughout the whole page life cycle.
• Single Page Applications
  If your site is a Single Page Application, there are exceptions when it comes to tracking Core Web Vitals across all page navigations.
• session window
  Although tracked during the whole life cycle of a page, only the highest CLS within a session window is being reported. CLS would be tracked in a cumulative way when introduced, but this behaviour got changed by Google as of Chrome version 91 to not penalize long living pages (typically those that are part of Single Page Applications) necessarily higher than so-called Multi Page Application sites.

Lighthouse CLS versus Core Web Vitals CLS

There's a low correlation between the CLS score that you would see in Lighthouse or synthetic monitoring in general (both lab data), and Core Web Vitals or Real User Monitoring (both field data).

In general, lab data tests such as Lighthouse won't scroll and stops measuring after a certain time. As a result, it is believed that the Core Web Vitals CLS is also only measured up to the window loaded event. However, in reality it is being tracked during the whole life cycle of the page.

The latter means that CLS is also reported when users are scrolling to the bottom of a webpage, or interacting with the hamburger menu or add-to-cart buttons. Layout shifts could even happen before, during or after those moments.

Additionally, you can't predict when users scroll, how fast they scroll to allow dynamic contents to render and if issues could depend on device and internet speed conditions. This is where Real User Monitoring comes in, to spot those conditions and differences.

As a result, site owners should expect a low correlation between a lab data CLS score and field data CLS scores.

Continue reading about Cumulative Layout Shift

Want to learn more about Cumulative Layout Shift? Check our blog, check the web.dev CLS article or keep an eye out on the changes to the CLS metric.

• PreviousLargest Contentful Paint
• back to parent
• NextInteraction to Next Paint