Cumulative Layout Shift (CLS)

The main purpose of Cumulative Layout Shift (CLS) metric is, to have a good user experience by not allowing a webpage elements to be moved while it loads or while user interacts with it. A user can click on wrong links because of layout shifts which is a bad user experience. The website owners or publishers should strive to have it less than 0.1. 

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.