Cumulative Layout Shift (CLS) چیست؟ — راهنمای جامع، فنی و عملی رفع جابجایی چیدمان

آخرین بروزرسانی در تاریخ آگوست 3, 2026 توسط PersiaWebAdmin

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

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

فهرست مطالب

1. CLS دقیقاً چیست و چرا دشمن شماره یک تجربه کاربری است؟
2. فرمول ریاضی CLS و مفهوم Session Window
3. آستانه‌های گوگل: چه نمره‌ای خوب، متوسط و فاجعه است؟
4. مهم‌ترین عوامل ایجاد CLS (با بررسی بصری هر سناریو)
5. تشخیص و اندازه‌گیری CLS با ابزارهای رایگان و تخصصی
6. راه‌حل‌های قطعی رفع CLS (کدنویسی عملی و مثال‌های آماده)
   • ۶.۱. تصاویر بدون ابعاد مشخص
   • ۶.۲. تبلیغات و بنرهای داینامیک
   • ۶.۳. محتوای جاسازی‌شده (iframe و embed)
   • ۶.۴. تزریق محتوای پویا با جاوااسکریپت
   • ۶.۵. فونت‌های وب و جابه‌جایی متن (FOUT/FOIT)
   • ۶.۶. انیمیشن‌ها و تغییرات CSS ناگهانی
   • ۶.۷. بارگذاری غیرهمگام CSS و پدیده FOUC
7. راهکارهای پیشرفته برای توسعه‌دهندگان
   • ۷.۱. پایش واقعی کاربران با RUM
   • ۷.۲. حذف کامل جابه‌جایی فونت با size-adjust
   • ۷.۳. افزایش سرعت رندر و کاهش جابه‌جایی با content-visibility
8. رفع CLS در وردپرس: تشخیص، افزونه‌ها و ترفندهای اختصاصی
9. پایش مداوم CLS با گوگل سرچ کنسول و ابزارهای رایگان
10. چک‌لیست طلایی و جمع‌بندی

۱. CLS دقیقاً چیست و چرا دشمن شماره یک تجربه کاربری است؟

Cumulative Layout Shift (تغییر انباشته چیدمان) یک معیار حیاتی در سنجش پایداری بصری صفحه است. این شاخص مشخص می‌کند که در حین بارگذاری صفحه و تعامل کاربر، عناصر قابل مشاهده چقدر «می‌پرند» و موقعیت خود را تغییر می‌دهند. به‌عبارت دیگر، CLS معیاری از بی‌ثباتی دیداری است.

اما چرا CLS اینقدر مهم است؟

• تجربه کاربری (UX): کاربری که نتواند روی دکمه درست کلیک کند یا ناگهان جای متن را گم کند، در کمتر از چند ثانیه اعتمادش را از دست می‌دهد. نتیجه؟ افزایش شدید احتمال ترک صفحه (Bounce Rate) و کاهش بازگشت کاربر.
• نرخ تبدیل (Conversion): مطالعات نشان می‌دهند که حتی یک جابه‌جایی کوچک در لحظه کلیک روی دکمه پرداخت، می‌تواند نرخ تبدیل را تا ۱۵٪ کاهش دهد. یعنی از دست دادن فروش‌های قطعی فقط به خاطر یک تکان!
• سئو و رتبه‌بندی: از ژوئن ۲۰۲۱، گوگل Core Web Vitals را به‌عنوان یک سیگنال رسمی رتبه‌بندی معرفی کرده است. CLS یکی از سه رکن این مجموعه است. اگر نمره CLS شما ضعیف باشد، حتی با محتوای عالی ممکن است صفحاتتان در نتایج جستجو سقوط کنند.

گوگل CLS را در کنار LCP (بزرگترین رنگ‌آمیزی محتوا) و INP (تأخیر در تعامل) قرار داده تا یک تصویر کامل از سرعت بارگذاری، پاسخ‌گویی و پایداری بصری ارائه دهد. اگر LCP و INP خوب باشند ولی CLS بالا باشد، تجربه کاربری همچنان آسیب‌پذیر است.

۲. فرمول ریاضی CLS و مفهوم Session Window

برخلاف تصور عمومی، CLS یک عدد ساده نیست که در یک لحظه محاسبه شود. بلکه مجموع نمرات جابه‌جایی‌های جداگانه است که در یک بازه زمانی به نام Session Window رخ می‌دهند. هر جابه‌جایی با این فرمول امتیازدهی می‌شود:

