رفع پرش چیدمان CLS در سایت فارسی؛ از فونت تا تصویر

چرا CLS سایت فارسی شما بالای ۰.۱ است و گوگل به آن امتیاز منفی می‌دهد

صفحه محصول را باز می‌کنید، متن هنوز لود نشده و ناگهان همه چیز چند پیکسل جابه‌جا می‌شود. دکمه «افزودن به سبد» را که نشانه گرفته بودید، حالا جای دیگری است. این همان لحظه‌ای است که کاربر واقعی تجربه می‌کند و گوگل آن را با معیار CLS (Cumulative Layout Shift) اندازه می‌گیرد. آستانه قبولی گوگل برای CLS عدد ۰.۱ است. بالاتر از این یعنی صفحه شما در گزارش Core Web Vitals رد می‌شود و رتبه‌تان در نتایج جستجو پایین می‌آید.

در سایت‌های فارسی، سه منبع پرش چیدمان از همه رایج‌ترند. فونت فارسی که دیر لود می‌شود، تبلیغی که بعد از محتوا می‌آید و تصویری که ابعادش مشخص نیست. هر کدام راه‌حل جداگانه‌ای دارد. این‌جا اشتباه می‌کنند:大部分人 فکر می‌کنند مشکل از هاست است و سراغ افزایش سرعت می‌روند. در حالی که CLS ربطی به سرعت لود ندارد. یک صفحه می‌تواند در ۰.۵ ثانیه لود شود اما CLS آن ۰.۴ باشد. مشکل از ترتیب رندر است، نه سرعت.

فونت فارسی؛ قاتل خاموش چیدمان

فونت‌های فارسی مثل Vazirmatn و IRANSans حجم بالایی دارند. یک فایل وزیرمتن با وزن‌های مختلف گاهی به ۲۰۰ کیلوبایت می‌رسد. مرورگر تا وقتی فونت لود نشود، متن را با فونت پیش‌فرض سیستم نمایش می‌دهد. تفاوت ارتفاع و عرض حروف فارسی با فونت پیش‌فرض، گاهی تا ۱۵ پیکسل جابه‌جایی عمودی ایجاد می‌کند. این عدد برای CLS فاجعه است.

راه‌حل: استفاده از font-display: swap به همراه اندازه‌گیری دقیق

اولین قدم استفاده از font-display: swap در تعریف فونت است. این کار باعث می‌شود مرورگر ابتدا با فونت پیش‌فرض متن را نشان دهد و بعد فونت اصلی را جایگزین کند. اما این تنها نیمی از راه است. مشکل اینجاست که swap به تنهایی پرش را حذف نمی‌کند، فقط آن را به تأخیر می‌اندازد.

راه‌حل واقعی استفاده از size-adjust و ascent-override در قانون @font-face است. این ویژگی‌ها به مرورگر می‌گویند فونت جایگزین چقدر فضا اشغال کند تا با فونت اصلی تفاوت نداشته باشد. مثال عملی:

@font-face {
  font-family: 'Vazirmatn';
  src: url('/fonts/vazirmatn.woff2') format('woff2');
  font-display: swap;
  size-adjust: 98%;
  ascent-override: 90%;
  descent-override: 25%;
}

اعداد دقیق را باید با ابزار اندازه‌گیری پیدا کنید. کروم DevTools در تب Performance یک گزینه به نام «Layout Shift Regions» دارد که نواحی پرش را با رنگ قرمز نشان می‌دهد. این‌جا اشتباه می‌کنند: خیلی‌ها فقط font-display: swap را اضافه می‌کنند و فکر می‌کنند کار تمام است. نتیجه این می‌شود که CLS در گزارش آزمایشگاهی پایین می‌آید اما در داده‌های واقعی کاربران (CrUX) همچنان بالاست. چون کاربر واقعی فونت را از کش ندارد و پرش اتفاق می‌افتد.

راه دوم، که من در پروژه‌های حساس انتخاب می‌کنم، استفاده از font-display: optional است. این مقدار به مرورگر می‌گوید اگر فونت در ۱۰۰ میلی‌ثانیه اول لود نشد، اصلاً از آن استفاده نکن و با فونت پیش‌فرض بمان. پرش چیدمان به صفر می‌رسد اما ظاهر سایت با فونت پیش‌فرض سیستم نمایش داده می‌شود. برای سایت‌های خبری که سرعت حرف اول را می‌زند، این انتخاب درست است. برای سایت‌های برندمحور که هویت بصری مهم است، swap با size-adjust درست‌تر است. هر دو را تست کنید و با داده تصمیم بگیرید.

