CLS i.e Cumulative Layout Shift a metric used to quantify the stability of the content on a website when it loads. Normally a layout Shift occurs whenever any element on the web page changes it position unexpectedly.

Major Reason that constitutes to CLS are :-

1. Images without dimensions
2. Dynamically Injected Content
3. Web Fonts (Fall back font getting replaced with the new font) Steps to prevent CLS:-
4. Always include size attributes on your images and video elements, or otherwise reserve the required space with something like CSS aspect ratio boxes
5. Never insert content above existing content, except in response to a user interaction. Resource I used to learn about this:- • https://web.dev/cls/