layout shift score = impact fraction × distance fraction

• impact fraction (کسر تأثیر): درصدی از مساحت قابل مشاهده (viewport) که تحت تأثیر جابه‌جایی قرار می‌گیرد. مثلاً اگر نیمی از صفحه ناگهان به پایین رانده شود، impact fraction برابر ۰.۵ خواهد بود.
• distance fraction (کسر فاصله): نسبت بیشترین مسافت جابه‌جایی یک عنصر نسبت به ارتفاع یا عرض viewport. اگر یک تصویر ۲۰۰ پیکسل در یک صفحه با ارتفاع ۱۰۰۰ پیکسل جابه‌جا شود، distance fraction برابر ۰.۲ است.

مثال واقعی: فرض کنید یک بنر تبلیغاتی با ارتفاع ۲۵۰px ناگهان در بالای صفحه ظاهر شود و تمام محتوای زیر آن را ۲۵۰px به پایین هُل دهد. اگر viewport کاربر ۱۰۰۰px ارتفاع داشته باشد، impact fraction حدود ۱ (چون کل محتوای دیداری تکان خورده) و distance fraction برابر ۰.۲۵ خواهد بود. نمره این جابه‌جایی = ۱ × ۰.۲۵ = ۰.۲۵ (که دقیقاً در مرز وضعیت Poor قرار دارد).

نکته مهم: CLS نهایی جمع تمام نمرات جابه‌جایی‌هایی است که در یک پنجره ۵ ثانیه‌ای با حداکثر فاصله ۱ ثانیه بین آن‌ها رخ می‌دهد. اگر کاربر صفحه را اسکرول کند یا یک جابه‌جایی ناشی از تعامل عمدی (مثلاً کلیک روی منو) باشد، در محاسبه CLS لحاظ نمی‌شود. این تعریف باعث می‌شود CLS دقیقاً همان بی‌ثباتی‌های غیرمنتظره و آزاردهنده را هدف قرار دهد.

پیشنهاد مطالعه : FCP چیست؟ راهنمای جامع کاهش First Contentful Paint

۳. آستانه‌های گوگل: چه نمره‌ای خوب، متوسط و فاجعه است؟

گوگل برای CLS سه سطح مشخص کرده است که مستقیماً بر ارزیابی Core Web Vitals تأثیر می‌گذارند:

وضعیت	نمره CLS	تفسیر
خوب (Good)	کمتر از ۰.۱	صفحه پایدار است و جابه‌جایی محسوسی ندارد.
نیاز به بهبود (Needs Improvement)	بین ۰.۱ تا ۰.۲۵	برخی جابه‌جایی‌های آزاردهنده وجود دارد و باید بهینه‌سازی شود.
ضعیف (Poor)	بیشتر از ۰.۲۵	جابه‌جایی‌ها شدید است؛ تجربه کاربری ضعیف و یک پرچم قرمز برای گوگل.

هدف شما باید رسیدن به نمره کمتر از ۰.۱ برای تمام صفحات، به‌ویژه صفحات اصلی، فرود و محصولات باشد. حتی یک صفحه با نمره Poor می‌تواند باعث شود گوگل کل سایت را زیر نظر بگیرد. اگر با داده‌های واقعی کاربران (Field Data) سنجیده می‌شود، میانگین ۲۸ روزه CLS باید در محدوده سبز باشد.

---

۴. مهم‌ترین عوامل ایجاد CLS (با بررسی بصری هر سناریو)

برای درمان، اول باید مقصرها را بشناسیم. رایج‌ترین دلایل CLS که بارها در سایت‌های فارسی و بین‌المللی دیده‌ایم، به‌ترتیب تأثیرگذاری عبارت‌اند از:

