Cumulative Layout Shift (CLS)

The main purpose of the Cumulative Layout Shift (CLS) metric is to have an enjoyable user experience by not allowing webpage elements to be moved/change positions while the page loads or while the user interacts with it. This can lead to unintended results as a user can click on wrong links because of layout shifts, therefore resulting in a bad user experience. The website owners or publishers should strive to achieve a score of less than 0.1 in this metric. 

Layout shifts can occur for several reasons—such as missing image dimensions, images or videos being dynamically resized by JavaScript, iframes adjusting unexpectedly, or delays in font loading. The video below demonstrates how a layout shift appears in practice.

Some techniques we can use to identify this: 

• Use slow 3G speed throttling in Google Chrome’s inspection tools.
• Watch moving elements frame by frame in the inspection tool.
• Allot fixed dimensions or reserve space (width and height) for such moving elements.

For more information, you can refer to this article – it provides a clear and well-explained breakdown of the concept.

Now that you understand what Core Web Vitals are and how the different parameters come together, the next part of this course will guide you through how to work on each metric in practice. We recommend taking support from your developer friends in the upcoming section to better understand and implement the concepts.