CLS happens when visible content moves after it was already painted, shifting what the user was looking at. The cause is almost always content that loads without reserved space.
CLS happens when visible content moves after it was already painted, shifting what the user was looking at. The cause is almost always content that loads without reserved space.
top, height) instead of transform.width/height (or aspect-ratio) so space is reserved before load:<img src="/photo.jpg" width="1200" height="800" alt="..."> <!-- reserves the box -->
.hero { aspect-ratio: 16 / 9; } /* reserves ratio for responsive media */
font-display: optional or swap plus size-adjust/preload to minimize the reflow when the web font arrives.position: absolute) or push from the bottom.transform/opacity — they're composited and don't trigger layout.CLS is the most fixable Core Web Vital — it's usually a handful of missing dimensions. Interviewers use it to test whether you understand the render pipeline: reserving space up front means the browser never has to reflow, which is why transform beats animating top.
A library of IT interview questions with detailed answers — from Junior to Senior.
Donate