How do you avoid Cumulative Layout Shift?
Answer
Give images, embeds, and ad slots reserved dimensions; avoid late content above the fold; and use transforms for motion. A layout should not move because an asset or font finished loading.
Context
Web performance is measured at the user level. Protect the critical rendering path, reduce main-thread work, and validate improvements against field data rather than bundle size alone.
Example
html
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high" />
<img src="/hero.webp" width="1200" height="675" alt="Product dashboard" />Preloading the verified LCP image and reserving its dimensions can improve loading and prevent layout shift.
Practical considerations
- Choose the approach from the requirement and constraints, not from habit.
- Include validation, error handling, and cleanup where the boundary requires them.
- Verify the observable result with focused tests or measurement.
Follow-up prompts
- What failure mode would you expect if this were implemented incorrectly?
- How would you test this behaviour?
- What changes when the feature must scale to a larger application or team?
In practice
For this easy-level topic, make assumptions explicit, choose the smallest safe implementation, and verify the behavior at the relevant boundary.