CLS چیست | تفاوت Metric و API

Cumulative Layout Shift (CLS) یا جابجایی متراکم چیدمان

CLS یک Metric کاربر محور مهم برای اندازه‌گیری پایداری بصری است زیرا به سنجش اینکه کاربران چقدر تغییرات غیرمنتظره چیدمان را تجربه می‌کنند، کمک می‌کند- کم بودن میزان CLS این اطمینان را فراهم می‌سازد که آن صفحه مطلوب است. با مقاله CLS چیست همراه تیک4 باشید.

آیا تابه‌حال مشغول خواندن مقاله‌ای آنلاین بودید که تغییرات ناگهانی در آن رخ دهد؟ بدون هشدار، متن حرکت کندو شما مکانی را که بودید گم کنید. یا حتی بدتر: شما می‌خواهید روی یک لینک یا دکمه‌ای بزنید، درست قبل از اینکه انگشتان شما آن را لمس کند، ناگهان ، لینک تغییر می‌کند و درنهایت چیز دیگری را کلیک می‌کنید.اغلب این نوع تجربیات باعث ناراحتی می‌شود ولی در مواردی می‌تواند سبب آسیب واقعی گردد.

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

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

متریک CLS کمک می‌کند که شما با اندازه‌گیری اینکه چقدر این مشکل برای کاربران واقعی رخ می‌دهد، این مسئله را بررسی کنید.

CLS چیست؟

CLS مجموع امتیازات مربوط به هر تغییر چیدمان  را در کل جابجایی‌های غیرمنتظره چیدمان که در طول مدت اجرای یک صفحه رخ می‌دهد اندازه‌گیری می‌کند.

تغییر چیدمان زمانی رخ می‌دهد که المان بصری موقعیت خودش را از یک فریم ارائه‌شده به فریم بعدی تغییر دهد (در قسمت بعد جزئیات مربوط به چگونگی محاسبه امتیاز تغییر چیدمان را می‌بینید) با ادامه مقاله CLS و تفاوت بین Metric و API چیست همراه ما باشید.

چه امتیازی برای CLS خوب است؟

برای داشتن تجربه خوب کاربران، سایت باید تلاش کند که امتیاز CLS آن کمتر از 0.1 باشد. جهت اطمینان از دست یافتن به این هدف برای بیشتر کاربران، یک درگاه خوب برای اندازه‌گیری 75 درصد از بارگذاری صفحه وجود دارد که از طریق موبایل و کامپیوتر تقسیم‌بندی شده است.

برای یادگیری بیشتر در موردتحقیق و روش تحقیق در این زمینه به مبحث تعریف درگاه‌های متریک‌های Core Web Vitals مراجعه کنید.

جزئیات مربوط به جابجایی چیدمان

جابجایی چیدمان با عدم ثبات چیدمان API تعریف می‌شود، هر زمان که وضعیت شروع یک المان مشهود در نقطه نمایش تغییر کند، ورودی‌ها layout-shift رابین دو فریم گزارش می‌دهند (به‌عنوان‌مثال: ََموقعیت چپ و بالا در موقع نوشتن). برخی المان‌ها به‌عنوان المان‌های ناپایدار بررسی می‌شوند.

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

 امتیاز جابجایی چیدمان

برای محاسبه امتیاز جابجایی چیدمان، مرورگر به سایز نقطه نمایش و حرکت المان‌های ناپایدار در نقطه نمایش بین دو فریم ارائه‌شده نگاه می‌کند. امتیاز جابجایی چیدمان حاصل دو معیار این حرکت است: مقدار تأثیر و مقدار فاصله (هر دو در قسمت بعدی تعریف‌شده است)

layout shift score = impact fraction * distance fraction

مقدار تأثیر

مقدار تأثیر، چگونگی تأثیر المان‌های ناپایدار بر محدوده نقطه نمایش بین دو فریم را اندازه‌گیری می‌کند.

پیوند محدوده‌های قابل دید تمام المان‌های ناپایدار فریم قبلی و فریم کنونی- به‌عنوان مقدار محدوده کلی نقطه نمایش – مقدار تاثیرفریم کنونی هستند.

