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

آخرین بروزرسانی در تاریخ ژوئن 2, 2026 توسط PersiaWebAdmin

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

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

فهرست مطالب

1. CLS دقیقاً چیست و چرا اهمیت دارد؟
2. فرمول محاسبه CLS و مفهوم Session Window
3. چه نمره‌ای خوب است؟ آستانه‌های Core Web Vitals
4. دلایل اصلی ایجاد CLS (با مثال‌های بصری)
5. چگونه CLS را اندازه بگیریم؟ (ابزارها و روش‌ها)
6. راه‌حل‌های عملی رفع CLS — گام‌به‌گام

• ۶.۱. تصاویر بدون ابعاد (Images without dimensions)
• ۶.۲. تبلیغات و بنرهای داینامیک
• ۶.۳. محتوای جاسازی‌شده (Embeds و Iframe)
• ۶.۴. تزریق محتوای پویا با جاوااسکریپت
• ۶.۵. فونت‌های وب و جابجایی متن (FOIT/FOUT)
• ۶.۶. انیمیشن‌ها و تغییرات CSS ناگهانی
• ۶.۷. بارگذاری غیرهمگام CSS

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

• ۷.۱. اندازه‌گیری CLS با Real User Monitoring (RUM)
• ۷.۲. بهینه‌سازی فونت‌ها با size-adjust
• ۷.۳. استفاده از content-visibility برای بهبود عملکرد

1. CLS در وردپرس — تشخیص، افزونه‌ها و راهکارهای اختصاصی
2. پایش مداوم CLS: گوگل سرچ کنسول و ابزارهای رایگان
3. جمع‌بندی و چک‌لیست نهایی

۱. CLS دقیقاً چیست و چرا اهمیت دارد؟

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

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

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

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

۲. فرمول محاسبه CLS و مفهوم Session Window

CLS یک عدد واحد نیست که یک‌بار برای همیشه محاسبه شود؛ بلکه مجموع نمره‌های جابجایی‌های فردی (Layout Shift Scores) است که در یک پنجره جلسه (Session Window) رخ می‌دهند. فرمول محاسبه هر جابجایی منفرد به این صورت است:

layout shift score = impact fraction × distance fraction

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

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

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

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

۳. چه نمره‌ای خوب است؟ آستانه‌های Core Web Vitals

گوگل سه سطح برای CLS تعریف کرده است:

وضعیت	نمره CLS
خوب (Good)	کمتر از ۰.۱
نیاز به بهبود (Needs Improvement)	بین ۰.۱ تا ۰.۲۵
ضعیف (Poor)	بیشتر از ۰.۲۵

هدف شما باید رسیدن به نمره کمتر از ۰.۱ برای تمام صفحات (خصوصاً صفحات اصلی و فرود) باشد. نمره بالاتر از ۰.۲۵ یک پرچم قرمز جدی برای گوگل محسوب می‌شود.

---

۴. دلایل اصلی ایجاد CLS (با مثال‌های بصری)

برای رفع CLS، ابتدا باید مقصران اصلی را بشناسیم. رایج‌ترین عوامل ایجاد جابجایی چیدمان عبارتند از:

1. تصاویر بدون ابعاد مشخص (width/height): مرورگر نمی‌داند تصویر چقدر فضا اشغال می‌کند، پس ابتدا ارتفاع صفر در نظر می‌گیرد و با بارگذاری تصویر، محتوا را پایین می‌راند.
2. تبلیغات و بنرهای داینامیک: کدهای تبلیغاتی معمولاً فضای خود را به‌طور پویا به صفحه تزریق می‌کنند و ابعاد نهایی تا آخرین لحظه مشخص نیست.
3. iframeها و محتوای جاسازی‌شده: ویدئوهای یوتیوب، نقشه‌های گوگل و پست‌های شبکه‌های اجتماعی اغلب بدون ارتفاع تعریف‌شده بارگذاری می‌شوند.
4. تزریق محتوای پویا با جاوااسکریپت: نمایش پنجره‌های خبرنامه، اعلان‌ها، چت‌بات‌ها یا هر المانی که پس از لود اولیه صفحه با JS اضافه می‌شود.
5. فونت‌های وب سفارشی: وقتی فونت دیر بارگذاری می‌شود، متن ابتدا با فونت پیش‌فرض سیستم نمایش داده می‌شود و سپس با فونت جدید جایگزین می‌شود. این تعویض باعث تغییر اندازه خطوط و جابجایی متن می‌گردد (پدیده FOIT/FOUT).
6. بارگذاری غیرهمگام CSS: اگر CSS اصلی صفحه دیر اعمال شود، صفحه ابتدا بدون استایل (یا با استایل ناقص) ظاهر شده و سپس ناگهان شکل می‌گیرد.
7. انیمیشن‌های CSS غیر بهینه: تغییر ویژگی‌هایی مثل top، left، margin یا height می‌تواند باعث جابجایی سایر المان‌ها شود.

