حتماً برایتان پیش آمده که در حال خواندن یک مقاله آنلاین باشید و ناگهان متن جابهجا شود و تمرکزتان را به هم بریزد. یا مثلاً حین خرید آنلاین، دکمهی “ثبت سفارش” به جای دیگری برود و شما اشتباهی روی دکمهی دیگری کلیک کنید. این اتفاقات آزاردهنده، ناشی از چیزی به نام (CLS) یا (Cumulative Layout Shift) برای کاربر رخ میدهد.
در این مطلب از سهامگ؛ قصد داریم بیشتر به مفهوم CLS،کاربرد آن و روشهای بهینهکردنش اشاره کنیم. پس اگر شما نیز قصد طراحی سایت دارید، توجه به این مسئله برایتان حیاتی است.
مفهوم CLS
CLS یک یکی از معیارهای ارزیابی عملکرد سایت و تجربه کاربری (UX) است که میزان تغییرات غیرمنتظره در چیدمان عناصر صفحه را اندازهگیری میکند.
به زبان ساده، هربار که جای متن، تصویر یا دکمه در سایت، تغییر میکند، «تغییر چیدمان» اتفاق میافتد. به مجموعه این تغییرات، CLS میگویند.
عدد CLS مناسب چقدر است؟
CLS کمتر از 0.1 ، تجربه کاربری خوبی به شما میدهد. در واقع هرچه عدد CLS، کمتر باشد یعنی تغییرات غیرمنتظره در چیدمان صفحۀ سایت شما کمتر اتفاق میافتد اما اگر مقدار آن بالا باشد، یعین میزان پرش زیاn است و کاربر در حین فعالیت با صفحۀ شما تجربۀ کاربری خوبی ندارد. گوگل برای تعیین میزان CLS، 3 معیار قرار دادهاست:
· خوب
عدد CLS، کمتر از 0.1
· نیاز به بهبود
عدد CLS بین :0.3-0.1
· بد
عدد CLS، بیشتر از 0.3
برای اطمینان از اینکه این مقدار برای بیشتر کاربران شما در حد مناسب باقی بماند، گوگل پیشنهاد میکند که %75 از زمانهای بارگذاری صفحه را برای دستگاههای موبایل و دسکتاپ در نظر بگیرید و مطمئن شوید که مقدار CLS در این زمان کمتر از 0.1 باشد.
چگونه میزان CLS را تعیین کنید؟
برای اینکه مشخص کنید، میزان CLS چقدر است؟ باید به 2 نکتۀ زیر توجه داشتهباشید:
· میزان درصدی از صفحه که تحت تأثیر جابهجایی قرار گرفته است.
· چقدر عناصر جابهجا شدهاند؟
وقتی این 2 عدد با هم ضرب میشوند، میزان جابهجایی مشخص میشود. در واقع:
امتیاز جابجایی طرح = درصد تأثیر × میزان جابهجایی
هرچه این عدد بالاتر باشد، یعنی عناصر بیشتری در صفحه جابهجا میشوند و تجربۀ کاربری ضعیفتر است.
7 راهکار موثر برای کاهش CLS
1. تعیین ابعاد برای تصاویر و ویدئوها
یکی از روشهای موثر برای کاهش، تعیین ابعاد برای ویدئوها و تصاویر است.
2. بهینهسازی بارگذاری فونتها
تنظیمات فونت را روی حالت ( FOUT ) بگذارید تا تا در صورتیکه متن محتوا با تأخیر بارگذاری شد، فونتها تغییری در چیدمانشان اتفاق نیفتد.
3. مدیریت محتواهای پویا
محتواهای پویایی مثل انیمیشنها، تبلیغات و یا کدهای جاوا، ممکن است، باعث افزایش شوند، برای مدیریت این مسئله، پیشنهاد میشود از کتابخانهها یا چارچوبهای برنامهنویسی مناسب استفاده کنید. این ابزارها به شما کمک میکنند تا محتوای پویا را بهتر کنترل و مدیریت کنید، به طوری که صفحه به طور روان و بدون تغییرات آزاردهنده برای کاربر نمایش داده شود.
4. استفاده از فریمورکهای CSS استاندارد
فریمورکهای استانداردی همچون (Bootstrap) و (Foundation) یک سری کلاسهای از پیش تعریف شده دارند که برای برای مدیریت ابعاد عناصر صفحه و جایگذاری محتوا، استفاده میشوند. این فریمورکها، در واقع مجموعهای از کلاسهای آمادۀ ارائه هستند که با کمک آنها عناصر مختلف صفحه تنظیم میشوند و یا محتوهای تولید شده در جای صحیح قرار میگیرند. این قابلیت فریمورکها، مانع تغییرات ناگهانی در چیدمان صفحه میشود و تجربۀ کاربری را به طرز چشمگیری بهبود میبخشد.
5. بهروزرسانی پلاگینها، کتابخانهها و اسکریپها
با بهروزرسانی پلاگینها، کتابخانهها و اسکریپها میتوان مانع بروز باگهای مختلف و افزایش میزان CLS شد.
6. استفاده از نگهدارنده (Placeholder) برای کاهش جابهجایی
(Placeholders) یک نگهدارندۀ فضا در سایت است که جلوی تغییر ناگهانی ظاهر صفحه را میگیرد. از آن برای محتواهایی که با تأخیر بارگذاری میشود، مانند تبلیغات یا تصاویر، با ابعاد ثابت استفاده میشود تا فضای آنها از قبل مشخص باشد و چیدمان صفحه با بارگذاری محتوا تغییر نکند.
7. استفاده از CMS مناسب
استفاده از یک سیستم مدیریت محتوای خوب مثل وردپرس، پیش از راهاندازی سایت، در کاهش CLS موثر است.
آیا CLS روی سئوی سایت تأثیر میگذارد؟
نمره بالا یا پایین CLS روی تجربۀ کاربری و عملکرد سایت تأثیر میگذارد و این امر موجب کاهش رتبۀ سئوی سایت میشود. مشکلات CLS،به خصوص در سایتهای تبلیغاتی، وقتی کاربر قصد دارد روی لینیک بزند و خرید انجام دهد، تجربۀ کاربری را مختل میسازد.
و اما سخن آخر
CLS یکی از معیارهای مهم برای بهبود تجربه کاربری و عملکرد سایت است که تأثیر مستقیم بر رتبهبندی سئو دارد. عدد CLS مناسب (کمتر از 0.1) نشاندهندۀ ثبات در چیدمان صفحه و کاهش جابهجاییهای غیرمنتظره عناصر است. این امر بهخصوص برای سایتهای دارای تبلیغات اهمیت بالایی دارد، چرا که تغییر ناگهانی چیدمان میتواند کاربر را کلافه کرده و تجربۀ او را مختل کند.
اگر میخواهید سایتی حرفهای و کاربرپسند داشتهباشید، که تجربۀ کاربری مناسب داشته باشد و عملکرد آن در موتورهای جستجو، بهینه باشد، کافی است، با همکاران متخصص ما در «آژانس دیجیتال مارکتینگ سها» تماس بگیرید و از خدمات حرفهای ما در امر طراحی سایت و سئو مشاوره بگیرید.
منابع: web.dev
