Cumulative Layout Shift (CLS)
Design Processes
How much the page jumps around while it loads.
In practice
Cumulative Layout Shift scores unexpected movement — text that drops when an image above it finally loads, a button that moves as a banner appears, a font swap that reflows a paragraph. Each shift is small; together they are the experience of trying to tap something that moves. Reserving space for everything before it arrives is most of the cure.
Questions
What is Cumulative Layout Shift (CLS)?
CLS is a score for how much visible content shifts unexpectedly during a page's life, weighted by how far and how much moved.
Why do you use Cumulative Layout Shift (CLS)?
Shifting layouts cause mis-taps and feel broken. Google wants a score under 0.1.
How do you use/apply Cumulative Layout Shift (CLS)?
Give every image and embed explicit dimensions, reserve space for ads and dynamic content, preload fonts and avoid inserting content above what is already visible.
When do you use Cumulative Layout Shift (CLS)?
Whenever content loads asynchronously — images, fonts, third-party embeds, late-arriving data.
Who uses Cumulative Layout Shift (CLS)?
Front-end developers and designers who define how loading states look.