در ادامه برای هر یک از این موارد راه‌حل عملی ارائه می‌دهیم.

---

۵. چگونه CLS را اندازه بگیریم؟ (ابزارها و روش‌ها)

قبل از درمان، باید بیماری را دقیقاً تشخیص دهیم. چندین ابزار رایگان و قدرتمند در اختیار شماست:

• PageSpeed Insights (PSI): وارد سایت PageSpeed Insights شوید و آدرس صفحه خود را وارد کنید. در بخش «Core Web Vitals Assessment» نمره CLS را هم برای موبایل و هم دسکتاپ خواهید دید. همچنین در بخش «Diagnostics» پیشنهادهای مشخصی برای رفع مشکلات داده می‌شود.
• Lighthouse (در Chrome DevTools): در مرورگر کروم، F12 را بزنید، به زبانه «Lighthouse» بروید و یک گزارش Performance بگیرید. CLS یکی از معیارهای اصلی گزارش خواهد بود.
• Chrome DevTools Performance Panel: می‌توانید بارگذاری صفحه را ضبط کنید و بخش «Experience» را بررسی کنید تا جابجایی‌های چیدمان با جزئیات نشان داده شوند.
• Web Vitals Extension: افزونه رسمی گوگل برای کروم که نمره CLS هر صفحه را به صورت زنده نمایش می‌دهد.
• Google Search Console: در بخش «Core Web Vitals» گزارش‌هایی از وضعیت صفحات سایت شما بر اساس داده‌های واقعی کاربران (CrUX) ارائه می‌شود.
• CrUX Dashboard: داشبورد رایگان گوگل که داده‌های واقعی کاربران (Field Data) را در مقیاس بزرگ نشان می‌دهد.

توصیه: همیشه داده‌های آزمایشگاهی (Lighthouse) را با داده‌های واقعی (Field Data) مقایسه کنید. گاهی CLS فقط در شرایط واقعی (مثلاً با تأخیر شبکه) رخ می‌دهد.

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

---

۶. راه‌حل‌های عملی رفع CLS — گام‌به‌گام

حالا که می‌دانیم مشکل کجاست، به سراغ راه‌حل‌ها می‌رویم. برای هر علت، یک یا چند روش عملی با کدهای آماده ارائه می‌دهیم.

۶.۱. تصاویر بدون ابعاد (Images without dimensions)

تشخیص: در PageSpeed Insights پیام «Image elements do not have explicit width and height» را می‌بینید.

راه‌حل قطعی: همیشه برای تصاویر ویژگی‌های width و height را به پیکسل تعیین کنید. مرورگرهای مدرن (Chrome, Firefox, Safari) با این کار فضای مورد نیاز تصویر را همان ابتدا رزرو می‌کنند و از جابجایی جلوگیری می‌کنند، حتی اگر تصویر ریسپانسیو باشد.

<!-- به جای این -->
<img src="example.jpg" alt="">

<!-- این کار را انجام دهید -->
<img src="example.jpg" width="800" height="600" alt="توضیح تصویر">

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

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

در این حالت، مرورگر نسبت عرض به ارتفاع را از ویژگی‌های width و height محاسبه می‌کند و فضای عمودی را رزرو می‌نماید. اگر تصویر شما ابعاد دقیقی ندارد (مثلاً تصاویر کاربران در وردپرس)، می‌توانید از ویژگی جدید CSS یعنی aspect-ratio استفاده کنید:

img {
  width: 100%;
  aspect-ratio: 16 / 9; /* نسبت تصویر */
  object-fit: cover;
}

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

۶.۲. تبلیغات و بنرهای داینامیک

تبلیغات یکی از بدنام‌ترین عوامل CLS هستند، زیرا اندازه آن‌ها متغیر است و معمولاً با تأخیر بارگذاری می‌شوند.

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

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

.ad-container {
  background-color: #f0f0f0; /* یک رنگ پس‌زمینه خنثی */
  display: flex;
  align-items: center;
  justify-content: center;
}

اگر شبکه تبلیغاتی شما اندازه‌های مختلفی ارائه می‌دهد، min-height را طوری تنظیم کنید که برای اکثر اندازه‌ها جواب دهد. همچنین می‌توانید از CSS Grid یا Flexbox استفاده کنید تا فضای خالی زیباتر دیده شود.

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

