Cumulative Layout Shift یا CLS یکی از معیارهای Core Web Vitals گوگل است که پایداری بصری صفحات وب را اندازه‌گیری می‌کند. به زبان ساده، CLS نشان می‌دهد عناصر قابل مشاهده صفحه تا چه اندازه به‌صورت غیرمنتظره جابه‌جا می‌شوند؛ مثلاً وقتی کاربر می‌خواهد روی یک دکمه کلیک کند اما با بارگذاری تصویر یا تبلیغ، دکمه ناگهان به محل دیگری منتقل می‌شود.
CLS فقط به سرعت بارگذاری اولیه مربوط نیست. جابه‌جایی‌های غیرمنتظره‌ای که بعد از بارگذاری صفحه و هنگام استفاده از آن رخ می‌دهند نیز ممکن است در این معیار تأثیر داشته باشند. به همین دلیل، برای بهینه‌سازی CLS باید هم ساختار صفحه و هم رفتار واقعی آن را در دستگاه‌ها و شرایط مختلف بررسی کرد.
در این راهنما یاد می‌گیرید CLS چیست، چه امتیازی خوب محسوب می‌شود، چه عواملی آن را افزایش می‌دهند، چگونه علت اصلی مشکل را پیدا کنید و چطور CLS سایت وردپرسی خود را کاهش دهید.
CLS چیست و چه چیزی را اندازه می‌گیرد؟
CLS مخفف Cumulative Layout Shift است و میزان بی‌ثباتی بصری صفحه را در طول چرخه عمر آن می‌سنجد. این معیار بررسی می‌کند که عناصر قابل مشاهده، بدون انتظار کاربر، چقدر جابه‌جا شده‌اند و این جابه‌جایی چه مقدار از فضای صفحه را تحت تأثیر قرار داده است.
فرض کنید در حال خواندن یک مقاله هستید. ابتدا عنوان و متن نمایش داده می‌شوند، اما چند لحظه بعد تصویری در بالای متن بارگذاری می‌شود. چون فضای تصویر از قبل مشخص نشده است، متن به سمت پایین حرکت می‌کند. این اتفاق نمونه‌ای از Layout Shift است.
یا تصور کنید در یک فروشگاه اینترنتی قصد دارید روی دکمه «افزودن به سبد خرید» کلیک کنید، اما با ظاهر شدن یک بنر تبلیغاتی، دکمه جابه‌جا می‌شود و روی گزینه دیگری کلیک می‌کنید. چنین تجربه‌ای می‌تواند آزاردهنده باشد و حتی باعث اشتباه کاربر در انجام یک عملیات شود.
بنابراین، CLS به این پرسش پاسخ می‌دهد: آیا محتوای صفحه در زمان استفاده در موقعیت قابل پیش‌بینی باقی می‌ماند یا بدون انتظار کاربر جابه‌جا می‌شود؟
Layout Shift یا جابه‌جایی چیدمان چیست؟
Layout Shift زمانی رخ می‌دهد که موقعیت شروع یک عنصر قابل مشاهده، از یک فریم به فریم بعدی تغییر کند. برای مثال، اگر یک تصویر جدید بالای پاراگراف اضافه شود و پاراگراف و دکمه‌های زیر آن را به پایین براند، عناصر قبلی دچار جابه‌جایی شده‌اند.
البته هر تغییر ظاهری الزاماً Layout Shift محسوب نمی‌شود. اگر عنصری به صفحه اضافه شود یا اندازه یک عنصر تغییر کند، اما این اتفاق باعث جابه‌جایی عناصر قابل مشاهده دیگر نشود، لزوماً Layout Shift رخ نداده است.
همچنین تغییراتی که در نتیجه تعامل آگاهانه کاربر اتفاق می‌افتند، با جابه‌جایی‌های غیرمنتظره یکسان نیستند. برای مثال، باز شدن یک منوی کشویی پس از کلیک کاربر معمولاً رفتار مورد انتظار است. در مقابل، نمایش ناگهانی یک بنر بدون اقدام کاربر می‌تواند باعث ثبت Layout Shift شود.
امتیاز خوب CLS چقدر است؟
طبق آستانه‌های رسمی Core Web Vitals، امتیاز CLS در سه محدوده ارزیابی می‌شود:
| امتیاز CLS | وضعیت | تفسیر |
|---|---|---|
| ۰ تا ۰٫۱ | خوب | پایداری بصری مناسب است. |
| بیشتر از ۰٫۱ تا ۰٫۲۵ | نیازمند بهبود | بخشی از جابه‌جایی‌ها باید اصلاح شوند. |
| بیشتر از ۰٫۲۵ | ضعیف | جابه‌جایی‌های صفحه بیش از حد مطلوب هستند. |
برای ارزیابی تجربه واقعی کاربران، هدف این است که CLS در صدک ۷۵ بازدیدهای صفحه، برابر یا کمتر از ۰٫۱ باشد. این داده‌ها باید به‌صورت جداگانه برای موبایل و دسکتاپ بررسی شوند؛ زیرا ممکن است وضعیت صفحه در این دو گروه متفاوت باشد.
برای مثال، CLS برابر با ۰٫۰۴ در محدوده خوب قرار می‌گیرد، مقدار ۰٫۱۶ نیازمند بهبود است و مقدار ۰٫۳۱ وضعیت ضعیفی دارد. CLS برخلاف معیارهایی مانند LCP، واحد زمانی ندارد و به‌صورت یک امتیاز عددی گزارش می‌شود.
CLS چگونه محاسبه می‌شود؟
برای محاسبه امتیاز یک Layout Shift، مرورگر دو عامل اصلی را در نظر می‌گیرد:
- Impact Fraction: سهمی از فضای قابل مشاهده صفحه که تحت تأثیر جابه‌جایی قرار گرفته است.
- Distance Fraction: فاصله‌ای که عناصر جابهجاشده نسبت به ابعاد صفحه حرکت کرده‌اند.
فرمول امتیاز یک جابه‌جایی به این صورت است:
Layout Shift Score = Impact Fraction × Distance Fractionدر نتیجه، هرچه بخش بزرگ‌تری از صفحه تحت تأثیر قرار بگیرد یا عناصر مسافت بیشتری جابه‌جا شوند، امتیاز آن جابه‌جایی معمولاً بیشتر خواهد بود.
نکته مهم این است که CLS فعلی، مجموع ساده تمام جابه‌جایی‌های طول عمر صفحه نیست. این معیار بر اساس بزرگ‌ترین مجموعه متوالی از جابه‌جایی‌های ثبت‌شده در یک Session Window محاسبه می‌شود. در این پنجره، فاصله زمانی بین جابه‌جایی‌های متوالی کمتر از یک ثانیه است و طول کل پنجره حداکثر پنج ثانیه خواهد بود.
این روش کمک می‌کند دوره‌هایی که چند جابه‌جایی در فاصله زمانی کوتاه اتفاق می‌افتند، به‌صورت یک مجموعه ارزیابی شوند.
چه عواملی باعث افزایش CLS می‌شوند؟
در بیشتر موارد، CLS بالا به این دلیل اتفاق می‌افتد که مرورگر پیش از نمایش محتوا، فضای موردنیاز یک عنصر را نمی‌داند یا ساختار صفحه در زمان اجرا به‌صورت غیرمنتظره تغییر می‌کند. مهم‌ترین عوامل عبارت‌اند از تصاویر بدون ابعاد مشخص، تبلیغات، ویدئوها و iframeها، فونت‌ها و محتوای پویا.
۱. تصاویر و ویدئوهای بدون ابعاد مشخص
اگر مرورگر پیش از دانلود تصویر نتواند فضای موردنیاز آن را تشخیص دهد، ممکن است پس از بارگذاری تصویر، ارتفاع صفحه تغییر کند و عناصر پایین‌تر جابه‌جا شوند.
نمونه نامناسب:
<img src="mountain.jpg" alt="کوهستان">در این مثال، ابعاد تصویر در HTML مشخص نشده است. بهتر است عرض و ارتفاع واقعی تصویر را تعیین کنید:
<img
src="mountain.jpg"
alt="کوهستان"
width="1200"
height="800"
loading="lazy">برای تصاویر واکنش‌گرا می‌توانید در کنار تعیین ابعاد، از CSS زیر استفاده کنید:
img {
max-width: 100%;
height: auto;
}ویژگی‌های width و height به مرورگر کمک می‌کنند نسبت تصویر را از ابتدا تشخیص دهد. در صورت نیاز، استفاده از ویژگی CSS به نام aspect-ratio نیز راهکار مناسبی برای رزرو فضای تصویر است.
در نهایت ، بهینه سازی تصاویر می تواند تاثیر مستقیم در cls داشته باشد.
۲. تبلیغات، iframe و محتوای Embed
تبلیغات، ویدئوهای خارجی، نقشه‌ها و پست‌های شبکه‌های اجتماعی ممکن است پس از نمایش اولیه صفحه بارگذاری شوند. اگر فضای این عناصر از قبل در چیدمان صفحه مشخص نشده باشد، محتواهای اطراف آن‌ها جابه‌جا می‌شوند.
برای مثال، اگر یک تبلیغ در بالای مقاله نمایش داده می‌شود، بهتر است فضای مشخصی برای آن در نظر گرفته شود. همین اصل درباره ویدئو و iframe نیز صدق می‌کند.
نمونه‌ای از تعیین ابعاد برای iframe:
<iframe
src="..."
width="560"
height="315"
loading="lazy"
title="ویدئوی آموزشی">
</iframe>اگر اندازه محتوای خارجی ثابت نیست، می‌توانید از یک ظرف با حداقل ارتفاع مناسب یا نسبت تصویر مشخص استفاده کنید. البته فضای رزروشده باید با ابعاد واقعی محتوا هماهنگ باشد؛ فضای خالی بیش از حد نیز می‌تواند تجربه کاربری را تضعیف کند.
۳. محتوای پویا و بارگذاری دیرهنگام
گاهی اسکریپت‌های سایت پس از بارگذاری اولیه، عناصر جدیدی را به صفحه اضافه می‌کنند؛ مانند بنر تخفیف، نوار اطلاع‌رسانی، پیشنهاد محصول، فرم اشتراک یا پیام‌های تبلیغاتی.
اگر این عناصر در بالای محتوا قرار بگیرند و فضای آن‌ها از ابتدا رزرو نشده باشد، احتمال جابه‌جایی بخش‌های دیگر افزایش می‌یابد. بهتر است فضای لازم را از قبل پیش‌بینی کنید یا در موارد مناسب، عنصر را به‌صورت Overlay نمایش دهید تا چیدمان اصلی صفحه تغییر نکند.
همچنین اگر تبلیغی نمایش داده نشد، بهتر است فضای رزروشده آن بدون برنامه حذف نشود؛ زیرا جمع شدن ناگهانی همان فضا نیز می‌تواند باعث جابه‌جایی عناصر شود.
۴. فونت‌های وب و فونت فارسی
فونت‌های وب نیز ممکن است در برخی شرایط باعث افزایش CLS شوند. برای مثال، مرورگر ابتدا متن را با یک فونت جایگزین نمایش می‌دهد و بعد از دانلود فونت اصلی، اندازه حروف یا طول خطوط تغییر می‌کند. این تغییر می‌تواند ارتفاع پاراگراف‌ها و موقعیت عناصر پایین‌تر را تحت تأثیر قرار دهد.
این مسئله در سایت‌های فارسی نیز اهمیت دارد؛ زیرا تغییر فونت، وزن یا ویژگی‌های حروف ممکن است باعث شکستن دوباره خطوط شود. برای کاهش این مشکل:
- فقط وزن‌ها و فایل‌های فونت موردنیاز را بارگذاری کنید.
- از فونت جایگزینی استفاده کنید که ابعاد آن تا حد امکان به فونت اصلی نزدیک باشد.
- ویژگی‌هایی مانند
font-displayرا متناسب با نیاز سایت تنظیم کنید. - پس از تغییر فونت یا قالب، CLS را دوباره در موبایل و دسکتاپ اندازه‌گیری کنید.
۵. انیمیشن‌ها و تغییرات CSS
همه انیمیشن‌ها باعث CLS نمی‌شوند. بااین‌حال، انیمیشن‌هایی که موقعیت یا ابعاد عناصر را به‌گونه‌ای تغییر می‌دهند که چیدمان صفحه دوباره محاسبه شود، می‌توانند مشکلاتی ایجاد کنند.
در بسیاری از سناریوها، استفاده از ویژگی‌هایی مانند transform برای متحرک‌سازی عناصر می‌تواند مناسب‌تر از تغییر مکرر ویژگی‌هایی مانند top و left باشد. البته باید رفتار واقعی صفحه را بررسی کرد؛ انتخاب یک ویژگی CSS به‌تنهایی تضمین نمی‌کند که CLS همیشه کاهش یابد.
آیا Lazy Loading باعث افزایش CLS می‌شود؟
خود Lazy Loading الزاماً باعث افزایش CLS نمی‌شود. این روش برای بارگذاری دیرتر تصاویر و منابعی استفاده می‌شود که در ابتدا به آن‌ها نیاز نیست. مشکل زمانی ایجاد می‌شود که فضای لازم برای محتوای بارگذاری‌شونده از قبل مشخص نشده باشد.
برای مثال، اگر تصویر پایین صفحه هنگام اسکرول کاربر بارگذاری شود اما ارتفاع یا نسبت تصویر آن مشخص نباشد، ممکن است محتوای اطراف جابه‌جا شود.
بنابراین، برای استفاده صحیح از Lazy Loading باید فضای تصویر یا عنصر را پیش از بارگذاری رزرو کنید. برای تصاویر اصلی بالای صفحه نیز نباید بدون بررسی، بارگذاری را به تأخیر انداخت؛ زیرا این کار ممکن است معیارهای دیگری مانند LCP را تحت تأثیر قرار دهد.
CLS چه تأثیری بر تجربه کاربری و سئو دارد؟
CLS مستقیماً با پایداری بصری صفحه ارتباط دارد. جابه‌جایی ناگهانی محتوا می‌تواند تمرکز کاربر را مختل کند، خواندن متن را دشوارتر سازد و باعث کلیک اشتباه روی لینک‌ها یا دکمه‌ها شود. این مسئله در فروشگاه‌های اینترنتی، فرم‌های ثبت‌نام و صفحات پرداخت اهمیت بیشتری دارد؛ زیرا جابه‌جایی عناصر ممکن است در روند انجام یک عملیات اختلال ایجاد کند.
از نظر سئو نیز CLS یکی از سه معیار Core Web Vitals است. این معیار در ارزیابی تجربه صفحه اهمیت دارد، اما CLS خوب به‌تنهایی رتبه بالا در گوگل را تضمین نمی‌کند. کیفیت محتوا، ارتباط صفحه با نیاز کاربر، وضعیت فنی سایت و سایر عوامل رتبه‌بندی همچنان اهمیت دارند.
بنابراین، بهینه‌سازی CLS باید بخشی از برنامه جامع سئو و بهبود تجربه کاربری باشد؛ نه صرفاً تلاشی برای گرفتن یک امتیاز سبز در ابزارهای تست.
تفاوت CLS و LCP چیست؟
CLS و LCP هر دو از معیارهای Core Web Vitals هستند، اما جنبه‌های متفاوتی از تجربه کاربر را بررسی می‌کنند.
| معیار | چه چیزی را می‌سنجد؟ | واحد |
|---|---|---|
| CLS | پایداری بصری و جابه‌جایی ناخواسته عناصر | بدون واحد |
| LCP | زمان نمایش بزرگ‌ترین محتوای قابل مشاهده در صفحه | ثانیه |
برای مثال، ممکن است محتوای اصلی یک صفحه سریع نمایش داده شود، اما چند لحظه بعد تبلیغات و تصاویر باعث جابه‌جایی آن شوند. در چنین شرایطی ممکن است LCP مناسب باشد، اما CLS ضعیف باقی بماند. در مقابل، صفحه‌ای ممکن است چیدمان ثابتی داشته باشد اما محتوای اصلی آن دیر نمایش داده شود.
به همین دلیل، بررسی این دو معیار باید جداگانه انجام شود.
چگونه CLS سایت را اندازه‌گیری کنیم؟
برای بررسی CLS باید از ابزارهایی استفاده کنید که هم وضعیت کلی صفحه و هم جزئیات جابه‌جایی‌ها را نشان دهند. ابزارهای اصلی عبارت‌اند از PageSpeed Insights، Chrome DevTools و Lighthouse.
۱. بررسی CLS با PageSpeed Insights
وارد ابزار PageSpeed Insights شوید و نشانی صفحه موردنظر را وارد کنید. گزارش این ابزار می‌تواند اطلاعات مربوط به تجربه واقعی کاربران و نتایج آزمایشگاهی را نمایش دهد؛ البته نمایش داده‌های واقعی به در دسترس بودن داده کافی برای صفحه یا سایت بستگی دارد.
در گزارش، وضعیت CLS را هم در بخش داده‌های کاربران واقعی و هم در بخش تشخیص‌های آزمایشگاهی بررسی کنید. در صورت وجود داده کافی، وضعیت موبایل و دسکتاپ را نیز جداگانه مقایسه کنید.
اگر CLS گزارش‌شده برای کاربران واقعی با نتیجه آزمایشگاهی متفاوت باشد، نباید فوراً نتیجه بگیرید که یکی از گزارش‌ها اشتباه است. ممکن است جابه‌جایی‌ها پس از بارگذاری اولیه، هنگام اسکرول یا در شرایطی رخ دهند که تست آزمایشگاهی آن‌ها را بازتولید نکرده است.
۲. بررسی مشکل با Chrome DevTools
برای پیدا کردن علت جابه‌جایی‌ها، صفحه را در مرورگر Chrome باز کنید و DevTools را اجرا کنید. در بخش Performance، یک ضبط جدید انجام دهید و سپس صفحه را بارگذاری یا با آن تعامل کنید.
در گزارش Performance، بخش Layout Shifts را بررسی کنید. با انتخاب رکوردهای مربوط به جابه‌جایی می‌توانید عناصر تحت تأثیر و امتیاز آن‌ها را مشاهده کنید. بهتر است ابتدا بزرگ‌ترین مجموعه جابه‌جایی‌ها را بررسی کنید؛ زیرا اصلاح آن ممکن است بیشترین تأثیر را بر نتیجه داشته باشد.
یک نکته مهم: عنصری که در گزارش به‌عنوان عنصر جابهجاشده معرفی می‌شود، همیشه عامل اصلی مشکل نیست. ممکن است یک تبلیغ یا تصویر جدید در بالای آن اضافه شده باشد و باعث حرکت عنصر موردنظر شده باشد. بنابراین، فقط عنصر متحرک را اصلاح نکنید؛ علت ایجاد جابه‌جایی را پیدا کنید.
۳. بررسی CLS با Lighthouse
Lighthouse می‌تواند برخی مشکلات CLS هنگام بارگذاری اولیه را شناسایی کند؛ برای مثال، تصاویری که ابعاد مشخص ندارند یا عناصری که بیشترین سهم را در جابه‌جایی صفحه داشته‌اند.
بااین‌حال، Lighthouse به‌تنهایی برای تشخیص تمام مشکلات CLS کافی نیست؛ زیرا بعضی جابه‌جایی‌ها فقط بعد از اسکرول، تعامل کاربر یا بارگذاری محتوای خارجی اتفاق می‌افتند. در این موارد، بررسی تعاملی صفحه با DevTools اهمیت دارد.
تفاوت CLS آزمایشگاهی و CLS واقعی کاربران چیست؟
داده آزمایشگاهی در محیطی کنترل‌شده تولید می‌شود؛ اما داده واقعی کاربران از تجربه بازدیدکنندگان در شرایط گوناگون به دست می‌آید. به همین دلیل ممکن است نتیجه این دو روش یکسان نباشد.
برای مثال، در تست آزمایشگاهی ممکن است تصویر از قبل در حافظه مرورگر ذخیره شده باشد، فونت سریع بارگذاری شود یا تبلیغی نمایش داده نشود. اما کاربر واقعی ممکن است با اینترنت کندتر، دستگاه متفاوت یا محتوای شخصی‌سازی‌شده روبه‌رو شود.
PageSpeed Insights در صورت موجود بودن داده کافی، تجربه واقعی کاربران را از طریق داده‌های Chrome UX Report نمایش می‌دهد. این داده‌ها معمولاً بازه ۲۸ روزه را پوشش می‌دهند و برای ارزیابی وضعیت واقعی سایت مفید هستند.
بهترین روش این است که از داده واقعی برای تشخیص اهمیت مشکل استفاده کنید و از ابزارهای آزمایشگاهی و DevTools برای پیدا کردن علت و آزمایش راهکارها کمک بگیرید.
چگونه CLS سایت را کاهش دهیم؟
برای کاهش CLS، ابتدا باید عامل اصلی جابه‌جایی را شناسایی کنید. سپس اصلاحات را بر اساس شدت مشکل و تعداد صفحاتی که تحت تأثیر قرار گرفته‌اند، اولویت‌بندی کنید.
۱. برای تصاویر و ویدئوها فضا رزرو کنید
عرض و ارتفاع تصاویر را در HTML مشخص کنید یا با استفاده از aspect-ratio فضای لازم را از قبل در اختیار مرورگر قرار دهید. اگر از تصاویر واکنش‌گرا استفاده می‌کنید، نسبت تصویر را به‌گونه‌ای تنظیم کنید که در اندازه‌های مختلف صفحه حفظ شود.
.image-box {
aspect-ratio: 16 / 9;
overflow: hidden;
}
.image-box img {
width: 100%;
height: 100%;
object-fit: cover;
}این نمونه برای حالتی مناسب است که می‌خواهید تصویر داخل ظرفی با نسبت ۱۶ به ۹ نمایش داده شود. اگر تصویر باید بدون برش کامل دیده شود، مقدار object-fit و ساختار ظرف را متناسب با نیاز خود تنظیم کنید.
۲. فضای تبلیغات را از قبل مشخص کنید
اگر در صفحه از تبلیغات استفاده می‌کنید، ظرفی با ابعاد یا حداقل ارتفاع مناسب برای آن در نظر بگیرید. این کار کمک می‌کند محتوای اصلی هنگام بارگذاری تبلیغ جابه‌جا نشود.
برای تبلیغات با اندازه متغیر، فضای رزروشده باید با اندازه‌های واقعی تبلیغ هماهنگ باشد. همچنین از حذف ناگهانی فضای خالی در صورت نمایش ندادن تبلیغ خودداری کنید؛ مگر اینکه ساختار صفحه طوری طراحی شده باشد که حذف آن باعث جابه‌جایی محتوا نشود.
۳. از تزریق ناگهانی محتوا جلوگیری کنید
بنرهای تخفیف، نوارهای اطلاع‌رسانی و فرم‌های اشتراک نباید بدون پیش‌بینی فضای لازم به بالای صفحه اضافه شوند. در صورت امکان، فضای موردنیاز را از ابتدا در ساختار صفحه در نظر بگیرید یا عنصر را به‌صورت لایه‌ای روی محتوا نمایش دهید.
اگر محتوای جدید باید در جریان تعامل کاربر اضافه شود، از ساختاری استفاده کنید که جایگاه سایر عناصر را تا حد امکان ثابت نگه دارد.
۴. فونت‌ها را بهینه بارگذاری کنید
فونت‌های غیرضروری و وزن‌های متعدد را حذف کنید و تفاوت ابعادی فونت جایگزین با فونت اصلی را کاهش دهید. پس از تغییر تنظیمات فونت، صفحه را در شرایط مختلف بررسی کنید؛ زیرا تغییر فونت ممکن است در برخی صفحات، خطوط متن را دوباره بشکند و چیدمان را تغییر دهد.
۵. انیمیشن‌ها و تغییرات چیدمان را بررسی کنید
اگر عناصر با تغییر ویژگی‌های موقعیت یا ابعاد متحرک می‌شوند، بررسی کنید که آیا این تغییرات باعث جابه‌جایی عناصر دیگر می‌شوند یا خیر. در بسیاری از موارد، استفاده از transform برای انیمیشن مناسب‌تر است؛ اما انتخاب روش نهایی باید بر اساس رفتار واقعی صفحه انجام شود.
چگونه CLS را در وردپرس کاهش دهیم؟
در وردپرس، CLS بالا ممکن است به قالب، صفحه‌ساز، افزونه‌ها، تبلیغات، تصاویر، فونت‌ها یا اسکریپت‌های خارجی مربوط باشد. صرفاً نصب یک افزونه بهینه‌سازی سرعت لزوماً مشکل را برطرف نمی‌کند؛ ابتدا باید علت جابه‌جایی مشخص شود.
برای عیب‌یابی یک سایت وردپرسی، این مراحل را دنبال کنید:
- صفحه‌های مشکل‌دار را مشخص کنید: با PageSpeed Insights و گزارش‌های Core Web Vitals در Google Search Console بررسی کنید کدام صفحات یا گروه‌های صفحه مشکل دارند.
- صفحه را در شرایط واقعی آزمایش کنید: موبایل و دسکتاپ را جداگانه بررسی کنید و صفحه را پس از بارگذاری، هنگام اسکرول و در زمان نمایش تبلیغات یا پاپ‌آپ‌ها مشاهده کنید.
- عامل جابه‌جایی را پیدا کنید: با Chrome DevTools مشخص کنید کدام عنصر حرکت کرده و چه چیزی باعث آن شده است.
- قالب و افزونه‌های مرتبط را بررسی کنید: اگر مشکل پس از نصب افزونه یا تغییر قالب ایجاد شده است، تغییرات اخیر را بررسی کنید. در محیط آزمایشی می‌توانید افزونه‌ها را به‌صورت کنترل‌شده غیرفعال کنید تا عامل مشکل مشخص شود.
- اصلاح را آزمایش کنید: ابعاد تصاویر، فضای تبلیغات، فونت‌ها یا رفتار ویجت‌ها را اصلاح کرده و دوباره تست بگیرید.
- نتیجه را در داده واقعی پیگیری کنید: بهبود تست آزمایشگاهی نشانه مفیدی است، اما برای ارزیابی تجربه واقعی کاربران باید داده‌های میدانی را نیز دنبال کنید.
در سایت‌هایی که با Elementor یا سایر صفحه‌سازها ساخته شده‌اند، خود صفحه‌ساز لزوماً علت CLS نیست. مشکل ممکن است از ویجت‌های پویا، فونت‌ها، تصاویر یا اسکریپت‌های جانبی باشد. به‌جای حذف عجولانه ابزارها، باید عامل واقعی جابه‌جایی شناسایی شود.
یک مثال عملی برای رفع CLS
فرض کنید در صفحه اصلی یک فروشگاه، بنری با کد زیر قرار گرفته است:
<img src="banner.jpg" alt="تخفیف ویژه">مرورگر هنگام نمایش اولیه صفحه، فضای دقیقی برای تصویر در اختیار ندارد. پس از دانلود بنر، ارتفاع آن مشخص می‌شود و محتوای پایین‌تر به سمت پایین حرکت می‌کند.
اگر بنر نسبت تصویر ۱۶ به ۹ داشته باشد، می‌توانید فضای آن را پیش از بارگذاری مشخص کنید:
<img
src="banner.jpg"
alt="تخفیف ویژه"
width="1200"
height="675">و برای نمایش واکنش‌گرا از CSS زیر استفاده کنید:
.banner {
aspect-ratio: 16 / 9;
}
.banner img {
display: block;
width: 100%;
height: auto;
}با این روش، مرورگر می‌تواند فضای موردنیاز بنر را از ابتدا محاسبه کند و احتمال جابه‌جایی ناشی از بارگذاری تصویر کاهش می‌یابد. البته اگر ابعاد واقعی تصویر با ابعاد تعریف‌شده مطابقت نداشته باشد یا عناصر دیگری باعث جابه‌جایی شوند، باید آن عوامل را نیز بررسی کنید.
چرا CLS در ابزارهای مختلف متفاوت است؟
اگر امتیاز CLS در PageSpeed Insights با نتیجه Lighthouse یا بررسی دستی در Chrome DevTools تفاوت دارد، لزوماً خطایی در ابزارها وجود ندارد. ممکن است هر ابزار شرایط متفاوتی را اندازه‌گیری کند.
- داده آزمایشگاهی: در شرایط کنترل‌شده و معمولاً طی بارگذاری اولیه جمع‌آوری می‌شود.
- داده کاربران واقعی: رفتار کاربران را در شرایط مختلف و در طول بازدید ثبت می‌کند.
- بررسی دستی با DevTools: امکان بازتولید و مشاهده بعضی جابه‌جایی‌ها در زمان تعامل با صفحه را فراهم می‌کند.
برای مثال، اگر CLS آزمایشگاهی خوب باشد اما داده واقعی ضعیف باشد، بررسی محتوای بارگذاری‌شونده هنگام اسکرول، تبلیغات، فونت‌ها و ویجت‌های خارجی می‌تواند مفید باشد. همچنین باید مطمئن شوید که گزارش مربوط به همان URL است؛ زیرا در برخی موارد داده گزارش برای کل مبدأ سایت نمایش داده می‌شود.
پیشنهاد مطالعه : Interaction to Next Paint (INP) چیست؟
آیا CLS صفر بهترین حالت است؟
از نظر تجربه کاربری، کاهش جابه‌جایی‌های غیرمنتظره هدف مناسبی است؛ اما معیار رسمی وضعیت خوب CLS برابر با ۰٫۱ یا کمتر است. بنابراین، اگر CLS صفحه ۰٫۰۸ باشد، معمولاً بهتر است پیش از صرف زمان زیاد برای رساندن آن به صفر، مشکلات مهم‌تر تجربه کاربر را بررسی کنید.
اولویت بهینه‌سازی باید بر اساس شدت مشکل، تعداد کاربران تحت تأثیر و اثر اصلاح بر تجربه واقعی تعیین شود؛ نه فقط بر اساس یک عدد در ابزار تست.
چک‌لیست عملی کاهش CLS
| عامل | اقدام پیشنهادی |
|---|---|
| تصاویر | تعیین width و height یا رزرو فضا با aspect-ratio |
| ویدئو و iframe | مشخص کردن ابعاد و فضای نمایش |
| تبلیغات | رزرو فضای متناسب با اندازه تبلیغ |
| فونت‌ها | کاهش تغییر ابعاد متن هنگام بارگذاری فونت اصلی |
| محتوای پویا | پیش‌بینی فضای موردنیاز یا استفاده از Overlay در موارد مناسب |
| انیمیشن‌ها | بررسی تغییر موقعیت و ابعاد عناصر هنگام اجرا |
| وردپرس و افزونه‌ها | شناسایی عامل واقعی به‌جای نصب بی‌هدف افزونه‌های بیشتر |
| آزمایش | استفاده از PageSpeed Insights و Chrome DevTools |
| داده واقعی | بررسی وضعیت کاربران در موبایل و دسکتاپ |
سوالات متداول درباره CLS
CLS مخفف چیست؟
CLS مخفف Cumulative Layout Shift است و میزان جابه‌جایی غیرمنتظره عناصر قابل مشاهده صفحه را اندازه‌گیری می‌کند.
CLS خوب چند است؟
امتیاز ۰٫۱ یا کمتر خوب محسوب می‌شود. امتیاز بیشتر از ۰٫۱ تا ۰٫۲۵ نیازمند بهبود است و مقادیر بالاتر از ۰٫۲۵ وضعیت ضعیفی دارند.
چرا CLS سایت من بالاست؟
تصاویر بدون ابعاد مشخص، تبلیغات، iframeها، محتوای پویا و تغییر ابعاد متن هنگام بارگذاری فونت از دلایل رایج CLS بالا هستند. برای تشخیص علت دقیق باید صفحه را با ابزارهای عیب‌یابی بررسی کنید.
آیا CLS همان سرعت سایت است؟
خیر. CLS پایداری بصری صفحه را اندازه‌گیری می‌کند، اما معیارهایی مانند سرعت بارگذاری سایت و LCP جنبه‌های دیگری از عملکرد صفحه را بررسی می‌کنند.
آیا CLS روی سئو تأثیر دارد؟
CLS یکی از معیارهای Core Web Vitals و بخشی از ارزیابی تجربه صفحه است، اما به‌تنهایی رتبه سایت را تعیین نمی‌کند و امتیاز خوب آن رتبه بالا را تضمین نمی‌کند.
آیا Lazy Loading باعث CLS می‌شود؟
نه لزوماً. اگر فضای موردنیاز تصویر یا عنصر Lazy از قبل مشخص نشده باشد، بارگذاری دیرهنگام آن می‌تواند باعث جابه‌جایی محتوا شود.
چگونه مشکل CLS را در وردپرس پیدا کنم؟
ابتدا صفحه‌های مشکل‌دار را با PageSpeed Insights شناسایی کنید، سپس با Chrome DevTools علت جابه‌جایی را بررسی کنید. در مرحله بعد، تصاویر، تبلیغات، فونت‌ها، ویجت‌ها و افزونه‌های مرتبط را اصلاح و نتیجه را دوباره آزمایش کنید.
چرا CLS در موبایل از دسکتاپ بدتر است؟
اندازه صفحه، نحوه چیدمان عناصر، فونت‌ها، تبلیغات و شرایط بارگذاری ممکن است در موبایل متفاوت باشند. به همین دلیل باید گزارش موبایل و دسکتاپ جداگانه بررسی شود.
چرا CLS در PageSpeed Insights با Lighthouse فرق دارد؟
داده واقعی کاربران و داده آزمایشگاهی شرایط یکسانی ندارند. جابه‌جایی‌هایی که پس از بارگذاری اولیه یا هنگام اسکرول رخ می‌دهند ممکن است در تست آزمایشگاهی معمولی ثبت نشوند؛ بنابراین باید هر دو نوع داده را در نظر گرفت.
جمع‌بندی؛ CLS چیست و چگونه آن را کاهش دهیم؟
Cumulative Layout Shift یا CLS یکی از معیارهای Core Web Vitals است که ثبات بصری صفحه را می‌سنجد. امتیاز خوب CLS برابر با ۰٫۱ یا کمتر است و هدف این است که این وضعیت برای دست‌کم ۷۵ درصد بازدیدهای صفحه در صدک ۷۵ برقرار باشد.
مهم‌ترین دلایل CLS بالا معمولاً به مشخص نبودن فضای موردنیاز عناصر یا تغییر غیرمنتظره ساختار صفحه مربوط می‌شوند. تصاویر بدون ابعاد، تبلیغات، iframeها، محتوای پویا و تغییر ابعاد متن هنگام بارگذاری فونت می‌توانند از عوامل ایجاد این مشکل باشند.
برای بهبود CLS، ابتدا علت اصلی را با PageSpeed Insights و Chrome DevTools شناسایی کنید. سپس فضای تصاویر و ویدئوها را مشخص کنید، تبلیغات را با برنامه نمایش دهید، بارگذاری فونت‌ها را بهینه کنید و از جابه‌جایی ناگهانی محتوا جلوگیری کنید. در سایت‌های وردپرسی نیز بهتر است قبل از نصب افزونه‌های بیشتر، عامل واقعی مشکل پیدا شود.
در نهایت، هدف فقط دریافت امتیاز بهتر در ابزارهای تست نیست؛ هدف این است که کاربر بتواند بدون جابه‌جایی ناگهانی محتوا، صفحه را بخواند و با لینک‌ها، دکمه‌ها و فرم‌ها تعامل داشته باشد. LCP نشان می‌دهد محتوای اصلی چقدر سریع نمایش داده می‌شود؛ CLS نشان می‌دهد چیدمان صفحه تا چه اندازه پایدار باقی می‌ماند.
اگر برای بررسی و بهبود CLS یا سایر مشکلات فنی سایت به کمک نیاز دارید، می‌توانید با کارشناسان پرشیا وب در بخش پشتیبانی و تعمیرات سایت در تماس باشید.
“`