1. تصاویر بدون عرض و ارتفاع (width/height): مرورگر فضایی برای تصویر رزرو نمی‌کند. ابتدا ارتفاع صفر است و بعد از بارگذاری، ناگهان ۲۰۰ یا ۳۰۰ پیکسل فضا اشغال می‌کند و محتوا را پایین می‌راند.
2. تبلیغات و بنرهای پویا: کدهای تبلیغاتی معمولاً اندازه نهایی را دیر مشخص می‌کنند. یک جایگاه تبلیغاتی ۲۵۰px می‌تواند در لحظه آخر یک بنر ۳۰۰px بارگذاری کند و فاجعه ایجاد کند.
3. iframeها و محتوای جاسازی‌شده (ویدیو، نقشه): یک ویدیوی یوتیوب که بدون تعیین ارتفاع قبلی بارگذاری می‌شود، در ابتدا یک جعبه کوچک است و ناگهان به نسبت ۱۶:۹ بزرگ می‌شود.
4. تزریق محتوای پویا با جاوااسکریپت: فرم‌های ثبت‌نام، پیام‌های خبرنامه، چت‌بات‌ها یا هر عنصری که پس از لود اولیه با JS به صفحه اضافه می‌شود، اگر فضای خود را از قبل رزرو نکرده باشد، محتوا را جا‌به‌جا می‌کند.
5. فونت‌های وب سفارشی (FOUT/FOIT): تا زمان دانلود فونت اصلی، مرورگر از فونت سیستم استفاده می‌کند. بعد از جایگزینی، اختلاف اندازه حروف و ارتفاع خط باعث جابه‌جایی کل پاراگراف می‌شود.
6. بارگذاری غیرهمگام CSS (FOUC): اگر استایل‌های اصلی با تأخیر اعمال شوند، کاربر برای چند لحظه صفحه‌ای بی‌شکل می‌بیند که ناگهان استایل می‌گیرد؛ این تغییر چینش، CLS تولید می‌کند.
7. انیمیشن‌ها و تغییرات CSS ناگهانی: تغییر height، margin، padding یا top در انیمیشن‌ها، سایر عناصر را جابه‌جا می‌کند. (برعکس transform که هندسه صفحه را تغییر نمی‌دهد.)

در ادامه، برای تک‌تک این موارد راه‌حل‌های عملی و خط‌کدهای قابل استفاده ارائه می‌دهیم.

---

۵. تشخیص و اندازه‌گیری CLS با ابزارهای رایگان و تخصصی

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

۵.۱. PageSpeed Insights (PSI)

ابزار رسمی گوگل. آدرس صفحه را وارد کنید، سپس در بخش «Core Web Vitals Assessment» نمره CLS را برای موبایل و دسکتاپ می‌بینید. مهم‌تر از همه، در بخش «Diagnostics» پیشنهادهایی مثل «Image elements do not have explicit width and height» به شما می‌دهد که مستقیم به منبع جابه‌جایی اشاره می‌کنند.

۵.۲. Chrome DevTools (Lighthouse و Performance Panel)

در مرورگر کروم، کلید F12 را بزنید. به زبانه Lighthouse بروید و یک گزارش Performance بگیرید. همچنین می‌توانید از زبانه Performance برای ضبط بارگذاری صفحه استفاده کنید و سپس در بخش Experience تک‌تک جابه‌جایی‌ها را با جزئیات ببینید (حتی مشخص می‌کند کدام عنصر بیشترین impact را داشته).

۵.۳. Web Vitals Extension

افزونه رسمی گوگل برای کروم که نمره CLS هر صفحه را به‌صورت زنده و لحظه‌ای در نوار ابزار نمایش می‌دهد. هنگام مرور سایت خودتان می‌توانید ببینید کدام تعامل منجر به جابه‌جایی می‌شود.

۵.۴. Google Search Console (Core Web Vitals)

گزارش Core Web Vitals در سرچ کنسول بر اساس داده‌های واقعی کاربران (CrUX) تهیه می‌شود. صفحات با وضعیت Poor را دقیقاً به شما نشان می‌دهد. این مهم‌ترین معیار برای گوگل است؛ نه صرفاً آزمایش‌های مصنوعی.

۵.۵. CrUX Dashboard و ابزارهای مکمل

داشبورد رایگان گوگل (CrUX Dashboard) داده‌های میدانی را در مقیاس بزرگ و با جزئیات ماهانه نشان می‌دهد. همچنین ابزارهایی مثل GTmetrix، DebugBear و SpeedVitals می‌توانند تاریخچه CLS را برای پایش مستمر ثبت کنند.

توصیه طلایی: همیشه نتایج آزمایش‌های مصنوعی (Lighthouse) را با داده‌های واقعی کاربران (Search Console) مقایسه کنید. گاهی CLS فقط روی شبکه‌های کُند یا مرورگرهای خاص رخ می‌دهد و Lighthouse آن را نشان نمی‌دهد.