۶.۳. محتوای جاسازی‌شده (Embeds و Iframe)

iframeها (مانند ویدئوهای یوتیوب یا نقشه گوگل) بدون ارتفاع مشخص باعث جابجایی شدید می‌شوند.

روش اول: از تکنیک padding-bottom قدیمی برای نسبت تصویر استفاده کنید:

<div class="video-wrapper">
  <iframe src="..."></iframe>
</div>

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

روش دوم (مدرن‌تر): استفاده از aspect-ratio:

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

این روش به طور خودکار فضای مورد نیاز را رزرو می‌کند.

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

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

راه‌حل: این نوع محتوا را هرگز بالای محتوای اصلی تزریق نکنید. آن را به پایین صفحه (زیر محتوای اصلی) منتقل کنید، یا از یک overlay (پوشش) استفاده کنید که روی محتوا ظاهر شود، بدون آنکه جریان صفحه را تغییر دهد. همچنین می‌توانید یک فضای خالی از قبل برای آن‌ها در نظر بگیرید و فقط visibility آن‌ها را تغییر دهید، نه display را.

.dynamic-banner {
  min-height: 80px; /* فضای رزرو شده */
}

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

۶.۵. فونت‌های وب و جابجایی متن (FOIT/FOUT)

این یکی از مرموزترین عوامل CLS است. وقتی از فونت‌های سفارشی (Google Fonts یا فونت‌های آپلودشده) استفاده می‌کنید، تا زمانی که فونت دانلود نشده، مرورگر متن را با یک فونت سیستمی نمایش می‌دهد. پس از بارگذاری، فونت جدید جایگزین می‌شود و از آنجایی که متریک‌های دو فونت متفاوت است، متن جابجا می‌شود.

راه‌حل‌ها:

• استفاده از font-display: swap: این دستور به مرورگر می‌گوید که متن را فوراً با فونت پشتیبان نمایش بدهد و پس از بارگذاری فونت سفارشی، آن را جایگزین کند. این کار از پنهان ماندن متن (FOIT) جلوگیری می‌کند، اما همچنان ممکن است جابجایی رخ دهد.

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

• بهبود Fallback با size-adjust (فوق‌العاده مؤثر): ویژگی جدید CSS به نام size-adjust در قاعده @font-face به شما اجازه می‌دهد متریک‌های فونت پشتیبان را به فونت سفارشی نزدیک کنید. این کار باعث می‌شود وقتی فونت اصلی بارگذاری می‌شود، متن تقریباً هیچ جابجایی نداشته باشد.

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

@font-face {
  font-family: 'MyFont-fallback';
  src: local('Arial');
  size-adjust: 105%; /* تنظیم اندازه برای تطبیق با فونت اصلی */
  ascent-override: 90%;
  descent-override: 20%;
}

سپس در CSS:

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

با کمی آزمون و خطا می‌توانید size-adjust و ascent-override/descent-override را طوری تنظیم کنید که جابجایی به صفر برسد. ابزارهای آنلاینی مانند «Font Style Matcher» می‌توانند به شما کمک کنند.

• پیش‌بارگذاری (Preload) فونت‌ها: با اضافه کردن لینک preload در <head>، فونت زودتر دانلود می‌شود:

<link rel="preload" href="/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin>

• استفاده از font-display: optional: این گزینه به مرورگر می‌گوید که فونت سفارشی را فقط در صورتی استفاده کند که خیلی زود در دسترس باشد؛ در غیر این صورت از فونت پشتیبان استفاده کند و دیگر فونت را عوض نکند. با این کار CLS کاملاً حذف می‌شود، اما ممکن است کاربر فونت سفارشی را نبیند. برای متن‌های اصلی توصیه نمی‌شود ولی برای آیکون‌ها عالی است.

۶.۶. انیمیشن‌ها و تغییرات CSS ناگهانی

انیمیشن‌هایی که از ویژگی‌های width، height، top، left یا margin استفاده می‌کنند، باعث جابجایی چیدمان می‌شوند. برای انیمیشن‌های ایمن، همیشه از transform و opacity استفاده کنید، زیرا این ویژگی‌ها روی جریان چیدمان تأثیر نمی‌گذارند.

/* بد */
.element {
  animation: slideDown 0.3s;
}
@keyframes slideDown {
  from { height: 0; }
  to { height: 100px; }
}

