Measures the visual stability of a website or web application. It measures the unexpected movement of visual elements as a user loads and interacts with a page caused by changes in the layout, such as images or ads loading in after the initial load.
CLS is a crucial metric for web designers and integral to understanding your website performance. CLS reflects the user's perception of the stability of a website: a high CLS score can lead to a poor user experience, making it easier for users to interact with the page as they expect. The goal is to minimize the layout shift so the user experience is more stable and predictable.
Cumulative Layout Shift can significantly impact a website's or web application's user experience. A high CLS score can lead to clarity and satisfaction for users, as the unexpected movement of visual elements can make it difficult to interact with the page as intended. This can lead to users leaving the site prematurely or needing help to complete the desired action. In terms of SEO, a high CLS score negatively impacts the website's search engine ranking and overall visibility.
- Websites with a high CLS score can also be frustrating for users, especially those with disabilities or using low-end devices. Therefore, developers need to minimize CLS as much as possible to ensure a stable and predictable user experience.
There are several steps you can take to improve Cumulative Layout Shift (CLS) on your website:
-
Reserve space for ads and other dynamic content: By reserving space for ads and other dynamic content, you can prevent layout shifts caused by these elements loading in after the initial page load.
-
Use width and height attributes on images: Specifying width and height attributes prevents layout shifts caused by images resizing as they load.
-
Defer non-critical resources: Deferring non-critical resources, such as third-party scripts and ads, can help reduce layout shifts caused by these elements loading in after the initial page load.
-
Use animations to indicate changes in the layout: This makes layout shifts less disruptive by giving users a sense of where elements are moving.
-
Monitor and measure your CLS score: Use browser developer tools or web-based CLS testing tools to monitor and measure your CLS score and identify areas where improvements can be made.
-
Optimize images and resources: Optimizing images and resources can help reduce the size of loaded assets and minimize layout shifts caused by them.
-
Use setTimeout() function: Before adding or updating DOM elements, the setTimeout() function can help prevent layout shifts caused by the browser re-calculating the layout.
-
Use the font-display CSS property: The CSS property can prevent layout shifts caused by web fonts loading in slowly.
Remember that it is important to test your website/web app in different browsers and devices, as different factors can affect layout shifts.