تغییر غیرمنتظره چیدمان CLS

مقدمه

تغییر چیدمان تجمعی (Cumulative Layout Shift) یک معیار مهم و کاربر محور از معیارهای core web vitals است که برای اندازه گیری ثبات بصری صفحه است ، زیرا به تعیین تعداد دفعاتی که کاربران تغییر چیدمان غیر منتظره را تجربه می‌کنند ، کمک می‌کند-CLS پایین به تضمین لذت بخش بودن صفحه کمک می‌کند.

آیا تا به حال برایتان پیش آمده که وقتی مقاله ای را به صورت آنلاین می‌خوانید که ناگهان چیزی در صفحه تغییر کند؟ متن حرکت می‌کند و شما جایی را که مشغول خواندن بوده اید گم می‌کند خود را از دست داده اید. یا حتی بدتر: شما در حال ضربه زدن روی پیوند یا دکمه ای هستید ، اما بلافاصله قبل از اینکه انگشت شما فرود بیاید – BOOM – پیوند حرکت می‌کند و در نهایت روی چیز دیگری کلیک می‌کنید!

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

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

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

معیار Cumulative Layout Shift (CLS) به شما کمک می‌کند تا این مشکل را با اندازه گیری میزان وقوع آن در کاربران واقعی برطرف کنید.

CLS چیست ؟

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

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

بهترین نمره برای CLS چیست؟

برای ارائه یک تجربه کاربری خوب ، سایتها باید تلاش کنند که نمره CLS صفحات خود را0.1 یا کمتراز آن نگه دارند.

جزییات Layout shifts (تغییرات چیدمان)

تغییرات چیدمان توسط Layout Instability API تعریف و محاسبه می‌شود، هر زمان عنصری که در viewport قابل مشاهده است موقعیت شروع خود را تغییر دهد (به عنوان مثال ، موقعیت بالا و چپ آن بین دو فریم تغییر کند)، چنین عنصری، عنصر ناپایدار محسوب می‌شود.

البته توجه داشته باشید که layout shifts فقط زمانی اتفاق می‌افتد که عناصر موجود موقعیت شروع خود را تغییر دهند. اگر یک عنصر جدید به DOM اضافه شود یا یک عنصر موجود اندازه خود را تغییر دهد مادامی که این تغییر باعث تغییر موقعیت شروع سایر عناصر نگردد به عنوان تغییر چیدمان (layout shifts) در نظر گرفته نمی‌شود.

نمره تغییر چیدمان

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

layout shift score = impact fraction * distance fraction

کسر ضربه

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

در تصویر بالا عنصر متنی وجود دارد که نیمی از viewport را در یک فریم اشغال می‌کند. سپس ، در فریم بعدی ، عنصر 25 درصد موقعیت top خود را افزایش می‌هد . مستطیل قرمز نشان دهنده مجموع ناحیه اشغال شده توسط عنصر در هر دو فریم است که در این حالت 75٪ از کل نمای صفحه است ، بنابراین کسر ضربه ای آن 0.75 است.

کسر فاصله

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

در مثال بالا ، بزرگترین ابعاد صفحه ارتفاع است و عنصر ناپایدار 25 درصد از ارتفاع صفحه را جابجا کرده است که باعث می‌شود کسر فاصله 0.25 باشد. بنابراین ، در این مثال کسر ضربه 0.75 و کسر فاصله 0.25 است ، بنابراین نمره تغییر چیدمان 0.1875 = 0.75 * 0.75 است.

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

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

با این حال ، موقعیت شروع جعبه سبز تغییر می‌کند ، اما از آنجا که تا حدی از viewport خارج شده است ، هنگام محاسبه کسر ضربه ، منطقه نامرئی در نظر گرفته نمی‌شود. مجموع نواحی قابل اشغال جعبه سبز در هر دو فریم (نشان داده شده با مستطیل قرمز ) برابر با مساحت جعبه سبز در قاب اول است – 50درصد از viewport و کسر ضربه برابر با 0.5 است.

کسر فاصله با پیکان بنفش نشان داده شده است. جعبه سبز حدود 14 درصد از صفحه به سمت پایین حرکت کرده است بنابراین کسر فاصله 0.14 است. و در نتیجه نمره تغییر چیدمان 0.5 * 0.14 = 0.07 است.

در مثال آخر چندین عنصر ناپایدار وجود دارد.

