Performance · Website glossary

Cumulative Layout Shift

Quick answer · What is Cumulative Layout Shift?

CLS measures unexpected visual movement of page elements using a session-window method.

IN PRACTICE

Cumulative Layout Shift: an example

An image without reserved space loads and pushes a button away from the visitor's pointer.

KEEP IN MIND

A layout can feel unstable even when it looks correct after loading; observe its loading sequence.

Put the idea to work

Frequently asked questions

What is a practical example of Cumulative Layout Shift?

An image without reserved space loads and pushes a button away from the visitor's pointer.

Can a page shift during loading and look correct afterward?

A layout can feel unstable even when it looks correct after loading; observe its loading sequence.

Which concepts should I read alongside Cumulative Layout Shift?

Core Web Vitals: A set of user-experience metrics covering loading, interaction responsiveness, and visual stability, currently LCP, INP, and CLS.
Responsive images: Image markup that lets a browser select suitable sources for layout size, resolution, or art direction.