Cumulative Layout Shifts

Cumulative Layout Shift (CLS) measures how much (if any) content moves around in the viewport after it is visible.

CLS can be extremely hard to track down because of the nuances involved in determining causes. The value represents the largest shift that happens in a 5 second period over the lifetime of a page, so elements far down a page can be the source of the issue.In this example, the web-vitals.js plugin is used to detect CLS, and then a rich set of data is sent to Honeycomb to help you understand not just the score, but the source.