About Cumulative Layout Shift Test

This test will check the Cumulative Layout Shift (CLS) score of the analyzed webpage. CLS is a Core Web Vitals metric calculated by summing all layout shifts that aren't caused by user interaction. Basically, whenever a page loads, certain page elements unexpectedly shift, affecting the way users interact with the webpage. A website with a low CLS has a stable page display, which does not shift elements around and ensures a steady, predictable loading of all website content. To provide a good user experience, sites should strive to have a CLS score of 0.1 or less.

Reducing CLS is crucial as pages that move around can result in a negative user experience (particularly on mobile devices). For most websites, you can avoid all unexpected layout shifts by sticking to a few guiding principles:

• Always include size attributes on your images and video elements, or otherwise reserve the required space with something like CSS aspect ratio boxes. This approach ensures that the browser can allocate the correct amount of space in the document while the image is loading.
• Try and avoid inserting dynamic content (e.g., banners, forms, etc.) above existing content unless in response to user interaction. This ensures any layout shifts that occur are expected.
• Prefer transform animations to animations of properties that trigger layout changes. Animate transitions in a way that provides context and continuity from state to state.