⚡چرا بعضی سایت‌ها بعد از باز شدن، تازه شروع به «پریدن» می‌کنن؟

صفحه باز شده، کاربر آماده کلیک کردنه...

یه دفعه:

تصویر لود میشه ← محتوا پایین میره
فونت لود میشه ← متن جابه‌جا میشه
تبلیغ میاد ← کل صفحه تکون می‌خوره 😐

این مشکل فقط ظاهر سایت رو خراب نمی‌کنه؛ روی Cumulative Layout Shift (CLS) هم تأثیر می‌ذاره.

یکی از راه‌حل‌های ساده برای تصاویر اینه که فضای موردنیاز تصویر از قبل مشخص باشه:

<img
  src="product.webp"
  width="800"
  height="600"
  alt="Product"
>

مرورگر قبل از اینکه تصویر دانلود بشه، می‌فهمه چه فضایی باید برای اون کنار بذاره.

در نتیجه وقتی تصویر رسید، Layout مجبور نیست ناگهان تغییر کنه.

برای ویدیو، iframe، تبلیغات و محتوای Dynamic هم باید همین ذهنیت رو داشته باشی:

فضای المان رو تا جای ممکن از قبل مشخص کن.

موضوع Performance فقط این نیست که صفحه سریع باز بشه.

صفحه باید پایدار هم باشه.


@CodeVerse_dev