Cumulative Layout Shift (CLS)

The main purpose of Cumulative Layout Shift (CLS) metric is, to have a enjoyable user experience by not allowing webpage elements to be moved/change positions while the page loads or while 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 bad user experience. The website owners or publishers should strive to achieve a score of less than 0.1 in this metric. 

The layout shifts can happen due to any reason, such as not having image dimensions, enlarging or shrinking images, videos or iframes by Javascript, delay in fonts loading. The following video shows what happens if there is a layout shift. 

Some techniques we can use to identify this: 

• Use slow 3G speed throttling in the 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 checkout this article, very nicely explained here – https://web.dev/cls/

Now that you have understood what Core Web Vitals are and how different parameters add up, the next part in this course shows how to actually work on each parameter. We suggest you take help of your developer friends in the next part – to understand and execute better.