تجمیع متریک‌های Performance Observer در فرانت‌اند: تسلط بر جمع‌آوری آمار

در چشم‌انداز توسعه وب امروزی، ارائه یک تجربه کاربری روان و پاسخ‌گو از اهمیت بالایی برخوردار است. یک وب‌سایت کند یا با تأخیر می‌تواند منجر به نارضایتی کاربران، نرخ پرش بالاتر و در نهایت، از دست دادن کسب‌وکار شود. بنابراین، نظارت و بهینه‌سازی عملکرد فرانت‌اند بسیار حیاتی است. Performance Observer API یک مکانیزم قدرتمند برای جمع‌آوری و تجمیع متریک‌های عملکرد ارائه می‌دهد که به توسعه‌دهندگان اجازه می‌دهد گلوگاه‌ها را شناسایی کرده و تجربه کاربری کلی را بهبود بخشند.

Performance Observer API چیست؟

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

مزایای کلیدی استفاده از Performance Observer API:

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

درک انواع ورودی‌های عملکرد (Performance Entry Types)

Performance Observer API به شما اجازه می‌دهد انواع مختلفی از ورودی‌های عملکرد را مشاهده کنید که هر کدام بینش‌های خاصی در مورد جنبه‌های مختلف عملکرد فرانت‌اند ارائه می‌دهند. برخی از مهم‌ترین انواع ورودی‌ها عبارتند از:

• paint: زمانی را که طول می‌کشد تا مرورگر اولین رنگ محتوایی (FCP) و بزرگترین رنگ محتوایی (LCP) را رندر کند، اندازه‌گیری می‌کند. FCP نقطه‌ای را مشخص می‌کند که مرورگر اولین قطعه محتوا از DOM را رندر می‌کند و اولین بازخورد بصری را به کاربر ارائه می‌دهد. LCP نقطه‌ای را مشخص می‌کند که بزرگترین عنصر محتوا رندر می‌شود و نشان می‌دهد که محتوای اصلی صفحه بارگذاری شده است.
• resource: اطلاعات دقیقی در مورد بارگذاری منابع فردی مانند تصاویر، اسکریپت‌ها و شیوه‌نامه‌ها ارائه می‌دهد. این نوع ورودی شامل متریک‌هایی مانند زمان جستجوی DNS، زمان اتصال، مدت زمان درخواست و اندازه پاسخ است.
• navigation: زمانی را که برای پیمایش بین صفحات مختلف طول می‌کشد، اندازه‌گیری می‌کند. این نوع ورودی شامل متریک‌هایی مانند زمان تغییر مسیر، زمان جستجوی DNS، زمان اتصال و زمان تا اولین بایت (TTFB) است.
• longtask: وظایف طولانی‌مدتی را که ترد اصلی را مسدود می‌کنند و به طور بالقوه باعث مشکلات عملکرد می‌شوند، شناسایی می‌کند. این وظایف می‌توانند منجر به تأخیر در به‌روزرسانی‌های رندر و پاسخ به تعاملات کاربر شوند.
• event: اطلاعات زمان‌بندی مربوط به رویدادهای خاص DOM مانند کلیک‌ها، فشردن کلیدها و اسکرول‌ها را ثبت می‌کند.
• layout-shift: جابجایی‌های غیرمنتظره طرح‌بندی در صفحه را که می‌توانند تجربه کاربری را مختل کنند، تشخیص می‌دهد. این جابجایی‌ها اغلب به دلیل بارگذاری دینامیک محتوا یا تغییر اندازه عناصر ایجاد می‌شوند. جابجایی تجمعی طرح‌بندی (CLS) از این ورودی‌ها محاسبه می‌شود.
• largest-contentful-paint: زمان رندر بزرگترین عنصر محتوای قابل مشاهده در ویوپورت را اندازه‌گیری می‌کند.
• first-input-delay: تأخیر بین تعامل کاربر و پاسخ مرورگر را اندازه‌گیری می‌کند.

راه‌اندازی یک Performance Observer

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

            const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach(entry => {
    console.log(entry.name, entry.entryType, entry.startTime, entry.duration);
  });
});

observer.observe({ entryTypes: ['paint', 'resource'] });

            

              
                Copy
              
            
          

در این مثال، ما یک PerformanceObserver جدید ایجاد می‌کنیم که به رویدادهای paint و resource گوش می‌دهد. تابع بازگشتی یک PerformanceObserverEntryList دریافت می‌کند که شامل آرایه‌ای از اشیاء PerformanceEntry است. هر PerformanceEntry اطلاعات دقیقی در مورد رویداد مشاهده شده، مانند نام، نوع ورودی، زمان شروع و مدت زمان آن ارائه می‌دهد.

تجمیع متریک‌ها و جمع‌آوری آمار

در حالی که Performance Observer API داده‌های عملکرد خام را ارائه می‌دهد، اغلب لازم است این داده‌ها را تجمیع کرده و آمار را برای به دست آوردن بینش‌های معنادار محاسبه کنیم. در اینجا برخی از تکنیک‌های رایج تجمیع متریک آورده شده است:

