کاهش CLS با تکنیک‌های ساده: چگونه پرش‌های آزاردهنده صفحه را متوقف کنیم؟

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

CLS چیست و چرا گوگل به آن اهمیت می‌دهد؟

CLS یا انحراف چیدمان تجمعی، معیاری است که می‌سنجد در طول بارگذاری صفحه، اجزای رابط کاربری چقدر جابه‌جا می‌شوند. اگر یک تصویر دیر بارگذاری شود و باعث شود متن پایینش پایین‌تر برود، یا اگر یک بنر تبلیغاتی ناگهان در وسط صفحه ظاهر شود و بقیه را هل بدهد، این جابه‌جایی‌ها در قالب عدد CLS ثبت می‌شوند. آستانه‌های رسمی که Google تعیین کرده ساده‌اند: مقدار زیر ۰/۱ خوب است، بین ۰/۱ و ۰/۲۵ نیاز به بهبود دارد، و بالای ۰/۲۵ ضعیف محسوب می‌شود.

اهمیت CLS دو بُعد دارد. از یک سو، تجربهٔ واقعی کاربر را می‌سنجد؛ وقتی صفحه می‌پرد، کاربر ممکن است روی عنصر اشتباهی کلیک کند، متن را گم کند، یا حتی فرم را اشتباه پر کند. از سوی دیگر، Google این معیار را به‌عنوان بخشی از سیگنال‌های رتبه‌بندی در نظر می‌گیرد. یعنی CLS بد، هم کاربر را فراری می‌دهد و هم رتبه‌ای که با تلاش به دست آورده‌اید را تضعیف می‌کند. این پیوند میان تجربه کاربری و سئو، در Core Web Vitals چیست و چرا گوگل بر آن تأکید دارد به‌طور کامل باز شده است. اگر تازه با این دستهٔ معیارها آشنا می‌شوید، پیش از ادامه، مروری بر سئو چیست و چگونه به رشد سایت کمک می‌کند دید کلی بهتری می‌دهد.

CLS عددی است که از چشم کاربر پنهان است ولی از چشم اعتماد او پنهان نمی‌ماند. کاربر اسمش را نمی‌داند، ولی حسش می‌کند — و همین حس، تصمیم او را می‌سازد.

فرمول CLS: از کجا می‌آید این عدد؟

برای فهم دقیق CLS، لازم است بدانید این عدد چطور محاسبه می‌شود. CLS از دو مؤلفه ساخته می‌شود:

Layout Shift Score = Impact Fraction × Distance Fraction

در این فرمول، Impact Fraction می‌سنجد چه نسبتی از ویوپورت در آن لحظه جابه‌جا شده، و Distance Fraction می‌سنجد این جابه‌جایی چقدر فاصله را طی کرده. حاصل‌ضرب این دو، امتیاز یک تک‌جابه‌جایی است. اما CLS معیار نهایی نیست؛ آن‌چه وارد گزارش می‌شود، «بدترین خوشهٔ جابه‌جایی» در طول پنجرهٔ پنج‌ثانیه‌ای است — یعنی بدترین رخداد، نه میانگین آن. همین انتخاب گوگل، دلیل مهمی است که چرا یک جابه‌جایی بزرگ، تأثیر غیرتناسبی روی عدد نهایی می‌گذارد.

نکتهٔ ظریف: CLS فقط زمانی ثبت می‌شود که کاربر به‌طور واقعی در حال مشاهدهٔ صفحه باشد. جابه‌جایی‌هایی که در لحظهٔ لود اولیه رخ می‌دهند ولی کاربر ندیده، در محاسبه لحاظ نمی‌شوند. این یعنی اگر بنر شما زیر خط دید باشد و دیر بارگذاری شود، روی عدد نهایی اثر نمی‌گذارد — ولی همان بنر اگر بالای صفحه باشد، یک ضربهٔ سنگین به CLS است.

پنج علت رایج CLS در سایت‌های وردپرسی

در تجربه‌ام، تقریباً تمام CLS های بد در سایت‌های وردپرسی از یکی از این پنج علت می‌آیند:

