What is Cumulative Layout Shift (CLS)?
Cumulative Layout Shift is a Core Web Vitals metric that measures how much visible content moves unexpectedly while a page is open. Each shift is scored by how much of the viewport moved and how far, and the page's score is its largest burst of shifts. A score of 0.1 or less is good.
What causes layout shift
Images and videos without set dimensions, adverts and embeds that load late, banners added above content and web fonts that swap in with different metrics. Shifts within half a second of a tap or key press do not count, because the user expected them.
How to prevent it
Give every image and embed a width and height or an aspect ratio, reserve space for anything that loads later, and use fallback fonts with matched metrics. Animate with transform and opacity rather than properties that change the layout.
Why it matters
Moving content makes people tap the wrong button or lose their place in a paragraph. A stable page feels finished, which supports trust as much as speed does.