۱. میانگین‌گیری

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

مثال (جاوا اسکریپت):

            let imageLoadTimes = [];

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach(entry => {
    if (entry.entryType === 'resource' && entry.initiatorType === 'img') {
      imageLoadTimes.push(entry.duration);
    }
  });
});

observer.observe({ entryTypes: ['resource'] });

// Function to calculate the average
function calculateAverage(array) {
  if (array.length === 0) {
    return 0;
  }
  const sum = array.reduce((a, b) => a + b, 0);
  return sum / array.length;
}

// After a period of time, calculate the average image load time
setTimeout(() => {
  const averageLoadTime = calculateAverage(imageLoadTimes);
  console.log('Average Image Load Time:', averageLoadTime, 'ms');
}, 5000); // Collect data for 5 seconds

            

              
                Copy
              
            
          

۲. صدک‌ها

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

مثال (جاوا اسکریپت - نیاز به یک تابع کمکی برای محاسبه صدک دارد):

            // Utility function to calculate percentile (example implementation)
function calculatePercentile(arr, percentile) {
  const sortedArr = arr.slice().sort((a, b) => a - b);
  const index = (percentile / 100) * (sortedArr.length - 1);

  if (Number.isInteger(index)) {
    return sortedArr[index];
  } else {
    const lower = Math.floor(index);
    const upper = Math.ceil(index);
    const weight = index - lower;
    return sortedArr[lower] * (1 - weight) + sortedArr[upper] * weight;
  }
}

let pageLoadTimes = [];

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach(entry => {
    if (entry.entryType === 'navigation') {
      pageLoadTimes.push(entry.duration);
    }
  });
});

observer.observe({ entryTypes: ['navigation'] });

// After a period of time, calculate the 95th percentile page load time
setTimeout(() => {
  const p95LoadTime = calculatePercentile(pageLoadTimes, 95);
  console.log('95th Percentile Page Load Time:', p95LoadTime, 'ms');
}, 5000); // Collect data for 5 seconds

            

              
                Copy
              
            
          

۳. هیستوگرام‌ها

هیستوگرام‌ها نمایش بصری از توزیع متریک‌های عملکرد ارائه می‌دهند. آنها داده‌ها را در دسته‌هایی (buckets) گروه‌بندی می‌کنند و فراوانی مقادیر را در هر دسته نشان می‌دهند. این می‌تواند به شناسایی الگوها و روندهایی کمک کند که ممکن است از میانگین‌ها یا صدک‌های ساده مشخص نباشند. به عنوان مثال، یک هیستوگرام از اندازه‌های تصاویر می‌تواند به سرعت نشان دهد که آیا تعداد زیادی از تصاویر به طور غیرضروری بزرگ هستند یا خیر.

مثال (مفهومی - برای تجسم هیستوگرام به یک کتابخانه نمودارسازی نیاز دارد):

            // Conceptual Example (requires a charting library like Chart.js)
let imageSizes = [];

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach(entry => {
    if (entry.entryType === 'resource' && entry.initiatorType === 'img') {
      // Assuming 'decodedBodySize' represents the image size
      imageSizes.push(entry.decodedBodySize);
    }
  });
});

observer.observe({ entryTypes: ['resource'] });

// After a period of time, create a histogram
setTimeout(() => {
  // 1. Define bucket ranges (e.g., 0-100KB, 100-200KB, etc.)
  const buckets = [
    { min: 0, max: 100 * 1024, count: 0 }, // 0-100KB
    { min: 100 * 1024, max: 200 * 1024, count: 0 }, // 100-200KB
    { min: 200 * 1024, max: Infinity, count: 0 }  // 200KB+
  ];

  // 2. Populate the buckets
  imageSizes.forEach(size => {
    for (const bucket of buckets) {
      if (size >= bucket.min && size <= bucket.max) {
        bucket.count++;
        break;
      }
    }
  });

  // 3. Use a charting library (e.g., Chart.js) to visualize the histogram
  console.log('Histogram Data:', buckets);
  // Example:  You would then use Chart.js to create a bar chart
  // representing the count for each bucket.
}, 5000); // Collect data for 5 seconds

            

              
                Copy
              
            
          

۴. نرخ خطا

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

مثال (جاوا اسکریپت):

            let failedResourceCount = 0;
let totalResourceCount = 0;

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach(entry => {
    if (entry.entryType === 'resource') {
      totalResourceCount++;
      if (entry.responseStatus >= 400) { // Consider 4xx and 5xx as errors
        failedResourceCount++;
      }
    }
  });
});

observer.observe({ entryTypes: ['resource'] });

// After a period of time, calculate the error rate
setTimeout(() => {
  const errorRate = (totalResourceCount > 0) ? (failedResourceCount / totalResourceCount) * 100 : 0;
  console.log('Resource Error Rate:', errorRate.toFixed(2), '%');
}, 5000); // Collect data for 5 seconds

            

              
                Copy
              
            
          

مثال‌ها و کاربردهای عملی

۱. بهینه‌سازی بارگذاری تصاویر