تصاویر بدون width و height: وقتی مرورگر ابعاد تصویر را نمی‌داند، تا لحظهٔ دانلود آن، فضایی برایش رزرو نمی‌کند. نتیجه، پرش بزرگ متن بعد از آن.
فونت‌های وب بدون fallback مناسب: اگر فونت اصلی با تأخیر برسد و از یک فونت سیستم استفاده نشود، تمام متن صفحه هنگام تعویض فونت جابه‌جا می‌شود.
بنرها و تبلیغات دیررس: تبلیغاتی که از سرور ثالث می‌آیند، ممکن است بعد از رندر اولیه برسند و کل چیدمان را هل بدهند.
محتوای دینامیک درون‌صفحه: پنجره‌های گفتگو (Chat)، پیام‌های کوکی، پاپ‌آپ‌های خبرنامه، و Snippet هایی که با JavaScript تزریق می‌شوند.
عدم تطابق CSS و JavaScript: اگر CSS بیش از حد دیر بارگذاری شود یا ترتیب بارگذاری‌اش اشتباه باشد، مرورگر ابتدا نسخهٔ پیش‌فرض را رندر می‌کند و بعد چیدمان واقعی را اعمال می‌کند.

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

سنجش CLS: ابزارهای دقیق و تفاوت‌هایشان

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

PageSpeed Insights

نسخهٔ رسمی گوگل که هم داده‌های میدانی (Field Data) و هم آزمایشگاهی (Lab Data) را نمایش می‌دهد. داده‌های میدانی از گزارش Chrome UX Report (به‌اختصار CrUX) می‌آید و تجربهٔ واقعی کاربران را نشان می‌دهد. داده‌های آزمایشگاهی از Lighthouse و سرعت بارگذاری مصنوعی.

Chrome DevTools — بخش Performance

برای دیباگ دقیق، DevTools بهترین ابزار است. در تب Performance، با فعال‌کردن گزینهٔ «Screenshots» می‌توانید دقیقاً لحظهٔ هر پرش را ببینید. همچنین بخش «Experience» در Chrome DevTools نشان می‌دهد کدام DOM Element مقصر اصلی هر جابه‌جایی است. جزئیات بیشتر در ابزارهای سنجش Core Web Vitals آمده است.

Web Vitals Extension

یک افزونهٔ مرورگر که در حین گشت‌وگذار شما، CLS هر صفحه را در گوشهٔ مرورگر نشان می‌دهد. مناسب برای تست سریع در حین کار.

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

تکنیک اول: رام‌کردن تصاویر و ویدئوها

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

گام اول: افزودن width و height به همهٔ تصاویر

در وردپرس، اگر از ویرایشگر بلوک استفاده می‌کنید، این ابعاد معمولاً خودکار اضافه می‌شوند. اما اگر قالب شما این ابعاد را از HTML حذف می‌کند، باید آن را اصلاح کنید. اگر مطمئن نیستید، از طریق DevTools یک تصویر را انتخاب کنید و ببینید آیا در تگ <img> ویژگی width و height وجود دارد یا نه.

گام دوم: نسبت ابعاد را با CSS مدیریت کنید

اگر می‌خواهید تصویر در موبایل و دسکتاپ ابعاد متفاوتی داشته باشد، به‌جای دستکاری width و height، از CSS استفاده کنید:

img {
  width: 100%;
  height: auto;
  aspect-ratio: attr(width) / attr(height);
}

این ترکیب، به مرورگر می‌گوید «نسبت ابعاد را از ویژگی‌های width و height بخوان، ولی اندازهٔ نهایی را با CSS مدیریت کن». نتیجه: هیچ پرشی، حتی وقتی تصویر در اندازه‌های مختلف نمایش داده می‌شود.

گام سوم: ویدئوها را هم شامل کنید

ویدئوهای embedded (یوتیوب، آپارات، Vimeo) هم اگر بدون ابعاد رزرو‌شده بارگذاری شوند، پرش می‌سازند. راه‌حل: کانتینر با نسبت ابعاد مشخص بسازید:

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

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

تصویری که ابعادش را به مرورگر نگفته‌اید، مثل مهمانی است که آدرسش را نداده‌اید. هر لحظه ممکن است سر برسد و همه را جابه‌جا کند.

تکنیک دوم: مهار فونت‌های وب

فونت‌های وب یکی از شایع‌ترین علت‌های CLS در سایت‌های فارسی هستند. وقتی مرورگر فونت اصلی را نمی‌یابد، ابتدا با فونت سیستم رندر می‌کند و بعد، هنگام رسیدن فونت اصلی، تمام متن را با ابعاد جدید بازچینش می‌کند. این پدیده با نام FOUT (Flash Of Unstyled Text) شناخته می‌شود و مستقیماً روی CLS اثر می‌گذارد.

سه راه‌حل عملی:

راه‌حل اول: font-display: swap

این ویژگی CSS به مرورگر می‌گوید اگر فونت اصلی با تأخیر رسید، ابتدا با فونت fallback رندر کن و بعداً جایگزین کن. البته خود این جایگزینی هم باعث پرش می‌شود؛ ولی چون با font-display: optional ترکیب می‌شود، اغلب اثر پرش را حذف می‌کند:

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

راه‌حل دوم: اندازه‌گیری دقیق fallback

ابزاری مثل Fontaine یا Fallback Font Generator به شما کمک می‌کند یک فونت fallback سیستمی پیدا کنید که ابعادش نزدیک به فونت اصلی باشد. با تعیین size-adjust مناسب، پرش هنگام جایگزینی تقریباً صفر می‌شود.

راه‌حل سوم: preload فونت‌های اصلی

اگر فونت اصلی حتماً لازم است، آن را در head صفحه با preload بارگذاری کنید تا مرورگر اول آن را دانلود کند:

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

در سایت‌های فارسی، فونت‌های وزین‌دار مثل IRANSans یا Vazirmatn بیشترین کاربرد را دارند. اگر با قالب‌های خارجی کار می‌کنید، انتخاب فونت مناسب یکی از تصمیم‌هایی است که در قالب سبک وردپرس چیست هم به آن پرداخته‌ام؛ قالب سبک اغلب فونت‌های بهینه‌تری دارد.

تکنیک سوم: رزرو فضای تبلیغات و بنرها

تبلیغات و بنرها یکی از منابع کلاسیک CLS هستند. به‌ویژه در سایت‌های خبری و فروشگاهی که تبلیغات ثالث از سرورهای مختلف می‌آید. راه‌حل استاندارد: برای هر جایگاه تبلیغاتی، فضای مشخصی رزرو کنید، حتی اگر تبلیغ هنوز بارگذاری نشده است.

الگوی کانتینر رزرو‌شده

