Frontend Developer
hardprevent-layout-shift-cls
How do you prevent layout shifts (CLS) on a page?
Answer
CLS happens when elements move unexpectedly.
**Fixes:**
- Always set image/video dimensions
- Reserve space for ads/embeds
- Avoid injecting content above existing content
- Use `font-display: swap` carefully and consider font metrics overrides
- Animate with transforms, not layout properties
**Interview tip:** mention measuring CLS with Lighthouse and real-user monitoring.
Related Topics
PerformanceCSSWeb Vitals