در تصویر بالا یک المان نیمی از نقطه نمایش یک فریم را گرفته است. سپس در فریم بعدی المان‌ها با گرفتن 25% از ارتفاع نقطه نمایش تغییر کمتر داشته‌اند. مستطیل خالدار قرمز نشان‌دهنده پیوند محدوده قابل دید المان‌ها در دو فریم است که در این مورد 75% از کل نقطه نمایش هست، بنابراین مقدار تأثیر در اینجا 0.75 است.

مقدار فاصله

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

در مثال بالا، بزرگ‌ترین بعد ارتفاع است و المان ناپایدار در 25% از نقطه نمایش حرکت کرده است که مقدار فاصله را 0.25 می‌سازد

در این مثال مقدار تأثیر 0.75 و مقدار فاصله 0.25 است بنابراین امتیاز جابجایی چیدمان می‌شود 0.75 * 0.25 = 0.1875

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

مثال بعد نشان می‌دهد که چگونه اضافه کردن محتوی به المان موجود بر امتیاز جابجایی چیدمان تأثیر می‌گذارد. با ادامه مقاله CLS چیست و تفاوت بین Metric و API همراه ما باشید.

دکمه Click Me در قسمت پایین باکس خاکستری با نوشته سیاه اضافه‌شده است که باکس سبز با نوشته سفید را به سمت پایین (و گاهی به خارج از نقطه نمایش) هل می‌دهد.

در این مثال، باکس خاکستری سایز را تغییر می‌دهد اما موقعیت شروع آن تغییر نمی‌کند پس یک مؤلفه ناپایدار نیست.

دکمه Click Me قبلاً در DOM نبود پس موقعیت شروع آن‌هم تغییر نمی‌کند.

اگرچه وضعیت شروع باکس خاکستری تغییر نمی‌کند اما زمانی که کمی به خارج نقطه نمایش حرکت کرده است در محاسبه مقدار تأثیر محدوده غیر قابل مشاهده بررسی نمی‌شود. پیوند محدوده قابل مشاهده باکس خاکستری در هر دو فریم (با مستطیل خال‌خال قرمز نشان داده‌شده است) با محدوده باکس خاکستری فریم اول یعنی 50% از نقطه نمایش یکسان است. پس مقدار تأثیر 0.5 است. با ادامه مقاله CLS چیست و تفاوت بین Metric و API همراه ما باشید.

این مثال آخر المان‌های ناپایدار چندگانه را نشان می‌دهد.

در اولین فریم بالا چهار نتیجه یک درخواست API برای حیوانات است که به‌صورت الفبایی ذخیره‌شده است. در فریم دوم نتایج بیشتری به لیست ذخیره اضافه‌شده است.

مورد اول در این لیست ” گربه” وضعیت شروعش را بین دو فریم تغییر نداده است. به همین نحو، موارد جدیدی به لیست اضافه‌شده‌اند که قبلاً در DOM نبوده‌اند، بنابراین وضعیت شروع آن‌ها هم‌تغییر نکرده است. اما مواردی با عنوان ” سگ”، “اسب” و “زرافه” همگی وضعیت شروعشان جابجا شده است و همه آن‌ها المان‌های ناپایدار شده‌اند.

بازهم مستطیل‌های خالدار قرمز پیوند این سه المان ناپایدار را در قبل و بعد از محدوده‌ها نشان می‌دهند که در این مورد حدود 38% از محدوده نقطه نمایش است (مقدار تأثیر 0.38).

فلش‌ها بیانگر فاصله‌هایی است که المان‌ها از وضعیت شروع خود طی کرده‌اند. المان ” زرافه” با فلش آبی بیشترین حرکت را داشته است یعنی حدود 30% از ارتفاع نقطه نمایش. پس مقدار فاصله در این مورد 0.3 است. امتیاز جابجایی چیدمان  0.1172 = 0.3 * 0.38است

قابل پیش‌بینی بودن یا نبودن جابجایی چیدمان

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

