CLS چیست و چه تاثیری در سئوسایت دارد؟

احتمالا شما هم تجربه کرده اید که بعد از ورود به یک سایت و در هنگامی که منتظرید صفحه لود شود، اجزای سایت پرش می کنند و المان های مختلف آن مدام جا به جا می شوند و ثبات ندارند. این یک اتفاق بد و عصبی کننده است و کاربر احتمالا سایت را ترک خواهد کرد و به سراغ سایت دیگری می رود که المان های آن پرش نداشته و با ثبات باشد. یا مثلا می توانیم حالت دیگری را بیان کنیم که شما در زمان کلیک کردن و زدن روی یک دکمه خاص از یک سایت، اشتباها روی یک دکمه دیگری زده می شود؛ در حالی که گزینه درست را انتخاب کرده اید. این موقعیت فقط با عصبانیت مخاطب همراه است و کاربر از تجربه کار در آن سایت اصلا راضی نخواهد بود. این ها همه تعریف یکCLS  ضعیف از یک سایت است. فاکتوری که باید به آن آگاهی کافی داشته باشیم؛ زیرا در سئو سایت ما تاثیر به سزایی دارد. در ادامه این مقاله مباحثی مهم درباره این تعریف ارائه خواهیم داد. با ما باشید.

CLS چیست؟

به مجموعه ای از تغییرات ناگهانی و پرش های غیرمنتظره که در المان های صفحه رخ می دهد، CSL گفته می شود. در واقع این بی ثباتی ها و تغییر چیدمان صفحه سایت ممکن است در هنگام لود صفحه و حتی بعد از بارگذاری رخ دهد. این یکی از مهم ترین فاکتورهای هسته حیاتی گوگل یا Core Web Vital است. از آن جایی که تجربه کاربری یکی از اصول مهم و مورد توجه در موتورهای جستجو محسوب می شود، رعایت نکردن اصول مربوط به CSL می تواند کاهش رتبه شدید یک صفحه سایت را در پی داشته باشد. اما در مقابل آن علاوه بر CLS هر اتفاقی که بتواند UX یا همان تجربه کاربری را التیام و رشد دهد، می تواند به شکلی موثر و محسوس بر وضع سئو سایت ما تاثیر مثبت بگذارد. در این میان CLS هایی هستند که خوب هستند و یک فاکتور مثبت محاسبه می شوند. این مهم است که بدانیم تغییری که در طرح بندی صفحات وب سایت رخ می دهد همیشه معضل نیست. یعنی اگر در زمان خواندن یا هر گونه تعامل کاربر با صفحه، اجزای سایت تغییر موقعیت دهند، جالب نیست. اما اگر به نوعی کاربر بتواند تغییر طرح بندی را خود انجام دهد یک امتیاز مثبت تلقی می شود. در واقع اگر فقط کاربر با کلیک کردن روی گزینه ای یا اسکرول کردن بتواند تعاملی ایجاد کند یک مزیت محسوب می شود. با این وجود CLS و ارتباط آن با تجربه کاربری، تاثیر به سزایی در روند سئو سایت خواهد داشت که باید به عنوان یکی از فاکتورها و متریک های تاثیرگذار و اعلام شده توسط گوگل در دستور کار قرار بگیرد.

اندازه استاندارد و نحوه اندازه گیری CLS

مقدار بهینه ای برای CLS بیان شده است که طبق استانداردهای گوگل سنجیده می شود. هر یک از روش های اندازه گیری میزان CLS یک عدد را به صورت خروجی اعلام می کند که در محدوده بین 0 تا 1 است. با استفاده از این عدد می توان وضعیت CLS سایت را شناسایی کرد. اما برای بررسی میزان آن دو روش وجود دارد که گوگل آن ها را in the lab و in the field نام گذاری کرده است. در روش اول گوگل در یک فضای شبیه سازی شده و با ابزاری مثل Google chrome's Developer Tools تجربه کاربری را شبیه سازی و بررسی می کند. اما در روش دوم یا in the field بر اساس تعامل کاربر حقیقی با سایت است که از ابزاری مثل Pagespeed Insights برای این منظور استفاده می کند. عدد نهایی اعلام شده توسط این ابزارها می تواند وضعیت CLS سایت ما را به صورت زیر مشخص کند:

