The Cumulative Layout Shift is a value that is part of Google’s Core Web Vitals and indicates how much a website changes during the loading process of the individual elements in the browser without the user having any influence on it. The better (read: lower) this value, the easier it is for the user to use the website.
Layout problems with numerous websites
There are websites that seem to have loaded their content and formatted it via CSS, only to then change something in their layout. This is annoying for people who are about to click or tap a button and now perform some other, undesired action. This visual instability led Google to invent and measure the Cumulative Layout Shift value. The better the value, the less likely it is that a website will change without user intervention while the content is loading, and the better the usability.
Examples could be as follows:
- A button that the user would like to click moves down because an advertising element has been loaded over it in the meantime. This is followed by an accidental click on the advertising element, which has a pop-up or other undesirable consequences.
- A block of text that is being read moves left or right, causing the reader to lose focus. Here too, advertisements or CSS information that was loaded too late could be responsible.
What is a good CLS score?
Unlike the other two metrics of the Core Web Vitals – First Input Delay (FID) and Largest Colorful Paint (LCP) – an artificially created value is used for CLS and not milliseconds or seconds:
- Google classifies a value of 0.1 as a good CLS score.
- A moderate score is found in the range between 0.1 and 0.25.
- Anything from 0.25 and up is defined as a bad score.
The following applies: The lower the value, the better (and the better the result of the entire page in the Page Experience). There is no separate benchmark for CLS, measurements are always made “live” on the website.
How is the CLS measured?
Google determines the cumulative layout shift using a formula that multiplies the two variables “impact friction” and “distance friction” with each other.
“Impact friction” refers to the displacement of a website element including the screen area that has already been used. If a web page element takes up 40% of the screen and then shifts 20%, this would result in a score of 0.6 (0.4 + 0.2). “Distance friction”, on the other hand, means the greatest distance that an element has moved in a vertical or horizontal direction. If an element shifts by 30%, this results in a score of 0.3. “Impact friction” and “distance friction” are now multiplied, which results in a value and thus a cumulative layout shift of 0.18 (0.6 * 0.3).
According to healthknowing, the CLS score can also be determined automatically with an add-on for Google Chrome and Chrome-based browsers. In addition, the PageSpeed Insights analysis tool can also output the CLS value and provide suggestions for improving the website.
Optimize cumulative layout shift
Fixed sizes instead of variables for design elements of a website have a positive effect on the CLS value. We provide further assistance, both on the hardware side and software changes, in order to move the cumulative layout shift into a green area, in a separate guide.