جابجایی چیدمان با ورود کاربر

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

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

جابجایی‌های چیدمان که در 500 میلی‌ثانیه از ورودی کاربر رخ می‌دهد پرچم had Recent Input را ایجاد خواهد نمود بنابراین آن‌ها را می‌توان از محاسبات حذف نمود.

هشدار: پرچم had Recent Input تنها برای رویدادهای ورودی مجزا مانند tap، کلیک یا فشار دکمه درست خواهد بود. تعاملات متوالی مانند اسکرول ها، کشیدن‌ها یا بزرگ‌نمایی به‌عنوان recent input بررسی نمی‌شوند. با ادامه مقاله CLS چیست و تفاوت بین Metric و API همراه ما باشید.

انیمیشن‌ها و تحولات

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

CSS transform کاملاً این امکان را به شما می‌دهد که بدون ایجاد جابجایی چیدمان المان‌ها را متحرک سازید.

• به‌جای تغییر ویژگی height و width، از transform:scale استفاده کنید
• برای حرکت المان‌ها به اطراف از تغییر ویژگی‌های top، right، bottom یا left اجتناب کنید و به‌جای آن از transform: translate استفاده کنید.

چگونه CLS را اندازه‌گیری کنیم؟

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

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

ابزارهای فیلد

• گزارش تجربی کاربران کروم
• دیدگاه‌ها در مورد سرعت صفحه
• کنسول‌های جستجو (گزارش Core Web Vitals)
• آزمایشگاه جاوا اسکریپت web-vitals

ابزارهای آزمایشگاهی

• ابزارهای Dev کروم
• فانوس دریایی یا  لایت هاوس گوگل lighthouse
• تست صفحه اینترنتی

اندازه‌گیری CLS در جاوا اسکریپت

برای اندازه‌گیری CLS در جاوا اسکریپت شما می‌توانید از Layout Instability API یا رابط برنامه کاربردی ناپایداری چیدمان استفاده کنید. مثال زیر نشان می‌دهد که ناظر اجرا ایجاد کنید که متوجه ورودی‌های تغییر چیدمان پیش‌بینی‌نشده شود، آن‌ها را جمع‌آوری کند و در کنسول ثبت کند

هشدار: این کد نشان می‌دهد که چگونه ورودی‌های تغییر چیدمان پیش‌بینی‌نشده را جمع‌آوری و ثبت کنید. بااین‌وجود، اندازه‌گیری CLS در جاوا اسکریپت بسیار پیچیده است. جزئیات را در قسمت زیر ببینید:

let cls = 0;

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    if (!entry.hadRecentInput) {
      cls += entry.value;
      console.log('Current CLS value:', cls, entry);
    }
  }
}).observe({type: 'layout-shift', buffered: true});

در مثال بالا، تمام ورودی‌های تغییر چیدمان که به‌اشتباه پرچم had Recent Input شان ایجادشده برای مشخص نمودن ارزش CLS موجود جمع‌آوری می‌شوند. در بیشتر موارد ارزش CLS موجود درزمانی که صفحه شروع به تخلیه بار می‌کند ارزش نهایی CLS آن صفحه است، اما چند استثناء مهم هم وجود دارد:

بخش زیر تفاوت‌های بین آنچه API گزارش می‌دهد و آنچه متریک محاسبه می‌کند را آورده است.

تفاوت بین Metric و API

