Synonyms: Layout stability
CLS stands for Cumulative Layout Shift, a metric used to measure the visual stability of a web page as it loads. It specifically tracks how often and how much the elements on a page unexpectedly shift while a user is viewing it. These shifts can be disruptive and frustrating, leading to a poor user experience, especially if buttons, images, or text suddenly move around as you’re trying to interact with them.
CLS is one of the Core Web Vitals metrics Google uses to evaluate page performance. It focuses on user experience by ensuring that content remains stable as it loads, reducing accidental clicks and improving accessibility.
Several factors can contribute to a high CLS score, such as:
- Images without dimensions: If an image doesn’t have a specified width and height, it may cause layout shifts as the page loads.
- Ads or embeds that resize dynamically: Ads that load late or change size can push content around.
- Fonts loading late: If web fonts load after the initial page layout, text can shift, causing a layout shift.
To improve CLS, developers should ensure that elements like images, ads, and iframes have predefined dimensions and avoid loading content that changes size or position as the page is loading.