CLS چیست و چگونه آن را بهینه کنیم؟

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

CLS-چیست-و-چگونه-آن-را-بهینه-کنیم؟

تماس با آکادمی سئو پورفیض 

واتس اپ محمد پورفیض
اینستاگرام محمد پورفیض
لینکدین محمد پورفیض
تلگرام محمد پورفیض

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

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

CLS چیست؟

در بالا نیز اشاره کردیم که پارامتر  CLS یا Cumulative Layout Shift، به تغییرات و جابه‌جایی ناگهانی در زمان لود صفحات وب سایت گفته می‌شود. به طور مثال شما یک صفحه را باز کرده و در حالی که لود می‌شود، ناگهان محل قرارگیری تصاویر تغییر کرده و این باعث خواهد شد تا محل ماوس کاربر جابه‌جا شود.

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

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

استانداردهای-پارامتر-CLS

استانداردهای پارامتر CLS

همان­طور که انتظار می‌رود در پی اعلام یک پارامتر از سوی گوگل، استانداردهایی نیز برای آن وجود دارد که در راستای بهینه سازی باید مد نظر قرار بگیرند. در واقع زمانی که شما در چهارچوب این استانداردها، قدم برداشته و بهینه­سازی را به هدف آن‌ها انجام دهید، پله پله به تجربه و تعامل بهتر کاربری نزدیک خواهید شد و این در رتبه بندی وب سایت شما از سوی الگوریتم‌های گوگل تاثیر می‌گذارد.

بهترین وضعیت برای CLS، کمتر از ۰.۱ است و در مقادیر بالاتر، باید حتما بهینه­سازی صورت بگیرد. به این ترتیب مقادیر بین ۰.۱ تا ۰.۲۵، متوسط بوده و بایستی بهینه­سازی شوند. البته مقادیر بالای ۰.۲۵ به طور کلی ضعیف بوده و نشان می‌دهد که وب سایت به این لحاظ از تجربه کاربری و تغییرات ناگهانی در صفحه، در وضعیت وخیمی قرار دارد.

روش‌های بهبود فاکتور CLS

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

تنظیم فونت روی FOUT

در صورتی که فونت صفحات وب سایت خود را روی FOIT، تنظیم کرده باشید؛ این احتمال وجود دارد که لود شدن صفحه با اختلالاتی روبرو شده و تفاوت میان زمان لود شدن المان‌های مختلف، تغییرات ناگهانی در صفحه به وجود بیاورد. از این روی پیشنهاد می‌شود که به عنوان جایگزین تنظیمات فونت صفحات وب سایت خود را روی FOUT قرار دهید.

یکسان سازی aspect ratio محتواهای چند رسانه‌ای صفحه

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

کاهش بنرهای تبلیغاتی و پاپ آپ‌ها

یکی از مشکلاتی که بنرهای تبلیغاتی در میان متن صفحه ایجاد می‌کنند، همین افزایش میزان سی ال اس است. برای رفع این مشکل، تا حد امکان تبلیغات بنری لابه‌لای متن صفحه را کاهش داده و در موقعیت‌های کناری و خلوت صفحه وب سایت خود قرار دهید تا اختلالی به شکل تغییرات ناگهانی در المان‌های صفحه ایجاد نکنند.

ابزارهای-اندازه-گیری-پارامتر-سی-ال-اس

ابزارهای اندازه گیری پارامتر سی ال اس

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

GTMetrix

یکی از بهترین ابزارها برای اندازه­گیری سی ال اس، جی تی متریکس است. این ابزار اعداد و ارقام قابل توجهی ارائه کرده که می‌توانید بر حسب آن‌ها، بهینه­سازی را انجام دهید.

Google PageSpeed Insights

ابزار PageSpeed Insights گوگل، هم از ابزارهای عالی برای اندازه­گیری پارامتر CLS است و اعداد و ارقام مطمئنی نشان خواهد داد.

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

تاثیر CLS بر سئوی کلاه سفید وب سایت

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

سخن پایانی

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

سوالات متداول در مورد CLS

CLS چیست؟

پارامتر CLS یا Cumulative Layout Shift، به تغییرات و جابه‌جایی ناگهانی در زمان لود صفحات وب سایت گفته می‌شود.

روش‌های بهبود فاکتور CLS چیست؟

  • تنظیم فونت روی FOUT
  • یکسان سازی aspect ratio محتواهای چند رسانه‌ای صفحه
  • کاهش بنرهای تبلیغاتی و پاپ آپ‌ها

ابزارهای اندازه گیری پارامتر CLS را نام ببرید؟

  • GTMetrix
  • Google PageSpeed Insights

این مطلب را به اشتراک بگذارید

سایت‌های دیگر ما

مستر سوییمر آموزش شنا

میتراکانا کتاب سه بعدی

اسپیرالی لوله اسپیرال

34 تعداد بازدید

دیدگاه ها

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این فیلد را پر کنید
این فیلد را پر کنید
لطفاً یک نشانی ایمیل معتبر بنویسید.
برای ادامه، شما باید با قوانین موافقت کنید

فهرست