Cumulative Layout Shift

"I was trying to click this link, but suddenly a banner appeared and I clicked that instead" Random internet user

Cumulative Layout Shift (CLS) is a metric that measures the visual stability of a web page.

Pages that have content that flickers or jumps around during load will have a high CLS metric.

A layout shift occurs when a visible element changes its position from one frame to the next, causing a shift in the layout of the page, making it difficult and perhaps very painful to interact with the page. The "cumulative" part means that all layout shifts are summed together. The resulting score is a unit-less number.

This hilarious video from web.dev shows exactly how painful it can be using a web page with layout shift.

Ordering 56 unwanted products is no joke!

What is a good CLS score?

Google recommends that pages, both desktop and mobile, stay within a value of 0.1. Values above 0.25 are considered poor.

What can I do to reduce the CLS score?

If you know that your LCP element is always an image, make sure that this image:

1. Make sure you have width and height on all pages. Even the ones that have a responsive size.
2. Reserve space (especially height) for banners and other dynamical content before it's loaded.
3. Preload critical fonts, and don't load them in CSS code
4. Use font-display: optional to make sure a font never swaps

And of course, monitor the CLS of your most important pages using PageVitals. We'll notify you if Lighthouse finds out you have too many layout shifts, or if the CLS value exceeds your budget (defaults to 0.1).

Google has a highly details articles on how to Optimize the Cumulative Layout Shift metric