Cumulative Layout Shift (CLS) is a Core Web Vital that quantifies the amount of unexpected visual content movement on a web page. An unexpected layout shift occurs when elements on the page move after they have already been rendered, often due to asynchronously loaded resources like images, ads, or dynamic content injected by JavaScript. A low CLS score indicates a stable and pleasant user experience.
A good CLS score is typically 0.1 or less. For developers, minimizing CLS is crucial for preventing frustrating user experiences where users might click the wrong button or lose their place while reading. It's also a significant factor in Google's page experience ranking signals.
To improve CLS, you should always include size attributes on your images and video elements, reserve space for ads or embeds before they load, and avoid inserting new content above existing content unless triggered by a user interaction. For example, if you have an ad banner that loads dynamically, ensuring its container has a fixed height or a placeholder prevents the content below it from jumping around once the ad appears.