/* خوب */
.element {
  animation: fadeIn 0.3s;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

۶.۷. بارگذاری غیرهمگام CSS

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

---

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

۷.۱. اندازه‌گیری CLS با Real User Monitoring (RUM)

برای گرفتن داده‌های واقعی از کاربران خود، می‌توانید از کتابخانه web-vitals گوگل استفاده کنید:

import {onCLS} from 'web-vitals';

onCLS(console.log); // هر جابجایی گزارش می‌شود

می‌توانید این داده‌ها را به Google Analytics یا سرور خود ارسال کنید.

۷.۲. بهینه‌سازی فونت‌ها با size-adjust و ascent-override

همان‌طور که اشاره شد، این روش برای از بین بردن جابجایی ناشی از فونت بسیار قدرتمند است. برای یک فونت گوگل مثل Roboto، می‌توانید Fallback Font Face را به این صورت تعریف کنید:

@font-face {
  font-family: 'Roboto-fallback';
  src: local('Arial');
  size-adjust: 99%;
  ascent-override: 93%;
  descent-override: 25%;
  line-gap-override: 0%;
}

ابزارهایی مانند Fallback Font Generator این مقادیر را به صورت خودکار محاسبه می‌کنند.

۷.۳. استفاده از content-visibility: auto برای بهبود عملکرد

این ویژگی CSS به مرورگر می‌گوید که بخش‌های خارج از صفحه (below the fold) را رندر نکند تا بارگذاری اولیه سریع‌تر شود. با این کار منابع کمتری مصرف می‌شود و احتمال جابجایی‌های ناشی از رندر دیرهنگام کاهش می‌یابد. اما مستقیماً CLS را کم نمی‌کند؛ بیشتر روی LCP و سرعت کلی تأثیر دارد.

---

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

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

تشخیص CLS در وردپرس

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

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

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

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

• برای تصاویر: وقتی تصویری را در ویرایشگر آپلود می‌کنید، همیشه ابعاد آن (Full Size یا Large) را طوری تنظیم کنید که ابعاد واقعی را نشان دهد. بسیاری از پوسته‌ها به‌طور خودکار width و height را به تگ <img> اضافه می‌کنند؛ اگر پوسته شما این کار را نمی‌کند، قطعه کد زیر را در functions.php اضافه کنید:

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

• برای فونت‌ها: اگر از گوگل فونت استفاده می‌کنید، بهتر است آن‌ها را به صورت محلی میزبانی کنید و font-display: swap را فعال کنید. افزونه‌های OMGF یا Self-Hosted Google Fonts این کار را خودکار انجام می‌دهند.
• برای iframeها (مثل یوتیوب): پوسته شما معمولاً از wp_oembed_get استفاده می‌کند. با CSS می‌توانید به تمام iframeهای ویدئویی نسبت تصویر بدهید.

---

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

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

• Google Search Console > Core Web Vitals: هر دو هفته یک‌بار گزارش را بررسی کنید. صفحاتی که وضعیت «Poor» دارند به شما نشان داده می‌شوند.
• PageSpeed Insights: به صورت هفتگی صفحات اصلی را تست کنید.
• SpeedVitals یا GTmetrix: ابزارهایی که تست‌های مکرر و تاریخچه ارائه می‌دهند.
• مانیتورینگ واقعی کاربر (RUM): اگر بودجه دارید، می‌توانید از سرویس‌هایی مثل DebugBear یا Calibre استفاده کنید که داده‌های واقعی کاربران را در طول زمان رصد می‌کنند.

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

---

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

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

چک‌لیست طلایی برای رفع CLS:

✅ همه تصاویر دارای width و height مشخص باشند (یا aspect-ratio).
✅ تبلیغات و بنرها در یک container با min-height قرار بگیرند.
✅ iframeها (ویدئو، نقشه) با نسبت تصویر (aspect-ratio) محصور شوند.
✅ محتوای تزریقی با JS بالای محتوای اصلی اضافه نشود.
✅ فونت‌های وب با font-display: swap (یا optional) و ترجیحاً با size-adjust بهینه شوند.
✅ انیمیشن‌ها فقط با transform و opacity اجرا شوند.
✅ CSS حیاتی به صورت inline در <head> باشد.
✅ در وردپرس، از افزونه‌های بهینه‌سازی معتبر استفاده کنید.
✅ به‌طور منظم با PageSpeed Insights و Search Console پایش کنید.

اگر در بهبود cls برای سایت خود نیاز به کمک و راهنمایی دارید می توانید با کارشناسان پرشیا وب در بخش پشتیبانی و تعمیر سایت در تماس باشید.