What should be done at the design stage to prevent CLS issues?

Short answer: The cheapest fix for CLS happens at the design stage: when every dynamic element gets reserved space up front, layout shift is prevented on the drawing board instead of in production. Google's published threshold for CLS is 0.1.

Design-stage checklist

• Design image and video slots with fixed aspect ratios; implement them with width and height attributes or aspect-ratio in CSS.
• Reserve fixed-height containers for ads, banners, and embeds; space that opens up on arrival is the main source of shift.
• Decide the font strategy: font-display plus a metrically matched fallback font prevents text jumps.
• Position late-arriving components (cookie bar, promo strip) as overlays so they never push content.
• Draw skeleton states at exactly the size of the real content.

Validation is two-layered: a component-library rule that no element ships without a known size, then monitoring the 75th percentile CLS with Lighthouse and CrUX field data. A rule that enters the design system once protects every future page automatically.