Layout shift

Cumulative Layout shift, or Layout shift for short, is where an element on a page or screen is added or removed which then causes the other elements on the page to shift and move places.

For example if an element is removed from the top of a page then the elements below will have to shift upwards. If an element is added to the top of the page then the existing elements on the page will have to shift down.

Generally, layout shift is something to avoid because it can create a poor user experience. To reduce CLS you can limit the amount of elements that dynamically added or removed from a page, as well as making use of placeholders to keep the positions of the elements on the page intact.