Cumulative Layout Shift (CLS) — fixing layout jumps

Page content jumps around while loading — images push text down, fonts swap causing size changes, dynamic content inserts above the viewport. Google Core Web Vitals CLS score is bad.

(1) Always set width and height (or aspect-ratio) on images and videos — the browser reserves space before loading. (2) Use font-display: swap with size-adjust to minimize font swap layout shifts. (3) Reserve space for dynamic content: use min-height on containers that will receive async content. (4) Never insert content above existing content unless triggered by user interaction. (5) Use CSS contain: layout on independent sections. (6) Skeleton screens: show placeholder shapes matching final layout. (7) Use @supports for progressive enhancement instead of JS-based feature detection that shifts layout.

CLS measures unexpected visual movement. Any element that changes size or position after initial render contributes to CLS. The browser calculates this based on the distance and size of shifted elements.