.ad-slot {
  min-height: 250px;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

با تعیین min-height، مرورگر فضای ثابتی برای تبلیغ در نظر می‌گیرد. اگر تبلیغ سایز کوچک‌تری داشته باشد، کانتینر همان ارتفاع را نگه می‌دارد. اگر تبلیغ هیچ‌وقت بارگذاری نشود، همان فضای خالی باقی می‌ماند — که از پرش ناگهانی بهتر است.

بنرهای شناور و استیکی

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

اگر از افزونه‌های تبلیغات یا پاپ‌آپ استفاده می‌کنید، بررسی کنید که آیا با تنظیمات مناسب CLS را رعایت می‌کنند یا نه. بعضی افزونه‌های پاپ‌آپ، تنها با یک تنظیم ساده (رزرو فضا) تفاوت چشمگیری در CLS می‌سازند.

تکنیک چهارم: مدیریت محتوای دینامیک

محتوای دینامیک (Dynamic Content) آن دسته از محتوایی است که با JavaScript تزریق می‌شود: پیام‌های کوکی، اعلان‌های خبرنامه، چت آنلاین، بلوک‌های «مطالب مرتبط» که بعد از بارگذاری می‌آیند. این‌ها معمولاً در بالای صفحه قرار می‌گیرند و مستقیماً روی CLS اثر می‌گذارند.

سه رویکرد برای کاهش CLS در این دسته:

رویکرد اول: نمایش با Position Fixed

اگر پیام کوکی یا چت آنلاین، در بالای صفحه ثابت (Fixed Position) نمایش داده شود، روی چیدمان بقیهٔ صفحه اثر نمی‌گذارد. این رویکرد برای عناصر پاپ‌آپ بسیار مؤثر است.

رویکرد دوم: تأخیر آگاهانه در نمایش

اگر عنصری ناگهان در وسط صفحه ظاهر می‌شود، آن را با تأخیر نمایش دهید تا وقتی کاربر کاملاً در حال خواندن صفحه است. برای پیام‌های کوکی، تأخیر چند ثانیه‌ای در نمایش، CLS را به‌طور کامل حذف می‌کند. برای چت آنلاین، معمولاً این عناصر در گوشهٔ پایین صفحه می‌آیند و از ابتدا با فضای رزرو‌شده هستند — که مشکل CLS را نمی‌سازند.

رویکرد سوم: محتوای «توصیه‌شده» با ارتفاع ثابت

بلوک‌های «مطالب مرتبط» و «محصولات پیشنهادی» که با AJAX بارگذاری می‌شوند، اگر ارتفاع مشخصی نداشته باشند، باعث پرش می‌شوند. راه‌حل: ارتفاع کلی بلوک را رزرو کنید و درون آن، محتوای تازه را جای دهید:

.related-posts {
  min-height: 320px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

یک نکتهٔ ظریف: در بعضی صفحات، محتوای توصیه‌شده با تعداد نامشخص بارگذاری می‌شود. اگر تعداد کارت‌ها متغیر است، ارتفاع بلوک را طوری تنظیم کنید که با بیشترین حالت ممکن هم‌خوانی داشته باشد. این یعنی در مواردی که تعداد کم است، کمی فضای خالی می‌بینید، ولی CLS پایین می‌ماند.

تکنیک پنجم: انتخاب قالب و افزونه‌های CLS-دوست

در پروژه‌های زیادی دیده‌ام که ریشهٔ CLS، خودِ قالب یا افزونه است — نه محتوای سایت. بعضی قالب‌ها به‌طور سیستماتیک، تصاویر بدون ابعاد تولید می‌کنند، فونت‌های سنگین با fallback نامناسب بارگذاری می‌کنند، یا اسکریپت‌های خودشان را در نقاط حساس صفحه تزریق می‌کنند.

سه نشانهٔ یک قالب CLS-دوست:

تصاویر همیشه با ابعاد در HTML تولید می‌شوند.
فونت‌ها با preload و font-display: swap بارگذاری می‌شوند.
هیچ اسکریپت شخص ثالث به‌صورت خودکار تزریق نمی‌شود.

در انتخاب قالب، پیش از خرید یا نصب، یک بار صفحهٔ نمونه را در PageSpeed Insights بررسی کنید. اگر CLS بالا بود، احتمالاً در پروژهٔ شما هم بالا خواهد بود. معیارهای انتخاب قالب CLS-دوست در Core Web Vitals چیست و بهبود Core Web Vitals در وردپرس شرح داده شده است. برای قالب‌های سبک، مروری بر Hello Elementor در برابر Neve تفاوت‌های کاربردی را نشان می‌دهد.

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

اشتباهات رایج در مسیر کاهش CLS

سه اشتباه که در پروژه‌های واقعی زیاد دیده‌ام و هر کدام می‌تواند تلاش برای کاهش CLS را بی‌اثر کند:

اتکای کامل به افزونه: بعضی مدیران سایت، با نصب یک افزونهٔ «بهینه‌سازی Core Web Vitals» انتظار حل مشکل را دارند. واقعیت این است که CLS یک مشکل ساختاری است و ریشهٔ آن در محتوا، قالب یا افزونهٔ ثالث است؛ افزونه فقط می‌تواند بخشی از مشکل را بپوشاند، نه حل کند.
نادیده‌گرفتن داده‌های میدانی: اگر در PageSpeed آزمایشگاهی CLS ۰/۰۵ را ببینید ولی در CrUX ۰/۲ را، احتمالاً در بعضی صفحات، محتوای دینامیک کاربران واقعی مشکل ایجاد می‌کند. همیشه به داده‌های میدانی اعتماد کنید.
اصلاح مقطعی به‌جای ساختاری: مثلاً افزودن width و height به یک تصویر خاص، ولی رها‌کردن دیگر تصاویر. CLS یک معیار انباشتی است؛ یک پرش بزرگ می‌تواند عدد نهایی را خراب کند. اصلاح باید سیستماتیک باشد.

یک اشتباه ظریف چهارم: بلاک‌کردن اسکریپت‌ها با هدف کاهش CLS. بعضی توسعه‌دهندگان، برای حذف تأثیر تبلیغات روی CLS، اسکریپت‌ها را کاملاً بلاک می‌کنند. این کار ممکن است CLS را بهبود دهد، ولی تجربهٔ کاربری را در جای دیگر (مثلاً عدم نمایش تبلیغات) خراب می‌کند و اثر معکوس روی درآمد دارد. راه درست، رزرو فضا است، نه حذف.

نگاه زیر پوست مرورگر: مکانیزم‌شناسی CLS

برای مهندسانی که به لایه‌های زیرین علاقه دارند، فهم چگونگی محاسبهٔ CLS در سطح مرورگر کلید بهتر تصمیم‌گیری است. مرورگر برای هر گره (Node) قابل مشاهده در درخت DOM، یک «Start Position» و «End Position» نگه می‌دارد. اگر بین دو فریم متوالی، موقعیت گره تغییر کند، آن جابه‌جایی در Layout Instability API ثبت می‌شود. این API که امروز بخشی از استاندارد Performance Timeline است، می‌تواند از JavaScript خوانده شود:

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    if (!entry.hadRecentInput) {
      console.log('Layout shift:', entry.value);
    }
  }
}).observe({ type: 'layout-shift', buffered: true });

