cls چیست
فهرست مطالب
آخرین به روزرسانی در 29/07/2022
در این مقاله با یکی دیگر از مفاهیم در سئو به نام CLS آشنا خواهیم شد.
قطعا اگر سئوکار باشید این مفهوم را در ابزار Gtmetrix مشاهده کرده اید.
پس می دانید در ابتدای کار و قبل از پرداختن به آن ارتباط تنگاتنگی را با طراحی و سرعت سایت دارد.
در ادامه با ما همراه باشید تا جزئیات بیشتر و کامل تری را از این مفهوم در سئو شرح دهیم.
CLS چیست ؟
CLS مخفف Cumulative Layout Shift می باشد و در واقع نوعی واکنش پذیری سایت در تعامل با کاربر است.
شما تصور کنید زمانیکه وارد یک وبسایت می شوید قطعا در ابتدای کار با لودینگ یک وبسایت روبه رو خواهید شد.
جابه جایی المان ها در زمان لود وبسایت یک پوئن منفی برای CLS محسوب می شود.
اجازه بدهید مثال بهتری را بزنیم ، فرض کنید شما در حال انجام یک عملیاتی درون وبسایت هستید.
این عملیات می تواند مانند یک کلیک بر روی دکمه ای از سایت یا مانند پر کردن یک فرم یا حتی اسکرول کردن به پایین و بالا درون وبسایت باشد.
قائدتا اگر در هنگام انجام این عملیات ها شما با تغییرهای ناگهانی در چیدمان المان های سایت مواجه شوید این باعث ایجاد یک تجربه ی کاربری ضعیف درون سایت و به اصطلاع عدم یک واکنش گرایی درست و استاندارد سایت در تعامل با کاربر می شود.
اما تعریف CLS در ابزار جی تی متریکس بیشتر به این جابه جایی های ناگهانی در زمان بارگذاری صفحه اشاره دارد و اگر بخواهیم تعریف فنی تری را برای آن ارائه دهیم می توان گفت :
CLS معیاری برای اندازه گیری ثبات بصری در زمان بارگذاری یک صفحه است که به طور کلی برای محاسبه ی تغییر غیرمنتظره عناصر وب در زمان لودن شدن برای کاربر استفاده می شود.
لازم به ذکر است این متریک در سال 2021 میلادی به یک عامل رتبه بندی تبدیل شده است.
تاثیرات CLS
به طور کلی تاثیر CLS بیشتر بر روی معیارهای تجربه ی کاربری یک وبسایت می باشد.
هر چقدر میزان CLS برای یک وبسایتی پایین تر باشد بهتر است و هر چقدر میزان آن بالاتر باشد پوئن منفی تری برای یک وبسایت به شمار می آید.
امتیاز CLS باید در حد 0.1 یا کمتر نگه باشد.
همچنین CLS تاثیر مستقیمی را بر Performance در GTMetrix دارد.
(نکته ی لازم به ذکر است شاید وقتی نام GTMETRIX می آید تصور شما بر روی سرعت سایت می رود ، اما در به روزرسانی های جدید جی تی متریکس ، این ابزار علاوه بر سرعت سایت ، معیارهای دیگری را برای امتیاز دهی به بهینه سازی یک وبسایت مانند همین CLS در نظر گفته است.
این معیارها بیشتر تاکید بر طراحی ، ظاهر سایت و مباحث تجربه و رابط کاربری دارد.)
اگر یک وبسایتی CLS پایین داشته باشه یعنی دارای صفحه نمایش پایداری است که عناصر رو به اطراف منتقل نمیکنه و بارگیری ثابت و قابل پیش بینی تمام محتوای وب سایت را تضمین میکنه.
تغییرات چیدمان
تغییرات چیدمان از طریق Layout Instability API تعریف میشوند.
ورودیهای layout-shift هر بار که تصویری درون محدوده دید، موقعیت اولیه خود را بین دو فریم تغییر میدهد، گزارشی را ثبت می کنند.
این نوع از عناصر به عنوان عناصر ناپایدار در نظر گرفته میشوند.
بهتر است به این نکته توجه داشته باشید که layout-shiftها فقط زمانی اتفاق میافتند که عناصر موجود، موقعیت اولیه خود را تغییر دهند.
نحوه محاسبه امتیاز layout-shift
برای محاسبه امتیاز layout-shift، تمرکز مرورگر روی اندازۀ محدودۀ قابلنمایش کاربر و حرکت عناصر ناپایدار در محدودۀ قابلنمایش بین دو فریم است.
به طور کلی می توان گفت امتیاز layout-shift حاصل اندازهگیری دو مشخصه در این جابهجایی است:
- ضریب تاثیر (impact fraction)
- ضریب فاصله (distance fraction)
با پارامترهای بالا فرمول به شکل زیر در می آید :
امتیاز layout-shift = ضریب تأثیر * ضریب فاصله
امتیاز layout-shift = ضریب تأثیر * ضریب فاصله
impact fraction چیست ؟
impact fraction، میزان تاثیر تصاویر یا متون ناپایدار بین دو فریم در محدوده قابل دید کاربر را محاسبه میکند.
ضریب تاثیر فریم فعلی، شامل ترکیب محدودههایِ مرئیِ تمامِ عناصرِ ناپایدار در فریم قبلی و فریم فعلی ، بهعنوان ضریبی از تمامِ محدودۀ قابلنمایش کاربر است.
همانطور که در تصویر بالا می بینید ؛ عنصری وجود دارد که شامل نیمی از محدوده قابلنمایش کاربر در یک فریم است.
سپس، در فریم بعدی، این عنصر به ۲۵% از طول محدوده قابلنمایش کاربر تغییر و کاهش پیدا میکند.
مستطیل قرمزِ خطچین شده، پیوند محدوده مرئی این عنصر در هر دو فریم را نمایش میدهد که در این مورد، شامل ۷۵% از تمام محدوده قابل مشاهده کاربر میشود.
در نتیجه ضریب تأثیر آن هم ۰.۷۵ است.
distance fraction چیست ؟
ضریب فاصله ، فاصلهای که عنصر ناپایدار طی کرده را به نسبت محدودۀ قابلنمایش کاربر اندازهگیری میکند.
ضریب فاصله، شامل «بیشترین فاصلهای است که هر عنصر ناپایدار در فریم حرکت کرده (چه به صورت افقی چه عمودی)»، تقسیم بر «بیشترین ابعاد محدوده قابلنمایش کاربر (هر کدام از عرض و طول که بیشتر باشد)».
همانطور که در بالا می بینید ؛ بیشترین ابعاد محدوده قابلنمایش کاربر طول می باشد و عنصر ناپایدار ۲۵% در طول محدوده قابلنمایش کاربر حرکت کرده است که ضریب فاصله آن ۰.۲۵ میشود.
پس در این مثال ضریب تاثیر برابر با 0.75 و ضریب فاصله برابر با 0.25 است، بنابراین طبق فرمول امتیاز layout-shift برابر میشود با 0.1875
همانطور که در بالا می بینید ؛ بیشترین ابعاد محدوده قابلنمایش کاربر طول می باشد و عنصر ناپایدار ۲۵% در طول محدوده قابلنمایش کاربر حرکت کرده است که ضریب فاصله آن ۰.۲۵ میشود.
پس در این مثال ضریب تاثیر برابر با 0.75 و ضریب فاصله برابر با 0.25 است، بنابراین طبق فرمول امتیاز layout-shift برابر میشود با 0.1875
(۰.۷۵ * ۰.۲۵ = ۰.۱۸۷۵)
اوایل امتیاز layout-shift فقط بر اساس ضریب تاثیر محاسبه میشد.
ضریب فاصله بعدها برای جلوگیری از جریمه شدن مواردی که در آنها عناصر بزرگ، تغییرات کوچکی داشتند، معرفی شد.
اندازه گیری CLS با استفاده از ابزارها
برای اندازه گیری CLS ما دو روش میدانی و آزمایشی را داریم که هر کدام از این روشها به شکل های منحصر به فردی CLS سایت شما را اندازه گیری می کنند.
روش آزمایشی :
CLS خوب
می توان گفت که همیشه تغییر طرحبندی صفحه وب، بد نیست.
درست است در صورتی که حین خواندن یا به هر نوعی تجربه کاربر در صفحه، اجزای آن تغییر مکان دهند، نمره منفی محسوب خواهد شد.
اما تصور کنید اگر تغییر طرحبندی توسط کاربر آغاز شده و وی در آن دخیل باشد، باید آن را یک فاکتور مثبت در نظر گرفت.
در واقع این کاربر است که با تغییر، به طور مثال اسکرول کردن، کلیک روی یک لینک و … اطلاعات بیشتری به دست میآورد.
راه های بهبود CLS
CLS تنها یک الی دو مورد نیست که شما بتوانید آن را بهبود ببخشید ، بلکه مجموعه ای از پارامترهایی است که با تغییر آن ها می توانید به بهبود CLS نیز کمک کنید.
این پارامتر ها از سئو و محتوا تا طراحی سایت و تبلیغات می باشند.
در ادامه برخی از مهم ترین راه هایی که می توانید با استفاده از آن ها نقشی را در کاهش این معیار داشته باشید خواهیم گفت.
1- تبلیغات :
تبلیغات و قرار دادن کد اسکریپت آن ها در صفحات سایت شما یکی از مهم ترین عواملی است که می تواند به صورت مستقیم بر روی CLS تاثیرگذار باشد.
2- کدهای EMBED :
وبسایت های اشتراک ویدیو معمولا برای اشتراک گذاری ویدیو کدهای EMBED یا IFRAME را در اختیار شما می گذارند.
این کدها علاوه بر تاثیراتی که در سرعت سایت می گذارد ، همچنین باعث بالا رفتن معیار CLS نیز می شوند.
3- محتوای متحرک :
منظور از محتوای متحرک محتواهایی هستند که به صورت اسلاید مانند در حرکت هستند.
یا با هر انیمیشن دیگری مرور شده و آیتم های خود را به نمایش می گذارند.
محتواهایی مانند : نمونه کارها ، مقالات مرتبط ، خبرنامه و … معمولا از این دسته محتواها هستند.
بهترین جا برای قرار گرفتن این نوع محتواها در پایان صفحه می باشد ، در غیر اینصورت امکان رخ دادن مشکلات CLS وجود دارد.
4- بهینه سازی کدهای CSS و جاوا اسکریپت :
اگر کدهای CSS و جاوااسکریپت سایت شما که برای استایل بندی سایتتان می باشد بهینه سازی نشده باشد ، می تواند یکی از دلایل مهم بالا رفتن معیار CLS باشد.
زیراکه این موضوع در بارگذاری صفحه مشکل و تاخیر ایجاد کرده و ممکن است باعث مشکل در بارگذاری صفحه شود.
5- تصاویر :
یکی از مهمترین دلایل جابجا شدن عناصر صفحه، بارگزاری تصاویر سایت است.
اگر هنگام طراحی سایت، اندازهی تصاویر را به شکل زیر روی تگ img مشخص کنید، این مشکل برطرف میشود.
<img src=”sample.png” width=”300″ height=”200″>
6- لودینگ فونت نوشته های سایت :
قائدتا هر وبسایتی برای نوشته های خود یک فونتی را برگزیده است.
دو حالت برای لودینگ فونت سایت وجود دارد :
در حالت اول زمانی نوشته ها نمایش داده می شوند که فونت نوشته ها نیز لود شده باشد.
در حالت دوم در ابتدا نوشته های سایت با فرمت پیشفرض مرورگر شما نمایش داده می شود و پس از لود شدن فونت شما ، فونت پیشفرض جای خود را به فونت انتخابی شما می دهد.
قائدتا استفاده از روش دوم ، روش بهینه تر و بهتری است زیرا باعث افزایش سرعت لود سایت نیز می شود.
اما برای استفاده از روش دوم قائدتا به کمک برنامه نویس و استفاده از کدهای سفارشی CSS دارید.
7- استفاده از انیمیشن ها :
انیمیشن در سایت نه تنها بد نیست بلکه باعث پویایی و زیبایی سایت نیز می شود.
اما در استفاده از انیمیشن ها دو نکته را باید در نظر داشته باشید :
- تعداد انیمیشن ها : اگر تعداد انیمیشن های استفاده شده در یک صفحه بیش از حد استاندارد باشد ، قطعا در سرعت لود سایت شما مشکلاتی را به وجود می آورد.
- نوع انیمیشن ها : قطعا بهترین و بهینه ترین نوع انیمیشن ها ، انیمیشن هایی هستند که با استفاده از کدهای CSS و JAVA SCRIPT پیاده سازی شده اند.
انیمیشن هایی که به صورت ویدیویی یا گیف در سایت استفاده می شوند نسبت به کد اصلا بهینه نبوده و باعث بالا رفتن سرعت لود شما می شود.
مهرشاد شادان مهر
مدرس سئو ، طراح سایت ، انیماتور
قهرمان زندگی شما در چند سال آینده ی شما می باشد