Cumulative Layout Shift Test

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.