CLS چیست؟ بررسی علت جابهجایی المانها و راههای رفع آن
آیا تابهحال هنگام مطالعه یک صفحه سایت با جابهجایی ناگهانی محتوا مواجه شدهاید که باعث کلیک اشتباه روی یک دکمه شود؟ این مشکل که تجربه کاربری را بهشدت تحت تأثیر قرار میدهد، Cumulative Layout Shift (CLS) نام دارد و در این مطلب بهطور خلاصه به تعریف و اهمیت آن میپردازیم.
CLS یا «تغییر چیدمان تجمعی» معیاری است که گوگل برای اندازهگیری میزان جابهجاییها و پرشهای ناگهانی اجزای سایت هنگام بارگذاری در نظر میگیرد. هرچه این جابهجاییها کمتر باشد، صفحه پایدارتر است و هم کاربران و هم گوگل تجربه بهتری از سایت خواهند داشت، ما امروز در این مقاله از سری مقالات راست چین قصد داریم بیان کنیم CLS چیست چه اهمیتی برای سئو یک سایت دارد.
CLS چیست؟
CLS یکی از شاخصهای مهم گوگل است که میزان جابهجاییهای ناگهانی عناصر یک صفحه وب هنگام بارگذاری را اندازهگیری میکند. این تغییرات غیرمنتظره میتوانند باعث اختلال در تجربه کاربری و کلیکهای اشتباه شوند. هرچه صفحه وب پایدارتر بارگذاری شود و عناصر آن کمتر جابهجا شوند، امتیاز CLS بهتر خواهد بود.
تفاوت CLS با معیارهای دیگر Core Web Vitals
گوگل چند سالی است که یک کارنامه مهم برای سایتها درست کرده به نام هسته حیاتی گوگل (Core Web Vitals). این کارنامه سه فاکتور اصلی دارد که CLS یکی از مهمترین آنها محسوب میشود. برخلاف دو فاکتور دیگر که رو سرعت سایت تمرکز دارند، CLS روی “ثبات بصری” یا همان Visual Stability تمرکز دارد. گوگل میخواهد مطمئن شود سایتی که به مردم معرفی میکند، آرام بارگذاری میشود، نه پر نوسان.
| معیار | تمرکز اصلی | چه چیزی را اندازهگیری میکند؟ | مثال ساده |
|---|---|---|---|
| LCP (Largest Contentful Paint) | سرعت بارگذاری | زمان نمایش بزرگترین محتوای قابل مشاهده صفحه | بزرگترین تصویر یا بنر چه زمانی لود میشود؟ |
| FID / INP | تعاملپذیری و پاسخگویی | سرعت واکنش سایت به اولین/کل تعامل کاربر | بعد از کلیک روی دکمه، چقدر سریع عمل میکند؟ |
| CLS (Cumulative Layout Shift) | پایداری بصری | میزان جابهجایی ناگهانی عناصر صفحه | آیا صفحه هنگام لود شدن تکان میخورد یا نه؟ |
چرا CLS مهم است؟
CLS شاخصی کلیدی در تجربه کاربری است، زیرا میزان جابهجایی ناگهانی عناصر صفحه را اندازهگیری میکند و تأثیر مستقیمی بر رضایت کاربر، نرخ تعامل و رتبه سایت در نتایج موتورهای جستجو دارد.
- بهبود تجربه کاربری (UX): هیچکس دوست ندارد فریب بخورد یا گیج شود. فرض کنید در حال خواندن یک خبر فوری هستید و ناگهان یک تبلیغ بنری بالای صفحه باز میشود و خطی که میخواندید گم میشود. این اتفاق مساوی است با تجربه کاربری ضعیف. پایین بودن نمره CLS یعنی کاربر احساس امنیت و راحتی میکند. وقتی سایت شما ثبات دارد، کاربر با خیال راحت اسکرول و کلیک میکند و وقت بیشتری را در سایت شما میگذراند.
- تاثیر CLS بر سئو: شاید بپرسید آیا گوگل میفهمد که سایت من پرش دارد؟ بله، دقیقتر از چیزی که فکرش را بکنید. Page Experience Metrics یا همان معیارهای تجربه صفحه، مستقیم روی سئو اثر دارند. اگر سایت شما CLS بالایی داشته باشد (یعنی زیاد بپرد)، گوگل آن را به عنوان یک سایت “آزاردهنده” شناسایی میکند. نتیجه؟ کاهش رتبه در نتایج جستجو؛ حتی اگر محتوای خوبی داشته باشید.
- تاثیر در رتبهبندی گوگل: از سال 2021، گوگل رسما اعلام کرد که Core Web Vitals (شامل CLS) یکی از فاکتورهای رتبهبندی است. یعنی اگر دو سایت محتوای یکسانی داشته باشند، سایتی که ثبات چیدمان صفحه بهتری دارد، در رتبه بالاتری قرار میگیرد.
CLS چگونه اندازهگیری میشود؟
گوگل برای امتیاز دهی، دو عدد را در هم ضرب میکند:
نمره CLS = کسرِ تاثیر (Impact Fraction) × کسرِ فاصله (Distance Fraction)
Impact Fraction (میزان فضایی که عنصر جابهجاشده در صفحه اشغال کرده) و Distance Fraction (مقدار مسافتی که آن عنصر حرکت کرده).
هرچه عنصر بزرگتر باشد یا جابهجایی بیشتری داشته باشد، امتیاز CLS بدتر خواهد شد.
مقدار مناسب CLS چقدر است؟
مقدار مناسب CLS برابر با 0.1 یا کمتر است؛ مقادیر بین 0.1 تا 0.25 نیاز به بهبود دارند و مقادیر بیش از 0.25 ضعیف محسوب میشوند.
| وضعیت CLS | مقدار CLS | توضیح |
|---|---|---|
| خوب (Good) | 0.1 یا کمتر | سایت پایدار است، تجربه کاربری عالی و از نظر گوگل وضعیت مناسب دارد. |
| نیاز به بهبود (Needs Improvement) | بین 0.1 تا 0.25 | مشکل بحرانی نیست، اما برخی المانها باعث جابهجایی صفحه میشوند و باید بررسی شوند. |
| ضعیف (Poor) | بیشتر از 0.25 | صفحه ناپایدار است، تجربه کاربری ضعیف شده و احتمال افت رتبه در گوگل وجود دارد. |
نکته: با استفاده از ابزارهای تست سرعت سایت به راحتی میتوانید مقدار CLS سایت مورد نظر خود را پیدا کنید.
عوامل ایجاد CLS در سایت
در ادامه به بررسی دقیق عوامل مؤثر بر ایجاد CLS خواهیم پرداخت.
- تصاویر بدون ابعاد مشخص: عدم بهینه سازی تصاویر سایت، رایجترین دلیل ارورها و مشکلات CLS است. وقتی عکسی را در سایت میگذارید اما طول (Width) و عرض (Height) آن را در کد HTML مشخص نمیکنید، مرورگر نمیداند چقدر جا برایش خالی بگذارد. اول متنها را نشان میدهد و بعد که عکس لود شد، متنها را هل میدهد پایین.
- فونتهای وب و تغییر FOIT/FOUT: گاهی سایت با یک فونت استاندارد بالا میآید و بعد از چند ثانیه، فونت دیگر شما لود میشود. چون سایز این دو فونت فرق دارد، نوشتهها جابجا میشوند و خطوط به هم میریزند.
- تبلیغات و iframe هایی که فضای مشخص ندارند: تبلیغات و iframe هایی که بدون تعیین فضای مشخص بارگذاری میشوند، از عوامل مهم ایجاد CLS هستند، زیرا با ظاهر شدن ناگهانی باعث جابهجایی سایر عناصر صفحه میشوند.
- محتوای داینامیک که بدون هشدار لود میشود: فرض کنید یک نوار “تخفیف ویژه” یا دکمه “نصب اپلیکیشن” بالای سایت ظاهر شود. این محتواهای دینامیک کل ساختار سایت را به پایین هل میدهند و باعش افزایش عدد CLS میشوند.
- پاپآپها و نوتیفیکیشنهای ناگهانی: پنجرههایی که یکهو وسط صفحه میپرند، اگر جایگیری مناسب نداشته باشند، میتوانند چیدمان زیرین را به هم بریزند.
- اسلایدرها و بنرهای متحرک: اسلایدرهایی که عکسهایشان ارتفاع متفاوتی دارند، باعث میشوند ارتفاع کل صفحه مدام کم و زیاد شود.
چگونه CLS را کاهش دهیم؟
یکی از مؤثرترین راهکارها برای کنترل CLS و افزایش سرعت سایت، استفاده از افزونه راکت بهعنوان یکی از بهترین افزونه های افزایش سرعت سایت است. این افزونه با قابلیتهایی مانند بارگذاری بهینه فایلهای CSS و JavaScript، تاخیر در اجرای اسکریپتها (Delay JS)، بهینهسازی CSS بحرانی (Critical CSS) و مدیریت هوشمند فونتها، کمک میکند تا ساختار صفحه پیش از نمایش کامل تثبیت شود و از پرش ناگهانی المانها جلوگیری گردد.
علاوه بر این، افزونه راکت با بهبود فرآیند رندر صفحه و هماهنگسازی بارگذاری منابع، باعث میشود عناصر مهم صفحه زودتر و پایدارتر نمایش داده شوند. در نتیجه، امتیاز CLS کاهش یافته و تجربه کاربری روانتری برای بازدیدکنندگان فراهم میشود. استفاده اصولی از این افزونه، در کنار رعایت استانداردهای طراحی و توسعه، میتواند نقش کلیدی در بهبود Core Web Vitals و رشد جایگاه سایت در نتایج جستجوی گوگل داشته باشد.
روشهای مؤثر دیگر برای کاهش CLS
- با ابزار PageSpeed Insights و Lighthouse، منابع CLS را دقیق بررسی کنید.
- با مشخص کردن اندازه المانهای رسانهای، از پرش محتوا هنگام لود جلوگیری میشود.
- تبلیغات داینامیک باید از ابتدا فضای ثابتی داشته باشند تا باعث جابهجایی صفحه نشوند.
- استفاده از font-display: swap و preload فونتهای اصلی، مانع پرش متن میشود.
- پاپآپها و نوارهای اطلاعرسانی باید Overlay باشند یا از ابتدا لود شوند.
- Lazy Load فقط برای محتوای پایین صفحه و با رزرو فضای کافی استفاده شود.
- با Critical CSS و حذف اسکریپتهای غیرضروری، ساختار صفحه زودتر پایدار میشود.
و در پایان
امیدواریم حالا کاملا متوجه شده باشید که CLS چیست و چرا باید آن را جدی بگیرید. CLS فقط یک عدد در ابزارهای گوگل نیست؛ نشانی از احترام شما به اعصاب و روان کاربرانتان است. با رعایت نکاتی مثل تعیین سایز عکسها، رزرو جا برای تبلیغات و استفاده از ابزارهای کمکی مثل افزونه راکت، میتوانید سایتی بسازید که مثل یک ساختمان مهندسی ساز، محکم و پایدار باشد، از این که تا اینجا همراه ما بودید ممنونیم، موفق باشید.