با ردیابی نوع ورودی resource، می‌توانید تصاویر با بارگذاری کند را شناسایی کرده و تحویل آنها را بهینه کنید. این ممکن است شامل فشرده‌سازی تصاویر، استفاده از فرمت‌های مناسب تصویر (مانند WebP) یا پیاده‌سازی بارگذاری تنبل (lazy loading) باشد. برای مخاطبان بین‌المللی، استفاده از CDN با حضور جهانی را برای اطمینان از تحویل سریع تصاویر بدون توجه به موقعیت مکانی کاربر در نظر بگیرید.

۲. کاهش جابجایی‌های طرح‌بندی

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

۳. بهبود تأخیر ورودی اول (FID)

ردیابی نوع ورودی first-input-delay به شناسایی وظایف طولانی‌مدتی که ترد اصلی را مسدود می‌کنند، کمک می‌کند. سپس می‌توانید کد جاوا اسکریپت خود را برای کاهش زمان صرف شده برای این وظایف بهینه کنید. تقسیم کد (code splitting) و به تعویق انداختن وظایف غیرضروری را برای بهبود FID در نظر بگیرید. این به ویژه برای برنامه‌های وب تعاملی بسیار مهم است. اگر وب‌سایت شما به صورت جهانی استفاده می‌شود، بهینه‌سازی بسته‌های جاوا اسکریپت را برای مناطقی با پهنای باند کمتر یا دستگاه‌های قدیمی‌تر در نظر بگیرید.

۴. نظارت بر اسکریپت‌های شخص ثالث

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

۵. تست A/B بهبودهای عملکرد

Performance Observer API می‌تواند برای اندازه‌گیری تأثیر بهینه‌سازی‌های عملکرد استفاده شود. با مقایسه متریک‌های عملکرد قبل و بعد از پیاده‌سازی یک تغییر، می‌توانید تعیین کنید که آیا این تغییر تأثیر مثبت یا منفی داشته است. از تست A/B برای مقایسه استراتژی‌های مختلف بهینه‌سازی و شناسایی مؤثرترین آنها استفاده کنید. این برای بهبودهای عملکرد مبتنی بر داده ضروری است.

تکنیک‌های پیشرفته

۱. استفاده از بافر برای تحلیل بلندمدت

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

            const observer = new PerformanceObserver((list) => {
  // Process entries
});

observer.observe({ entryTypes: ['navigation'], buffered: true });

            

              
                Copy
              
            
          

۲. ادغام با پلتفرم‌های تحلیلی

می‌توانید Performance Observer API را با پلتفرم تحلیلی موجود خود ادغام کنید تا متریک‌های عملکرد را در کنار سایر داده‌های رفتار کاربر ردیابی کنید. این به شما امکان می‌دهد مشکلات عملکرد را با متریک‌های کسب‌وکار، مانند نرخ تبدیل و درآمد، مرتبط کنید. ادغام با ابزارهای تحلیلی محبوب مانند Google Analytics، Adobe Analytics یا داشبوردهای سفارشی را در نظر بگیرید. اطمینان حاصل کنید که هنگام جمع‌آوری و انتقال داده‌های کاربر، با مقررات حریم خصوصی مانند GDPR مطابقت دارید.

۳. استفاده از Web Workers برای تحلیل خارج از ترد اصلی

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

ملاحظات برای مخاطبان جهانی

هنگام بهینه‌سازی عملکرد فرانت‌اند برای مخاطبان جهانی، توجه به موارد زیر مهم است:

• شرایط شبکه: کاربران در مناطق مختلف ممکن است سرعت شبکه و تأخیر متفاوتی داشته باشند. وب‌سایت خود را برای اتصالات با پهنای باند کم بهینه کنید.
• قابلیت‌های دستگاه: کاربران ممکن است با دستگاه‌های متنوعی، از گوشی‌های هوشمند پیشرفته تا گوشی‌های ساده، به وب‌سایت شما دسترسی داشته باشند. وب‌سایت خود را برای طیف وسیعی از قابلیت‌های دستگاه بهینه کنید.
• شبکه‌های تحویل محتوا (CDN): از یک CDN برای تحویل محتوای وب‌سایت خود از سرورهای واقع در سراسر جهان استفاده کنید. این کار تأخیر را کاهش داده و زمان بارگذاری صفحه را برای کاربران در مناطق مختلف بهبود می‌بخشد.
• بومی‌سازی: وب‌سایت خود را برای زبان‌ها و فرهنگ‌های مختلف بهینه کنید. این شامل ترجمه محتوا، استفاده از فرمت‌های مناسب تاریخ و زمان و در نظر گرفتن تفاوت‌های فرهنگی در طراحی است.
• حریم خصوصی داده‌ها: از مقررات حریم خصوصی داده‌ها در کشورهای مختلف، مانند GDPR در اروپا و CCPA در کالیفرنیا، آگاه باشید. اطمینان حاصل کنید که هنگام جمع‌آوری و پردازش داده‌های کاربر با این مقررات مطابقت دارید.

نتیجه‌گیری

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

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