تبلیغات؛ منبع پرشی که از دست شما خارج است

تبلیغات گوگل ادسنس یا شبکه‌های تبلیغاتی ایرانی، بدترین دشمن CLS هستند. اسکریپت تبلیغ بعد از محتوای اصلی لود می‌شود و ابعاد بنر را ناگهان مشخص می‌کند. نتیجه؟ محتوای زیر تبلیغ چند پیکسل پایین می‌پرد. این پرش برای هر بازدید تکرار می‌شود و گوگل آن را در گزارش CrUX ثبت می‌کند.

راه‌حل: رزرو فضا با CSS

قبل از لود شدن اسکریپت تبلیغ، یک ظرف با ابعاد مشخص در HTML قرار دهید. اگر تبلیغ در آن ظرف لود نشد، یک پیام جایگزین یا فضای خالی نشان دهید. مثال:

<div class="ad-slot" style="width: 728px; height: 90px;">
  <!-- اسکریپت تبلیغ اینجا قرار می‌گیرد -->
</div>

مشکل اینجاست که ابعاد تبلیغ همیشه ثابت نیست. گوگل ادسنس تبلیغات ریسپانسیو ارائه می‌دهد که ابعادشان بر اساس عرض صفحه تغییر می‌کند. برای این حالت، از min-height استفاده کنید و یک محدوده مشخص بدهید:

.ad-slot {
  min-height: 90px;
  max-height: 250px;
}

این‌جا اشتباه می‌کنند: تبلیغ را در انتهای مقاله قرار می‌دهند تا «مزاحم خواننده نشود». اما از نظر CLS، انتهای صفحه بدترین مکان است. چون کاربر در حال اسکرول است و پرش ناگهانی باعث می‌شود لینکی را که نشانه گرفته از دست بدهد. تبلیغ را در میانه محتوا با فضای رزرو شده قرار دهید. بله، ممکن است نرخ کلیک پایین بیاید. اما رتبه سئو بالا می‌رود و ترافیک ارگانیک بیشتر می‌شود. این معامله‌ای است که من همیشه انجام می‌دهم.

تصاویر بدون ابعاد؛ خطایی که هنوز تکرار می‌شود

تگ <img> بدون ویژگی width و height یعنی مرورگر نمی‌داند تصویر چقدر فضا بگیرد. تا وقتی تصویر لود نشود، ارتفاع آن صفر است. بعد از لود، ناگهان فضا باز می‌شود و محتوا پایین می‌پرد. این ساده‌ترین منبع پرش است و راحت‌ترین راه‌حل را دارد.

راه‌حل: ویژگی‌های width و height به همراه aspect-ratio

در HTML مدرن، کافی است ابعاد را در تگ مشخص کنید و CSS کار بقیه را انجام می‌دهد:

<img src="product.jpg" width="800" height="600" alt="محصول">

img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
}

مرورگر با استفاده از aspect-ratio نسبت ابعاد را می‌فهمد و قبل از لود تصویر، فضای لازم را رزرو می‌کند. این تکنیک در تمام مرورگرهای مدرن از سال ۲۰۲۱ پشتیبانی می‌شود. برای تصاویر پس‌زمینه CSS هم از aspect-ratio روی ظرف والد استفاده کنید.

یک نکته مهم: اگر تصویر شما با CSS کش می‌شود و ابعاد نمایش با ابعاد واقعی تفاوت دارد، حتماً aspect-ratio را با نسبت نمایش تنظیم کنید، نه نسبت فایل. این‌جا اشتباه می‌کنند: نسبت فایل را می‌گذارند، مرورگر فضا را اشتباه رزرو می‌کند و پرش بدتر می‌شود. نسبت نمایش را از ابزار اندازه‌گیری بگیرید، نه از properties فایل.

اندازه‌گیری CLS؛ قبل از هر تغییری

قبل از اینکه هر راه‌حلی را اجرا کنید، باید عدد فعلی را بدانید. سه ابزار برای این کار دارید:

• PageSpeed Insights — گزارش آزمایشگاهی و داده‌های CrUX را کنار هم نشان می‌دهد. عدد آزمایشگاهی بالا و CrUX پایین یعنی مشکل در شرایط واقعی رخ می‌دهد.
• Chrome DevTools — تب Performance و گزینه Layout Shift Regions. دقیق‌ترین روش برای دیدن محل پرش.
• web-vitals کتابخانه جاوااسکریپت — برای اندازه‌گیری در محیط واقعی و ارسال داده به Analytics.

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

اگر با زیرساخت سرور مشکل دارید و نمی‌دانید پرش از کجا نشات می‌گیرد، بررسی فنی دامنه و DNS را انجام دهید. گاهی مشکل از هدر‌های کش یا ترتیب لود منابع است که در سطح سرور قابل حل است. برای تغییرات ساختاری در سایت، طراحی سایت سرورنت می‌تواند گزینه مناسبی باشد، اما اول مشکل فنی را با ابزارهای رایگان پیدا کنید.

راهنمای جامع‌تری هم در راهنمای کامل افزایش سرعت سایت داریم که به معیارهای دیگر Core Web Vitals مثل LCP و INP هم پرداخته است. CLS تنها یکی از سه معیار است و اگر دو معیار دیگر را نادیده بگیرید، رتبه شما همچنان پایین می‌ماند.

ترتیب اجرا؛ از کجا شروع کنیم

اگر سایت شما CLS بالای ۰.۱ دارد، این ترتیب را دنبال کنید:

1. تصاویر را بررسی کنید. ویژگی‌های width و height را به همه تگ‌های img اضافه کنید. این سریع‌ترین برد است.
2. فونت را با size-adjust تنظیم کنید. این زمان‌برترین بخش است اما بیشترین تأثیر را روی سایت‌های فارسی دارد.
3. تبلیغات را با فضای رزرو شده جایگزین کنید. اگر تبلیغ‌دهنده اجازه نمی‌دهد، حداقل min-height تعیین کنید.
4. دوباره با PageSpeed Insights اندازه بگیرید و عدد را ثبت کنید.

بین هر مرحله، تغییر را در محیط staging تست کنید. یک تغییر اشتباه در فونت می‌تواند خوانایی را از بین ببرد و نرخ پرش را بالا ببرد. این معامله‌ای است که ارزشش را ندارد.

اگر تیم فنی ندارید و این کارها برایتان سنگین است، خدمات سئو می‌تواند این بخش را برای شما مدیریت کند. اما پیشنهاد من این است که حداقل اندازه‌گیری را خودتان یاد بگیرید. عدد CLS را ماهی یک بار چک کنید. اگر بالا رفت، سریع دنبال منبع بگردید. این کار ۱۰ دقیقه وقت می‌گیرد و از ضررهای بزرگ جلوگیری می‌کند.

پرسش‌های پرتکرار

CLS چیست و چرا برای سئو مهم است؟

CLS مخفف Cumulative Layout Shift است و میزان جابه‌جایی ناگهانی عناصر صفحه را در طول لود اندازه می‌گیرد. گوگل این معیار را بخشی از Core Web Vitals قرار داده و مقدار بالای ۰.۱ باعث افت رتبه در نتایج جستجو می‌شود.

چطور CLS سایت خودم را اندازه بگیرم؟

ساده‌ترین راه استفاده از PageSpeed Insights است. آدرس سایت را وارد کنید و گزارش را ببینید. برای داده‌های واقعی کاربران، به بخش CrUX در همان گزارش مراجعه کنید. اگر عدد آزمایشگاهی و واقعی متفاوت بود، مشکل از شرایط خاص کاربران است.

آیا فونت فارسی باعث پرش چیدمان می‌شود؟

بله، فونت‌های فارسی حجم بالایی دارند و دیر لود می‌شوند. تفاوت ارتفاع حروف با فونت پیش‌فرض سیستم، پرش عمودی ایجاد می‌کند. استفاده از font-display: swap به همراه size-adjust این مشکل را حل می‌کند.

تبلیغات گوگل ادسنس چقدر روی CLS تأثیر می‌گذارند؟

خیلی زیاد. اسکریپت تبلیغ بعد از محتوا لود می‌شود و ابعاد بنر ناگهان مشخص می‌شود. برای حل این مشکل، قبل از لود اسکریپت، فضای خالی با ابعاد مشخص رزرو کنید. اگر تبلیغ لود نشد، آن فضا خالی می‌ماند اما پرش اتفاق نمی‌افتد.