• ۰.۱ یا کمتر: بهینه است.
• بین ۰.۱ تا ۰.۱۵ : تقریبا بهینه است اما به اصلاحات جزئی نیاز دارد
• بین ۰.۱۵ تا ۰.۲۵: تا حدودی از استاندارد خارج شده است.
• بیشتر از ۰.۲۵: از حد استاندارد کاملا خارج است.

دلایل افزایش CLS و روش های کم کردن آن

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

• ابعاد نادرست تصاویر

گاهی دلیل جا به جا شدن اجزای صفحه به دلیل خطاهای مربوط به تصاویر آن می باشد. در زمان طراحی عکس های سایت باید سایز تصاویر را روی تگ img مشخص کرد تا این مورد برطرف شود. نمونه ای از آن به شکل زیر است:

• فونت های وب که باعث FOUT و FOIT می شوند.

دو حالت مرسوم برای تنظیم فونت متون صفحات سایت وجود دارد. که برای بهینه کردن ClS و اصلاح فونت صفحات باید با آن ها آشنا شویم:

 (Flash of invisible text) FOIT

در این حالت باید ابتدا در مرورگر کاربر فونت تعیین شده برای متن صفحات سایت لود شود تا متن محتوای سایت نمایش داده شود. تنظیم فونت در این حالت می تواند CLS سایت را بهبود دهد، اما به دلیل تاخیر در بارگذاری فونت صفحه و انتظار برای بارگذاری سایت، تجربه کاربری را به شدت کاهش می دهد.

FOUT (Flash of Unstyled text)

در این وضعیت متن صفحات سایت ابتدا با یک فونت پیش فرض و موقت به کاربر نمایش داده می شود و هر زمان که فونت تعیین شده برای سایت روی مرورگر کاربر باز شد، فونت متن صفحه تغییر خواهد کرد. اما این روش می تواند باعث جابه جایی ناگهانی و تغییر اجزای صفحه شود و به طبع آن نرخ CLS سایت افزایش پیدا کند. اما می توان عبارت rel="preload" را به کدهای HTML فونت در head سایت اضافه کرد تا این مورد برطرف شود.

• تبلیغات و آی فریم های بدون ابعاد

باید برای نمایش تبلیغات سایت خود یک سایز مشخص تعیین کرد. هر چند که نمی توان از دیگر سایت هایی که روی سایت ما تبلیغات درج کرده اند بخواهیم که ابعاد مشخصی برای تبلیغات در نظر بگیرند. ولی می توانیم روی قالب سایت خود یک Layout مناسب بگذاریم و آن را با یک سایز مشخص فقط برای تبلیغات در نظر بگیریم. با این روش می توان تبلیغات embeds و iframes را با هر سایزی که باشد در همان layout تعیین شده محدود کنیم تا عناصر آن جا به جا نشوند.

• کدهای جاوا اسکریپت و CSS

استفاده از کدهای جاوا اسکریپت برای تغییر استراکچر و محتوای صفحات، در صورتی که زمان اجرای این کدها بعد از لود شدن کامل صفحه باشد، می تواند مقدار CLS را افزایش دهد. با توجه به اهمیت نقش طراحی سایت در بهبود سرعت سایت، برای رفع این مورد بهتر است کدهای جاوا اسکریپت را به شکلی تعیین کنیم که کوچک ترین تغییر در صفحات سایت، در مدت زمان کوتاهی انجام شود. همچنین کدهای CSS که تعیین کننده ساختار اصلی صفحه است بهتر است در head سایت باشد و کمترین حجم را داشته باشد تا نمای کلی صفحه در زمانی کوتاه نمایش داده شود.

نتیجه گیری

اهمیت CLS بیشتر با توجه به تاثیر بر تجربه کاربری و رتبه بندی سئو سایت به چشم می آید. و با توجه به این که یکی از فاکتورهای اعلام شده توسط گوگل است، می تواند در بهینه سازی موتورهای جستجو و رتبه بندی صفحه serp موثر باشد. توجه به این معیار می تواند UX یا تجربه کاربری را در زمان بازدید از سایت را بهبود دهد. برای این منظور باید به ابزارها و میزان استاندارد CLS که در این مقاله بررسی کردیم، شناخت پیدا کرد و بهینه سازی آن را برای تک تک صفحات سایت انجام داد. اگر سوالی در خصوص مطالب عنوان شده در این صفحه داشتید در بخش نظرات سایت مطرح بفرمایید تا کارشناسان ما در رایاپارس در سریع ترین زمان پاسخگوی شما باشند. همچنین می توانید از بخش تماس با ما اقدام بفرمایید.