پیشنهاد مطالعه : تأثیر سرعت سایت بر سئو و درآمد

---

۶. راه‌حل‌های قطعی رفع CLS (کدنویسی عملی و مثال‌های آماده)

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

۶.۱. تصاویر بدون ابعاد مشخص — رزرو فضا قبل از لود

در PageSpeed Insights پیام «Image elements do not have explicit width and height» نشان‌دهنده همین مشکل است.

روش استاندارد: تعیین width و height در HTML

<!-- نادرست -->
<img src="example.jpg" alt="">

<!-- صحیح -->
<img src="example.jpg" width="800" height="600" alt="توضیح تصویر">

همراه با این CSS که معمولاً در پوسته وجود دارد:

img {
  max-width: 100%;
  height: auto;
}

مرورگر نسبت ابعاد (aspect ratio) را از width و height واقعی محاسبه می‌کند و فضای عمودی مناسب را رزرو می‌کند. حتی اگر تصویر واکنش‌گرا باشد، دیگر جابه‌جایی رخ نمی‌دهد.

روش پیشرفته: استفاده از aspect-ratio در CSS

اگر ابعاد دقیق تصاویر را نمی‌دانید (مثلاً تصاویر آپلودی کاربران)، ویژگی aspect-ratio ناجی شماست:

.gallery img {
  width: 100%;
  aspect-ratio: 4 / 3; /* متناسب با طرح */
  object-fit: cover;
}

برای تصاویر واکنش‌گرا و محصولات وردپرسی، این روش بسیار کارآمد است. همچنین هرگز تصاویر Lazy Loaded را بدون ابعاد مشخص رها نکنید؛ ورود ناگهانی آن‌ها به viewport شدیدترین CLS را ایجاد می‌کند.

۶.۲. تبلیغات و بنرهای داینامیک — ایجاد فضای امن از قبل

تبلیغات بدنام‌ترین عامل CLS هستند. راه‌حل اساسی: یک کانتینر با حداقل ارتفاع (min-height) یا ارتفاع ثابت مشخص کنید، و قبل از بارگذاری تبلیغ، یک placeholder ظریف قرار دهید.

<div class="ad-slot" style="min-height: 250px; background: #f9f9f9;">
  <!-- کد تبلیغ اینجا قرار می‌گیرد -->
</div>

.ad-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aaa;
  font-size: 14px;
}
.ad-slot::before {
  content: "تبلیغات";
}

اگر تبلیغات اندازه‌های مختلفی دارند (مثلاً ۲۵۰×۳۰۰ یا ۳۰۰×۲۵۰)، min-height را روی بیشترین ارتفاع ممکن تنظیم کنید. همچنین می‌توانید با CSS Grid یا Flexbox فضای خالی را به‌صورت پویا مدیریت کنید. در شبکه‌های تبلیغاتی مثل گوگل ادسنس، از data-ad-format="auto" پرهیز کنید یا حتماً ارتفاع را محدود کنید.

پیشنهاد مطالعه : راهنمای عملی بازطراحی مدل عملیاتی سئوی سازمانی برای سال ۲۰۲۶ و پس از آن

۶.۳. محتوای جاسازی‌شده (iframe و embed) — جلوگیری از انبساط ناگهانی

ویدیوهای یوتیوب، نقشه گوگل، پست‌های اینستاگرام و توییتر همگی از iframe استفاده می‌کنند و بدون تعیین ارتفاع، فاجعه به بار می‌آورند. دو راه‌حل مدرن و قدیمی داریم:

تکنیک کلاسیک padding-bottom (برای پشتیبانی حداکثری)

<div class="video-container">
  <iframe src="..." frameborder="0"></iframe>
</div>

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* نسبت 16:9 */
  height: 0;
  overflow: hidden;
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

روش جدید و ساده: aspect-ratio

iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
}

این روش در تمام مرورگرهای مدرن پشتیبانی می‌شود و فضای مورد نیاز را بلافاصله رزرو می‌کند. برای نقشه‌های گوگل نیز می‌توانید نسبت‌های سفارشی (مثلاً ۴/۳) بدهید.

۶.۴. تزریق محتوای پویا با جاوااسکریپت — بازی با visibility به جای display

