Using Placeholders and Reserved Spaces for Dynamic Content to Improve CLS

To improve Cumulative Layout Shift (CLS) using placeholders and reserved spaces for dynamic content, the key is to reserve the exact or approximate space that the content will occupy before it loads. This prevents unexpected layout shifts when the content appears.

Here are the main strategies:

• Set explicit width and height for images, videos, and iframes so the browser can allocate space during loading, avoiding jumps.

• For dynamic or late-loading content like ads or banners, reserve space using CSS properties such as min-height or aspect-ratio to maintain layout stability even if the content size varies.

• When the exact size is unknown or variable, use the smallest expected size as the initial reserved space and allow the container to grow if needed, reducing the impact of shifts.

• Use placeholders or skeleton loaders in the reserved space to visually indicate loading content, which also prevents collapsing the reserved space if no content is returned (e.g., no ad).

• Avoid injecting new content above existing content without reserving space, as this causes layout shifts.

• For fonts, use font-display: swap to prevent layout shifts caused by font loading.

By proactively reserving space and using placeholders, you ensure that the page layout remains stable during loading and dynamic content injection, significantly reducing CLS and improving user experience.