What is CLS?

Cumulative Layout Shift (CLS) is a metric that measures the stability of a webpage's layout. It's a way to quantify how often a user experiences unexpected layout shifts while viewing a webpage.

Here's an example of what a layout shift might look like:

Imagine you're reading an article on a webpage and you see an image at the top of the page. As you scroll down, you see some text and then another image. Suddenly, the page jumps and the second image is now above the text. This sudden movement is a layout shift.

CLS is calculated by taking into account the distance that elements on the page move and the amount of time it takes for them to stabilize. The higher the CLS score, the more unstable the layout of the page is and the more disruptive it is to the user experience.

To improve CLS, web developers can try to avoid unexpected layout shifts by:

Properly sizing images and other media before they are displayed on the page

Using techniques such as "reserve space" or "fade-in" to prevent layout shifts when elements are loaded

Fixing any issues that cause elements on the page to shift unexpectedly, such as JavaScript code that changes the layout of the page after it has been loaded

Overall, a low CLS score is important for providing a smooth and stable user experience on a webpage.