چت‌بات‌ها، فرم‌های pop-up و بنرهای اطلاع‌رسانی که ناگهان در بالای صفحه ظاهر می‌شوند، همه محتوا را به پایین هل می‌دهند. سه استراتژی کلیدی:

• این عناصر را هرگز بالای محتوای اصلی تزریق نکنید. آن‌ها را در فوتر یا یک overlay (position: fixed) قرار دهید که از جریان عادی خارج باشند.
• اگر حتماً باید در بالای صفحه باشند، یک کانتینر از پیش تعریف‌شده با min-height برایشان در نظر بگیرید و فقط visibility را با JS تغییر دهید، نه display.
• از ResizeObserver یا will-change استفاده کنید تا مرورگر را از تغییرات آتی مطلع سازید (برای موارد بسیار پویا).

.announcement-bar {
  min-height: 60px;
}

همین‌طور اطمینان حاصل کنید که اسکریپت‌های شخص ثالث (مثل ایمیل مارکتینگ) را با defer یا async بارگذاری می‌کنید، اما کانتینر آن‌ها از قبل موجود باشد.

پیشنهاد مطالعه : سرعت وب‌سایت به چه عواملی بستگی دارد؟

۶.۵. فونت‌های وب و جابه‌جایی متن — سه راه‌حل تا صفر شدن CLS

جابه‌جایی متن ناشی از فونت (FOUT) یکی از مرموزترین عوامل CLS است. وقتی فونت سفارشی دیرتر بارگذاری می‌شود، متن ابتدا با فونت سیستم رندر می‌شود و سپس با فونت جدید جایگزین می‌شود. اختلاف در ارتفاع خط، عرض کاراکتر و metricها باعث پرش می‌شود.

راه‌حل ۱: font-display: swap (کاهش مشکل، نه حذف کامل)

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap;
}

این دستور متن را فوراً با فونت پشتیبان نمایش می‌دهد و بعد از آماده شدن فونت اصلی، جایگزین می‌کند. اما همچنان ممکن است جابه‌جایی رخ دهد، هرچند کمتر از حالت FOIT (پنهان شدن متن).

راه‌حل ۲ (پیشنهاد ویژه): Fallback Font با size-adjust

با استفاده از قابلیت‌های @font-face یعنی size-adjust، ascent-override، descent-override، می‌توانید فونت پشتیبان را طوری تنظیم کنید که فضای اشغالی آن دقیقاً با فونت سفارشی یکی شود. آن‌وقت جایگزینی هیچ جابه‌جایی ندارد.

/* تعریف فونت اصلی با swap */
@font-face {
  font-family: 'IranSansWeb';
  src: url('iransans.woff2') format('woff2');
  font-display: swap;
}

/* تعریف فونت پشتیبان بهینه‌شده */
@font-face {
  font-family: 'IranSans-fallback';
  src: local('Tahoma'); /* یک فونت سیستمی نزدیک */
  size-adjust: 103%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}

body {
  font-family: 'IranSansWeb', 'IranSans-fallback', sans-serif;
}

ابزار آنلاین Fallback Font Generator این مقادیر را به‌طور خودکار برای فونت‌های گوگل و سفارشی محاسبه می‌کند. با چند آزمون و خطا می‌توانید CLS ناشی از فونت را به صفر مطلق برسانید.

راه‌حل ۳: font-display: optional (برای آیکون‌ها و جزئیات)

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

۶.۶. انیمیشن‌ها و تغییرات CSS ناگهانی — فقط transform و opacity

قانون طلایی: هرگز در انیمیشن‌ها از ویژگی‌هایی که بر layout صفحه تأثیر می‌گذارند (width, height, top, left, margin, padding) استفاده نکنید. در عوض، همیشه transform و opacity را به کار ببرید که در لایه compositor اجرا می‌شوند و جریان سند را تغییر نمی‌دهند.

/* نادرست (CLS ایجاد می‌کند) */
.bad-animation {
  animation: expand 0.3s;
}
@keyframes expand {
  from { height: 0; }
  to { height: 100px; }
}

