Cumulative Layout Shift (CLS)
Cumulative-Layout-Shift is a vital, user-centric metric for measuring Visual-Stability because it helps quantify how often users experience unexpected layout shifts on a webpage. A layout shift occurs any time a visible element changes its position from one rendered frame to the next. Google introduced this metric as part of the Core-Web-Vitals initiative to help site owners improve the quality of user experience on the web. According to documentation on web.dev, the score is calculated by multiplying the impact fraction and the distance fraction for each unexpected shift.
Common causes of poor CLS scores include Images without defined dimensions, Ads, embeds, and iframes without dimensions, and dynamically injected content. When these elements load, they push existing content down, causing a jarring experience for the user. To mitigate these issues, developers should use CSS aspect ratio boxes or set explicit width and height attributes on media. Additionally, using Web-Fonts improperly can cause layout shifts during the font swapping process, often referred to as Flash of Invisible Text (FOIT) or Flash of Unstyled Text (FOUT).
Measuring and diagnosing CLS can be done using various tools provided by Google-Chrome. Field tools like the Chrome-User-Experience-Report provide real-world data, while lab tools like Lighthouse and PageSpeed-Insights allow for testing during the development phase. Maintaining a low CLS score is essential for Search-Engine-Optimization, as it is a confirmed ranking factor in Google's search algorithm. For comprehensive implementation details, refer to the Google Search Central guidelines.