• اگر صفحه‌ای در تمام مدت در موقعیت پس‌زمینه باشد نباید هیچ ارزش CLS ای را گزارش دهد.
• اگر صفحه‌ای از حافظه پنهانی قبل یا بعد ((back/forward cache) برگردانده شده است، ارزش CLS آن باید صفر شود زیرا کاربران آن را به‌عنوان مشاهده صفحه مجزا تجربه کرده‌اند.
• API ورودی‌های تغییر چیدمان را برای تغییراتی که در آی فرم رخ‌داده است گزارش نمی‌دهد، اما برای اندازه‌گیری درست CLS شما باید آن‌ها را بررسی کنید. ساب فریم‌ها می‌توانند برای جمع‌بندی گزارش ورودی‌های تغییر چیدمانشان به پرنت فریم از API استفاده کنند.

علاوه بر این موارد استثناء، با توجه به این واقعیت که CLS کل طول عمر یک صفحه را اندازه‌گیری می‌کند دارای پیچیدگی‌هایی هم هست:

• کاربران ممکن است یک تب را یک مدت طولانی- روزها، هفته‌ها، ماه‌ها باز نگه‌دارند. درواقع، ممکن است هرگز یک تب را نبندند.
• در دستگاه‌های عملیاتی موبایل، مرورگرها معمولاً callback های تخلیه بار صفحه برای تب‌های پس‌زمینه را اجرا نمی‌کنند. و این سبب می‌شود گزارش ارزش نهایی مشکل گردد.

برای رسیدگی به این موارد CLS باید هر زمان که صفحه پس‌زمینه است و هر وقت که بدون بار است را گزارش دهد (رویداد تغییر مشهود هردوی این سناریوها را پوشش می‌دهد) و سیستم‌های تحلیلی با دریافت این داده‌ها نیازمند محاسبه ارزش نهایی CLS در پشت گاه یا backend خواهند بود.

توسعه‌دهندگان به‌جای به خاطر سپردن و پرداختن به‌تمامی این موارد، از آزمایشگاه جاوا اسکریپت web-vitals برای اندازه‌گیری CLS در تمامی موارد اشاره‌شده در بالا استفاده می‌کنند.

شما می‌توانید به کد منبع برای دستیابی به CLS رجوع کنید که مثال کاملی است از چگونگی اندازه‌گیری CLS در جاوااسکریت.

در برخی موارد (مانند آی فریم‌های متقاطع) امکان اندازه‌گیری CLS در جاوا اسکریپت وجود ندارد. بخش محدودیت‌های آزمایشگاه web-vitals را با جزئیات مشاهده نمایید. با ادامه مقاله CLS چیست و تفاوت بین Metric و API همراه ما باشید.

import {getCLS} from 'web-vitals';

// Measure and log CLS in all situations
// where it needs to be reported.
getCLS(console.log);

چگونه CLS را ارتقاء دهیم

برای برخی سایت‌ها شما می‌توانید با پیگیری اصول راهنما از تمامی جابجایی‌های چیدمان غیرقابل‌انتظار جلوگیری کنید:

• همیشه ویژگی‌های سایز را برای المان‌های عکس و ویدئو خود درج کنید یا با ابزاری مانند CSS aspect ratio boxes فضای موردنیازتان را رزرو کنید. این روند اطمینان را حاصل می‌سازد که مرورگر می‌تواند مقدار فضای مناسب را حین بارگذاری عکس، اختصاص دهد. به خاطر داشته باشیدکه همچنین برای توقف این عملکرد در مرورگرهایی که سیاست‌های مشخصی را حمایت می‌کنند، از unsized-media feature policy استفاده نمایید.
• هرگز مطلبی را بالای مطلب موجود وارد نکنید مگر در پاسخ به تعاملات کاربر. این سبب می‌شود هر جابجایی چیدمانی قابل پیش‌بینی باشد.
• پویانمایی‌های متحرک را به انیمیشن‌هایی با ویژگی تحریک جابجایی چیدمان ارجح بدانید. تغییرات را تا حدی پویا سازید که امکان وابستگی و استمرار آن از یک موقعیت به موقعیت وجود داشته باشد.

برای تفحص بیشتر در مورد چگونگی ارتقاء CLS به Optimize CLS مراجعه کنید.

منابع بیشتر

• Google Publisher Tag’s guidance on minimizing layout shift
• Understanding Cumulative Layout Shift by Annie Sllivan and Steve Kobes at #PerfMatters(2020)

گزارش تغییرات

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

امیدواریم از مقاله CLS چیست و تفاوت بین Metric و API بهره کافی را برده باشید. از قست دیدگاه ها باما در ارتباط باشید.