Cumulative Layout Shift (CLS)
Cumulative Layout Shift (CLS) is a user-centric performance metric that evaluates the visual stability of a web page by measuring the frequency and extent of unexpected layout shifts during the page load process. CLS helps identify potential issues with the page's layout that may disrupt the user experience, such as elements changing position or size without warning, causing users to click on unintended elements or lose their reading position.
A low CLS score indicates a more stable and visually consistent page layout, contributing to a better user experience. Google recommends aiming for a CLS score of 0.1 or lower to ensure an optimal user experience.
Improving CLS
To improve CLS, several optimization techniques can be employed, including:
- Specifying dimensions for images, videos, and other media elements: By explicitly setting width and height attributes, the browser can allocate the correct amount of space and prevent unexpected layout shifts.
- Reserving space for ads and dynamic content: Allocating sufficient space for dynamic content, such as ads or widgets, ensures that the surrounding content remains stable when the content is loaded or updated.
- Using CSS aspect-ratio property: This property allows specifying the aspect ratio for elements, which can help maintain the layout consistency when media elements are loaded.
- Loading custom web fonts efficiently: Implementing font-display properties, such as 'swap' or 'fallback', can help minimize the impact of web fonts on layout stability.
These are just a couple of suggestions on optimizing your CLS results. Get into performance-first mindset with our comprehensive frontend performance checklist.
Monitoring and optimizing CLS can be accomplished using various tools, such as Google PageSpeed Insights, Lighthouse, and Chrome User Experience Report (CrUX). These tools provide insights into CLS values and offer recommendations for improving the metric.
