What is cumulative layout shift and how do you debug it?

Debugging CLS requires identifying what elements shift and why. Tools: Chrome DevTools Performance tab → "Layout Shifts" track shows individual shifts with the timestamp and score. The Rendering panel → "Layout Shift Regions" highlights shifting elements in green/blue. PageSpeed Insights shows which elements shifted in real user data. Common CLS causes and fixes: Images without dimensions: add width and height, or use CSS aspect-ratio: 16/9 on the container. Ads and embeds: reserve space with a container of fixed height. Web fonts: use font-display: optional or size-adjust CSS to make fallback font match web font metrics. Dynamically injected content: never inject content above existing content; use skeleton screens or fixed-height placeholders. Animations: transitions should use transform (no layout shift) not top/left/width/height. Cookie banners: position fixed at bottom (doesn't shift content) rather than sticky at top. The LayoutShiftAttribution API identifies which elements caused the shift: entry.sources.forEach(source => console.log(source.node)).