A key page in your app shows a large cumulative layout shift (CLS) when resources load, causing poor user experience and lower Core Web Vitals. How would you diagnose the root causes and what concrete fixes would you apply to reduce CLS in a modern frontend stack?

First I’d measure with Lighthouse, WebPageTest, and Chrome DevTools’ Performance panel to see exact layout-shift regions and timestamps. Common culprits I’ve seen: images/iframes without width/height, late-loading web fonts causing reflow, and async content injected above existing content. Concrete fixes: add intrinsic size (width/height or aspect-ratio) to images and media, reserve space with CSS placeholders or skeletons, preload critical fonts and use font-display: optional or swap to avoid FOIT, and avoid inserting nodes above content — append below or use CSS position placeholders. On React/Next.js I’d SSR critical content and preload LCP assets; lazy-load non-critical blocks. In a recent project these steps cut CLS by ~80% and improved LCP by ~200ms across desktop and mobile, measured across 10,000 sessions.