What is Cumulative Layout Shift (CLS)?

CLS (Cumulative Layout Shift) is a web performance metric used to assess the visual stability of a web page while it is loading. It measures unexpected and unwanted movements of page elements that can disrupt the user experience.

CLS occurs when elements like images, ads, or blocks of text change position unexpectedly while the page is loading. These changes can be frustrating for users, especially if they accidentally click on an element because it moved right before they reached it.

To calculate CLS, each layout change is measured by its impact on the user experience. Specifically, it measures the distance an element moves multiplied by the viewport area affected by the change. This is for all changes that occur during the page's lifetime (from the start of loading until it is fully loaded).

The CLS is then expressed as a decimal number. A CLS value less than 0.1 is generally considered good practice for visual stability, while a value greater than 0.1 can be frustrating for users.

To improve CLS, developers can ensure that page elements are sufficiently reserved in advance by using fixed dimensions for images and videos or setting sizes for containers that will hold dynamic content. By avoiding sudden changes in layout, developers can improve visual stability and provide a better user experience.