/* صحیح (بدون جابه‌جایی) */
.good-animation {
  animation: fadeSlide 0.3s;
}
@keyframes fadeSlide {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

۶.۷. بارگذاری غیرهمگام CSS — اولویت با Critical CSS

وقتی فایل‌های CSS بزرگ با تأخیر بارگذاری می‌شوند، صفحه برای لحظاتی بدون استایل دیده می‌شود (پدیده FOUC) و بعد ناگهان قالب می‌گیرد. راه‌حل: استخراج CSS حیاتی (بالای صفحه) و قرار دادن آن به‌صورت inline در <head>. بقیه CSS را می‌توانید با تکنیک‌های async یا defer بارگذاری کنید.

<head>
  <style>/* Critical CSS اینجا */</style>
  <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="styles.css"></noscript>
</head>

در وردپرس، افزونه‌های کش مانند WP Rocket و Flying Press این کار را خودکار انجام می‌دهند.

---

۷. راهکارهای پیشرفته برای توسعه‌دهندگان

۷.۱. پایش واقعی کاربران با Real User Monitoring (RUM)

کتابخانه web-vitals گوگل به شما امکان می‌دهد CLS را دقیقاً همان‌طور که کاربران تجربه می‌کنند جمع‌آوری کنید. این داده‌ها بسیار ارزشمندتر از تست‌های مصنوعی هستند.

import { onCLS } from 'web-vitals';

onCLS((metric) => {
  // ارسال به Google Analytics, DataDog, یا سرور اختصاصی
  console.log('CLS:', metric.value);
});

با تحلیل این داده‌ها متوجه می‌شوید که مثلاً کاربران موبایل با شبکه 3G بیشترین جابه‌جایی را می‌بینند و می‌توانید اولویت‌های بهینه‌سازی را تعیین کنید.

۷.۲. حذف کامل جابه‌جایی فونت با size-adjust و override‌ها

همان‌طور که در بخش ۶.۵ اشاره شد، استفاده هم‌زمان از size-adjust، ascent-override، descent-override و line-gap-override در @font-face فونت پشتیبان، قدرتمندترین روش برای صفر کردن CLS فونت است. یک تنظیم دقیق با ابزار Fallback Font Generator می‌تواند تمام پارامترها را برای فونت‌های معروف (مانند وزیر، ایران‌سنس و Roboto) استخراج کند.

۷.۳. افزایش سرعت رندر با content-visibility: auto

ویژگی CSS به نام content-visibility: auto به مرورگر می‌گوید که بخش‌های خارج از صفحه (below the fold) را تا زمان نزدیک شدن کاربر رندر نکند. این کار سرعت بارگذاری اولیه را به شدت افزایش می‌دهد و می‌تواند به‌طور غیرمستقیم احتمال جابه‌جایی‌های دیرهنگام را کاهش دهد. اما توجه کنید که روی عناصری که با JS اندازه‌گیری می‌شوند تأثیر جانبی دارد.

---

۸. رفع CLS در وردپرس — تشخیص، افزونه‌ها و ترفندهای اختصاصی

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

تشخیص سریع مشکلات CLS در وردپرس

• نصب Site Kit by Google: این افزونه رسمی گوگل، داده‌های PageSpeed Insights و Core Web Vitals را مستقیماً به پیشخوان وردپرس می‌آورد.
• بررسی گزارش Core Web Vitals در Google Search Console: لیست صفحات مشکل‌دار را دقیقاً می‌بینید.

بهترین افزونه‌ها برای رفع CLS

• WP Rocket: با قابلیت تولید خودکار Critical CSS، بارگذاری تنبل تصاویر، فشرده‌سازی و بهینه‌سازی فایل‌ها، تأثیر بی‌نظیری بر کاهش CLS دارد.
• Perfmatters: ابزاری فوق‌العاده برای غیرفعال‌سازی اسکریپت‌های غیرضروری، مدیریت پیشرفته فونت‌های گوگل (از جمله local hosting) و حذف کدهایی که جابه‌جایی ایجاد می‌کنند.
• Asset CleanUp: امکان بارگذاری CSS/JS را فقط در صفحات مشخص فراهم می‌کند و از بارگذاری بی‌مورد منابع جلوگیری می‌کند.
• Imagify / ShortPixel: تصاویر را بهینه کرده و ابعاد واقعی را حفظ می‌کنند؛ همچنین WebP و سایزهای دقیق تولید می‌کنند.

راهکارهای دستی برای کاربران وردپرسی

۱. اضافه کردن width/height به تصاویر شاخص: اگر پوسته شما به‌طور خودکار ابعاد را به تگ img اضافه نمی‌کند، قطعه‌کد زیر را در فایل functions.php قالب فرزند قرار دهید:

add_filter( 'post_thumbnail_html', 'add_missing_dimensions', 10, 5 );
function add_missing_dimensions( $html, $post_id, $thumbnail_id, $size, $attr ) {
    $image = wp_get_attachment_image_src( $thumbnail_id, $size );
    if ( $image ) {
        $html = str_replace( '<img', '<img width="' . $image[1] . '" height="' . $image[2] . '"', $html );
    }
    return $html;
}

۲. میزبانی محلی فونت‌ها: به جای فراخوانی مستقیم از گوگل فونت، از افزونه OMGF یا Self-Hosted Google Fonts استفاده کنید تا فونت‌ها را روی سرور خود ذخیره کنید و font-display: swap را فعال کنید. این کار سرعت را هم افزایش می‌دهد.

۳. مدیریت iframe ویدئوها: با اضافه کردن CSS زیر به پوسته، تمام iframeهای ویدئویی را مجبور به حفظ نسبت تصویر کنید:

iframe[src*="youtube.com"],
iframe[src*="vimeo.com"] {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

---

۹. پایش مداوم CLS با گوگل سرچ کنسول و ابزارهای رایگان

رفع CLS یک بار برای همیشه نیست. با تغییرات سایت، افزونه‌های جدید یا محتوای تبلیغاتی، ممکن است جابه‌جایی دوباره ظاهر شود. برنامه پایش زیر را دنبال کنید:

• Google Search Console (Core Web Vitals) ← هر دو هفته یک‌بار بررسی کنید. صفحات با وضعیت Poor را بلافاصله آنالیز و رفع کنید.
• PageSpeed Insights ← برای صفحات اصلی و فرود به‌صورت هفتگی تست بگیرید.
• SpeedVitals / GTmetrix ← مانیتورینگ خودکار و تاریخچه تغییرات CLS در طول زمان.
• DebugBear / Calibre ← اگر بودجه دارید، این سرویس‌ها داده‌های واقعی کاربران را به‌طور مستمر پایش می‌کنند و قبل از اینکه گوگل جریمه کند، هشدار می‌دهند.

پیشنهاد مطالعه : راهنمای جامع تست سرعت سایت و معرفی ابزارهای کلیدی

---

۱۰. چک‌لیست طلایی و جمع‌بندی

حالا که همه راه‌حل‌ها را گام‌به‌گام مرور کردیم، وقت آن است که با یک چک‌لیست عملی، پایداری بصری سایت را تضمین کنید. هر یک از موارد زیر را بررسی کرده و انجام دهید:

✅ تصاویر: تمام تگ‌های <img> دارای ویژگی‌های width و height (یا aspect-ratio در CSS) باشند. تصاویر Lazy Load شده حتماً ابعاد داشته باشند.
✅ تبلیغات: یک کانتینر با min-height و placeholder ایجاد کنید. از تغییر ابعاد ناگهانی جلوگیری شود.
✅ iframeها: تمام ویدیوها و نقشه‌ها با یک wrapper دارای نسبت تصویر (aspect-ratio) محصور شوند.
✅ محتوای تزریقی: هر عنصری که با JS اضافه می‌شود، یا خارج از جریان عادی (fixed/overlay) باشد یا یک فضای رزرو شده داشته باشد.
✅ فونت‌ها: از font-display: swap استفاده کنید و برای کاهش جابه‌جایی، فونت پشتیبان را با size-adjust و override‌ها تنظیم کنید. فونت‌ها را preload کنید.
✅ انیمیشن‌ها: فقط transform و opacity به‌کار ببرید. از تغییر width/height بپرهیزید.
✅ CSS بحرانی: Critical CSS را به‌صورت inline در <head> قرار دهید و بقیه را async بارگذاری کنید.
✅ وردپرس: از افزونه‌های بهینه‌سازی معتبر (مانند WP Rocket) استفاده کنید و فونت‌ها را محلی میزبانی کنید.
✅ پایش مستمر: به‌طور منظم با PageSpeed Insights و Google Search Console وضعیت را بررسی کنید.

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

اگر در مسیر بهبود CLS برای سایت خود به راهنمایی تخصصی نیاز دارید، تیم پرشیا وب در بخش پشتیبانی و تعمیر سایت آماده کمک به شماست.