PH Ranking - Online Knowledge Base - 2025-09-04

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.

Internet images

Ang PH Ranking ay nag-aalok ng pinakamataas na kalidad ng mga serbisyo sa website traffic sa Pilipinas. Nagbibigay kami ng iba’t ibang uri ng serbisyo sa trapiko para sa aming mga kliyente, kabilang ang website traffic, desktop traffic, mobile traffic, Google traffic, search traffic, eCommerce traffic, YouTube traffic, at TikTok traffic. Ang aming website ay may 100% kasiyahan ng customer, kaya maaari kang bumili ng malaking dami ng SEO traffic online nang may kumpiyansa. Sa halagang 720 PHP bawat buwan, maaari mong agad pataasin ang trapiko sa website, pagandahin ang SEO performance, at pataasin ang iyong mga benta!

Nahihirapan bang pumili ng traffic package? Makipag-ugnayan sa amin, at tutulungan ka ng aming staff.

Libreng Konsultasyon

Free consultation Customer support

Need help choosing a plan? Please fill out the form on the right and we will get back to you!

Fill the
form