Cumulative Layout Shift (CLS)
Published on:
February 18, 2021
Reading time:
minutes
This article is about Cumulative Layout Shift (CLS): What does it mean foryour own website? How does it affect and what does a website need to do to perform well?
Cumulative Layout Shift: What is it?
Google uses the third new metric of Core Web Vitals, called "Cumulative Layout Shift" (CLS for short) to measure the visual stability of a web presence. Since few website owners have any idea what this means, the term is best explained using a very practical experience that most users have every day when using the internet. You are reading an article or clicking on a link and suddenly, without warning, individual page elements shift so that you lose the thread. Recognizing that this is an annoying experience that negatively impacts the user experience of a website, Google has included CLS as a new metric for assessing user experience.
How does CLS affect my website?
In order to provide their users with the best user experience possible, website owners should make sure that page elements move as little as possible during the "lifetime" of the page. Especially on websites where clicking on links is important, for example to order a product, visual stability is of paramount importance. At the crucial moment, there must be no shifting of elements on the page.
What does my website need to do to perform well in CLS?
Specifically, Cumulative Layout Shift determines the total sum of individual shift values for all layout shifts that occur unexpectedly during a website's invocation. This is done by considering two values: the Impact Fraction and the Distance Fraction. For example, if a page element shifts by 25 percent, this results in a Distrance Fraction of 0.25 and an Impact Fraction of 0.75. The CLS value is calculated by multiplying the two fraction values. In the given example 0.1875. This value is already considered by Google to be in need of improvement. Only values below 0.1 are considered good. CLS values above 0.25 are considered bad by Google.
You can find the entire blog article series "The Google Update 2021" here.
- Google's Rating System
- Largest Contentful Paint (LCP)
- First Input Delay (FID)
- Cumulative Layout Shift (CLS)
- How can I prepare for this as a business?
European Accessibility Act
February 02, 2023
Digital accessibility - what does that mean?
January 24, 2023
Universal Analytics only available until July 2023
May 05, 2022
