Cumulative Layout Shift (CLS) is a metric used to measure the visual stability of a web page during the loading process. It quantifies how many elements on the page shift or move unexpectedly while the page is being rendered. CLS is particularly important for providing a better user experience, as unexpected layout shifts can be disruptive and frustrating for website visitors.
CLS is calculated by summing up the individual layout shift scores of all unstable elements on the page. An unstable element is any visible element that changes its position between two rendered frames. The layout shift score for each element is determined by multiplying its impact fraction (the proportion of the viewport it occupies) by its distance fraction (the distance it moves relative to the viewport).
A layout shift with a greater impact fraction and distance fraction will contribute more to the CLS score. The cumulative CLS score is then computed by summing the layout shift scores of all unstable elements. A CLS score of less than 0.1 is considered good, while scores between 0.1 and 0.25 indicate room for improvement, and scores above 0.25 are considered poor.
Website developers and designers can optimize for CLS by following best practices such as:
- Reserve space for dynamic content: Ensure that space is allocated for elements that might load or change size asynchronously, preventing sudden layout shifts.
- Avoid inserting content above existing content. Loading new elements above existing content can cause the layout to shift unexpectedly. Place new content below existing content whenever possible.
- Use CSS transitions: Animations and transitions should be used to smooth out changes in layout, making them less jarring for users.
- Optimize web fonts: Delay font loading or specify font sizes and fallback fonts to prevent text from reflowing as fonts load.
By optimizing for CLS, website owners can create a more visually stable and user-friendly browsing experience, leading to higher user engagement and satisfaction.
