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

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

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

امتیاز CLS چیست؟

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

 

[box type=”shadow” align=”aligncenter” class=”” width=””]CLS score = Σ impact fraction * distance fraction[/box]

 

در این فرمول، مقدار impact fraction نشان دهنده میزان تغییر موقعیت المان‌ها در صفحه در هر لحظه و distance fraction نیز میزان فاصله‌ای است که المان در هر لحظه حرکت می‌کند.

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

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

ضریب تاثیر (impact fraction) در CLS

ضریب تأثیر یا Impact Fraction در CLS، جزئی از فرمول محاسبه امتیاز CLS است که نشان دهنده میزان تاثیر المانی است که در تغییرات موقعیت در صفحه دخیل است.

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

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

ضریب فاصله (distance fraction)

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

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

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

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

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

CLSیکی از معیارهای Core Web Vitals است که به بهبود تجربه کاربری صفحات وب کمک می کند. برای اندازه‌گیری CLS در جاوا اسکریپت، می توان از  Performance API  در مرورگرهایی که از آن پشتیبانی می‌کنند، استفاده کرد.

این API اطلاعاتی از جمله وقایع حین بارگذاری صفحه‌ها و سایر معیارهای مربوط به عملکرد صفحه را فراهم می‌کند.

به دلیل نیاز به زمان بندی دقیق بارگذاری المان‌های صفحه، برای اندازه‌گیری CLS در جاوا اسکریپت، می‌توان از تابع Performance Observer استفاده کرد. این تابع برای رصد تغییرات در متغیرهای مشخص در فرایند بارگیری صفحه استفاده می شود. همچنین برای ارزیابی CLS باید مجموع impact fraction و distance fraction  را پیمایش کرده و مقدار آن را محاسبه کرد.

در کل، استفاده از Performance API و تابع Performance Observer باعث بهبود تجربه کاربری صفحات وب می شود و به همراه استفاده از فناوری های دیگر می‌تواند به بهبود سایت‌ها کمک کند.

برای اندازه‌گیری CLS در جاوا اسکریپت، 2 روش وجود دارد:

  • از Performance API استفاده کرد: برای اندازه‌گیری CLS با استفاده از Performance API، می‌توانید از متغیرهای target.boundingClientRect و event.previuosTarge.boundingClientRect  استفاده کنید. این متغیرها اطلاعاتی را در مورد مکان المان‌ها در صفحه فراهم می‌کنند. برای محاسبه impact fraction و distance fraction، می‌توانید با استفاده از فرمول زیر آن‌ها را محاسبه کنید:

 

const calcCLS = () => {
  const observer = new PerformanceObserver((list) => {
      const entries = list.getEntries();
      entries.forEach((entry) => {
          if (entry.hadRecentInput) {
              return;
          }
          const cls = entry.value.toFixed(4);
          console.log(`CLS value is: ${cls}`);
      });
  });
  observer.observe({ type: 'layout-shift', buffered: true });
};

// درخواست را برای اندازه‌گیری درخواست می‌کنیم
window.onload = calcCLS;
  • از Lighthouse استفاده کنید: Lighthouse یک ابزار مفید است که به شما کمک می‌کند تا معیارهای Core Web Vitals را ارزیابی کنید.با استفاده از این ابزار، می‌توانید بررسی کنید که چه میزانی CLS در صفحات وب شما وجود دارد و چگونه آن را بهبود بخشید. برای استفاده از Lighthouse، می‌توانید از بخش Audits در بخش Developer Tools مرورگرهایی مانند Google Chrome، استفاده کنید.

آموزش کامل بهبود CLS

CLS  به عنوان یکی از معیارهای Core Web Vitals برای بهبود تجربه کاربری در صفحات وب بسیار مهم است. در زیر چند راهکار برای بهبود CLS آورده شده است:

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

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

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

برای کاهش زمان لود المان‌های داینامیک، بهینه‌سازی روند کدنویسی و سرعت شبکه می‌تواند مفید باشد.

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

  1. 5. تعیین اندازه محتوای تصویر: تصاویری که با اندازه‌های غیر معمول بارگذاری می‌شوند و یکی از علل تاثیرگذار در CLS است.

در کل، به منظور بهبود امتیاز CLS صفحات وب، لازم است به طراحی رابط کاربری و استفاده از تکنولوژی‌های مختلف به صورت جدی پرداخته شود.