سه نکتهٔ پیشرفته که در لایهٔ مهندسی اهمیت دارند:

فیلتر hadRecentInput: این ویژگی از ثبت پرش‌هایی که به‌دلیل تعامل کاربر رخ می‌دهند جلوگیری می‌کند. یعنی اگر کاربر روی یک تب کلیک کند و محتوای زیر آن تب جابه‌جا شود، CLS ثبت نمی‌شود. همین موضوع توضیح می‌دهد چرا CLS بالا در یک صفحه ممکن است در تست دستی مشاهده نشود.
پنجرهٔ پنج‌ثانیه‌ای: طبق استاندارد، بدترین خوشهٔ جابه‌جایی در بازهٔ پنج ثانیه‌ای محاسبه می‌شود. یعنی CLS دو پرش پنج ثانیه فاصله دارند، مستقل محاسبه می‌شوند و هرکدام جدا می‌توانند عدد را خراب کنند. این نکته یعنی نمی‌توانید به «فقط یک پرش» اکتفا کنید؛ هر پرش مهم است.
تأثیر انیمیشن‌های CSS: انیمیشن‌های transform و opacity روی CLS اثر نمی‌گذارند، چون در کلاس کامپوزیتور (Compositor) رندر می‌شوند و فریم‌های چیدمان را تحریک نمی‌کنند. اما انیمیشن‌های روی width، height، top یا left، مستقیم روی CLS اثر می‌گذارند. اگر انیمیشنی برای اسلایدر، کاروسل یا گالری دارید، از transform استفاده کنید، نه از width.

یک نکتهٔ معماری تکمیلی که در پروژه‌های بزرگ ارزش زیادی دارد: در سایت‌هایی که از Server-Side Rendering (رندر سمت سرور) استفاده می‌کنند، CLS معمولاً پایین‌تر است چون HTML کامل از ابتدا رندر می‌شود. برعکس، در سایت‌هایی که با JavaScript Framework (مثل React یا Vue) کار می‌کنند، CLS شایع‌تر است چون بخش بزرگی از محتوا بعد از رندر اولیه تزریق می‌شود. مدیریت این تفاوت، بخشی از معماری فرانت‌اند است که در فرانت‌اند چیست شرح داده‌ام. اگر در حال بهینه‌سازی سایت هستید، توصیه می‌کنم پیش از هر اقدامی، یک بار مسیر تشخیص گام‌به‌گام را در رابطه Core Web Vitals و نرخ تبدیل و چگونه Core Web Vitals را بهبود دهیم مرور کنید؛ ترکیب آن‌ها با تکنیک‌های این مقاله، مسیر کاملی برای بهینه‌سازی تجربه کاربری می‌سازد. برای سایت‌هایی که مخاطبشان موبایل است، بهبود Core Web Vitals در موبایل نکات اختصاصی‌تری دارد، چون CLS در موبایل با دسکتاپ تفاوت‌های ساختاری دارد.

خط بسته‌شدن پروندهٔ CLS

کاهش CLS، یکی از آن کارهایی است که در نگاه اول پیچیده به نظر می‌رسد، ولی پس از شناخت علت‌ها و تکنیک‌ها، در اکثر سایت‌ها در کمتر از یک روز قابل اجرا است. پنج تکنیکی که در این مقاله مرور کردیم — رزرو ابعاد تصاویر، مهار فونت‌ها، رزرو فضای تبلیغات، مدیریت محتوای دینامیک، و انتخاب قالب و افزونه‌های مناسب — تقریباً تمام CLS های شایع را پوشش می‌دهند. کلید اصلی، اندازه‌گیری مداوم و اصلاح ساختاری است، نه مقطعی. اگر در پروژه‌ای با چالش خاصی مواجه شده‌اید — مثلاً CLS بالا در یک صفحهٔ خاص که با هیچ‌کدام از این پنج تکنیک حل نشد — تجربه‌تان را در دیدگاه بنویسید. این نوع دادهٔ واقعی، برای خوانندهٔ بعدی که در همان موقعیت ایستاده، از هر توصیهٔ عمومی ارزشمندتر است. 📐