در اولین فریم بالا چهار نتیجه از درخواست API برای لیست حیوانات وجود دارد که به ترتیب حروف الفبا مرتب شده اند. در قاب دوم ، نتایج بیشتری به لیست مرتب شده اضافه می‌شود. اولین مورد در لیست (“Cat”) موقعیت شروع خود را بین فریم ها تغییر نمی‌دهد ، بنابراین پایدار است. به طور مشابه ، موارد جدید اضافه شده به لیست قبلاً در DOM نبودند ، بنابراین موقعیت شروع آنها نیز تغییر نمی‌کند. اما اقلام با برچسب “Dog” ، “Horse” و “Zebra” همه موقعیت های شروع خود را تغییر داده و آنها را به عناصر ناپایداری تبدیل می‌کند.

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

پیکان ها نشان دهنده فاصله هایی هستند که عناصر ناپایدار از موقعیت اولیه خود حرکت کرده اند. عنصر “zebra” ، که توسط پیکان آبی نشان داده شده است ، بیشترین حرکت را در حدود 30 درصد از ارتفاع صفحه را داشته است. این باعث می‌شود کسر فاصله در این مثال 0.3 شود.

نمره تغییر چیدمان برابر با 0.38*0.3=0.1172 است

تغیرات پیش‌بینی شده چیدمان در مقابل تغییرات پیش‌بینی نشده

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

تغییر چیدمان توسط کاربر

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

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

تغییرات چیدمانی که در عرض 500 میلی ثانیه بعد از تعامل کاربر رخ می دهد دارای پرچم hadRecentInput است ، بنابراین می توان آنها را از محاسبات CLS حذف کرد.

انیمیشن‌ها و ترانزیشن‌ها

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

ویژگی transform به شما امکان می دهد عناصر را بدون ایجاد تغییر در چیدمان متحرک کنید:

• به جای تغییر ویژگی‌های height و width ازtransform:scale() استفاده کنید.
• برای جابجایی عناصر ، از تغییر ویژگی های top، right، bottom یا left خودداری کنید و به جای آن از transform:translate() استفاده کنید.

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

CLS را می توان به صورت آزمایشگاهی (in the lab) و یا به صورت میدانی (in the field) اندازه گیری کرد، با استفاده از ابزارهای زیر می‌توانید این کار را انجام دهید. جهت کسب اطلاعات بیشتر در مورد اندازه گیری می توانید به مقاله شروع کار با اندازه گیری web vitals را نیز مطالعه بفرمایید.

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

ابزارهای میدانی اندازه‌گیری CLS

• Chrome User Experience Report
• PageSpeed Insights
• Search Console
• web-vitals JavaScript library

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

• Chrome DevTools
• Lighthouse
• WebPageTest

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

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

let clsValue = 0;
let clsEntries = [];

let sessionValue = 0;
let sessionEntries = [];

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    // Only count layout shifts without recent user input.
    if (!entry.hadRecentInput) {
      const firstSessionEntry = sessionEntries[0];
      const lastSessionEntry = sessionEntries[sessionEntries.length - 1];

      // If the entry occurred less than 1 second after the previous entry and
      // less than 5 seconds after the first entry in the session, include the
      // entry in the current session. Otherwise, start a new session.
      if (sessionValue &&
          entry.startTime - lastSessionEntry.startTime < 1000 &&
          entry.startTime - firstSessionEntry.startTime < 5000) {
        sessionValue += entry.value;
        sessionEntries.push(entry);
      } else {
        sessionValue = entry.value;
        sessionEntries = [entry];
      }
      // If the current session value is larger than the current CLS value,
      // update CLS and the entries contributing to it.
      if (sessionValue > clsValue) {
        clsValue = sessionValue;
        clsEntries = sessionEntries;
        // Log the updated value (and its entries) to the console.
        console.log('CLS:', clsValue, clsEntries)
      }
    }
  }
}).observe({type: 'layout-shift', buffered: true});

این کد روش اصلی محاسبه و ثبت CLS را نشان می دهد. با این حال ، اندازه گیری دقیق CLS به گونه ای که در گزارش تجربه کاربری Chrome (CrUX) اندازه گیری شده است بسیار پیچیده تراست.

تفاوت بین استفاده از متریک و API

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

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

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 ذخیره کنید. این رویکرد تضمین می‌کند که مرورگر می‌تواند مقدار مناسبی از فضا را در هنگام بارگیری تصویر به آن اختصاص دهد.
• هرگز محتوایی را در بالای محتوای موجود قرار ندهید ، مگر در پاسخ به تعامل کاربر.
• به جای متحرک کردن ویژگیها از transform و سایت انیمیشن ها استفاده کنید.

برای آشنایی بیشتر با نحوه بهبود CLS به زودی مقالاتی جامع در این زمینه در اختیارتان قرار خواهیم داد. برای درک عمیتر موضوع می توانید به دو منبع زیر نیز مراجعه کنید

• Understanding Cumulative Layout Shift
• minimizing layout shift