فونت فارسی و CLS: جلوگیری از پرش دکمه و متن در سایت‌های RTL

CLS (Cumulative Layout Shift) همان پرش آزاردهنده دکمه‌ها و متن است. این مقاله عمداً روی فونت فارسی و چیدمان RTL تمرکز دارد؛ اگر مشکل شما «دیر دیده شدن هیرو و کم شدن تماس» است، اول مقاله LCP و نرخ تماس را بخوانید تا موضوعات قاطی نشوند.

چرا فونت فارسی CLS می‌سازد؟

فال‌بک لاتین یا تاهوما عرض متفاوتی از فونت‌های فارسی رایج دارد. وقتی فونت اصلی لود می‌شود، خطوط و دکمه‌ها جابه‌جا می‌شوند — به‌خصوص در هدر و CTA تماس. علاوه بر فونت، تصاویر بدون ابعاد هم CLS می‌سازند؛ اما ریشهٔ مخصوص سایت‌های فارسی اغلب تایپوگرافی است.

کارهایی که واقعاً CLS فونت را کم می‌کنند

• ●فونت را preload کنید و وزن‌های غیرضروری را حذف کنید.
• ●از font-display: swap با اندازهٔ نزدیک فال‌بک استفاده کنید؛ یا در هیرو از فونت سیستمی پایدار بهره ببرید.
• ●برای img و ویدیو همیشه width/height یا نسبت ابعاد CSS بگذارید.
• ●هدر و دکمه CTA را با min-height ثابت طراحی کنید تا تعویض فونت، هدف لمس را جابه‌جا نکند.
• ●بنر تبلیغاتی و iframe را در ظرف با ارتفاع ثابت قرار دهید.

1. 1

   اندازه‌گیری میدانی

   CLS را از CrUX یا Search Console روی موبایل ببینید؛ Lighthouse alone کافی نیست.

2. 2

   ثابت‌سازی UI حساس

   هدر، قیمت، و دکمه tel: را با ارتفاع رزرو شده بازطراحی کنید.

3. 3

   کاهش وزن فونت

   فقط وزن‌های استفاده‌شده را لود کنید؛ زیرمجموعهٔ گلیف اگر ممکن است.

نکته RTL که در مستندهای انگلیسی کم است

در چیدمان راست‌به‌چپ، آیکون‌های فلش و پدینگ نامتقارن بعد از لود فونت بیشتر به چشم می‌آید. کامپوننت‌های مشترک را یک‌بار در دیزاین‌سیستم قفل کنید تا هر صفحه دوباره CLS نسازد. این جزئیات باید از مرحله طراحی در بسته‌های طراحی سایت لحاظ شود، نه بعد از انتشار.