تجمیع زمان‌بندی منابع با API عملکرد فرانت‌اند: تحلیل عملکرد بارگذاری

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

درک API زمان‌بندی منابع

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

• نوع آغازگر (Initiator Type): نوع عنصری که درخواست را آغاز کرده است (مثلاً 'img'، 'script'، 'link').
• نام (Name): URL منبع.
• زمان شروع (Start Time): مهر زمانی که مرورگر شروع به دریافت منبع می‌کند.
• شروع دریافت (Fetch Start): مهر زمانی درست قبل از اینکه مرورگر شروع به دریافت منبع از حافظه پنهان دیسک یا شبکه کند.
• شروع/پایان جستجوی دامنه (Domain Lookup Start/End): مهرهای زمانی که نشان‌دهنده شروع و پایان فرآیند جستجوی DNS هستند.
• شروع/پایان اتصال (Connect Start/End): مهرهای زمانی که نشان‌دهنده شروع و پایان اتصال TCP به سرور هستند.
• شروع/پایان درخواست (Request Start/End): مهرهای زمانی که نشان‌دهنده شروع و پایان درخواست HTTP هستند.
• شروع/پایان پاسخ (Response Start/End): مهرهای زمانی که نشان‌دهنده شروع و پایان پاسخ HTTP هستند.
• حجم انتقال (Transfer Size): اندازه منبع منتقل شده بر حسب بایت.
• حجم بدنه کدگذاری شده (Encoded Body Size): اندازه بدنه منبع کدگذاری شده (مثلاً فشرده شده با GZIP).
• حجم بدنه کدگشایی شده (Decoded Body Size): اندازه بدنه منبع کدگشایی شده.
• مدت زمان (Duration): کل زمان صرف شده برای دریافت منبع (responseEnd - startTime).

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

دسترسی به داده‌های زمان‌بندی منابع

API زمان‌بندی منابع از طریق شیء performance در جاوا اسکریپت قابل دسترسی است:

            const resourceTimingEntries = performance.getEntriesByType("resource");

resourceTimingEntries.forEach(entry => {
  console.log(entry.name, entry.duration);
});

            

              
                Copy
              
            
          

این قطعه کد تمام ورودی‌های زمان‌بندی منابع را بازیابی کرده و نام و مدت زمان هر منبع را در کنسول ثبت می‌کند. توجه داشته باشید که به دلایل امنیتی، مرورگرها ممکن است سطح جزئیات ارائه شده توسط API زمان‌بندی منابع را محدود کنند. این موضوع اغلب توسط هدر timingAllowOrigin کنترل می‌شود که به منابع متقابل (cross-origin) اجازه می‌دهد تا اطلاعات زمان‌بندی خود را در معرض نمایش قرار دهند.

تجمیع داده‌های زمان‌بندی منابع

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

بر اساس نوع منبع

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

            const resourceTypes = {};

resourceTimingEntries.forEach(entry => {
  const initiatorType = entry.initiatorType;
  if (!resourceTypes[initiatorType]) {
    resourceTypes[initiatorType] = {
      count: 0,
      totalDuration: 0,
      averageDuration: 0
    };
  }
  resourceTypes[initiatorType].count++;
  resourceTypes[initiatorType].totalDuration += entry.duration;
});

for (const type in resourceTypes) {
  resourceTypes[type].averageDuration = resourceTypes[type].totalDuration / resourceTypes[type].count;
  console.log(type, resourceTypes[type].averageDuration);
}

            

              
                Copy
              
            
          

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

بر اساس دامنه

گروه‌بندی منابع بر اساس دامنه به شما امکان می‌دهد تا عملکرد شبکه‌های مختلف تحویل محتوا (CDN) یا سرویس‌های شخص ثالث را ارزیابی کنید. این می‌تواند به شما در شناسایی دامنه‌های با عملکرد کند و در نظر گرفتن ارائه‌دهندگان جایگزین کمک کند.

            const resourceDomains = {};

resourceTimingEntries.forEach(entry => {
  const domain = new URL(entry.name).hostname;
  if (!resourceDomains[domain]) {
    resourceDomains[domain] = {
      count: 0,
      totalDuration: 0,
      averageDuration: 0
    };
  }
  resourceDomains[domain].count++;
  resourceDomains[domain].totalDuration += entry.duration;
});

for (const domain in resourceDomains) {
  resourceDomains[domain].averageDuration = resourceDomains[domain].totalDuration / resourceDomains[domain].count;
  console.log(domain, resourceDomains[domain].averageDuration);
}

            

              
                Copy
              
            
          

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

بر اساس صفحه

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

این کار اغلب نیازمند یکپارچه‌سازی با سیستم مسیریابی اپلیکیشن شماست. شما باید هر ورودی زمان‌بندی منابع را با URL یا مسیر صفحه فعلی مرتبط کنید. پیاده‌سازی بسته به فریم‌ورکی که استفاده می‌کنید (مثلاً React، Angular، Vue.js) متفاوت خواهد بود.

ایجاد معیارهای سفارشی

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

این کار را می‌توان با استفاده از متدهای performance.mark() و performance.measure() انجام داد:

            performance.mark('component-start');

// Load the component

performance.mark('component-end');

performance.measure('component-load', 'component-start', 'component-end');

const componentLoadTime = performance.getEntriesByName('component-load')[0].duration;

console.log('Component load time:', componentLoadTime);

            

              
                Copy
              
            
          

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

تحلیل داده‌های زمان‌بندی منابع برای بینش‌های عملکردی

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

زمان‌های طولانی جستجوی DNS

• علت: سرور DNS کند، سرور DNS دور، جستجوهای نادر DNS.
• راه‌حل: تغییر به یک ارائه‌دهنده DNS سریع‌تر (مانند Cloudflare، Google Public DNS)، استفاده از CDN برای کش کردن رکوردهای DNS نزدیک‌تر به کاربران، پیاده‌سازی پیش‌واکشی DNS.
• مثال: یک وب‌سایت با هدف کاربران جهانی، زمان‌های بارگذاری کندی را در مناطق خاصی تجربه می‌کرد. تحلیل داده‌های زمان‌بندی منابع، زمان‌های طولانی جستجوی DNS را در آن مناطق نشان داد. تغییر به یک CDN با سرورهای DNS جهانی، زمان‌های جستجوی DNS را به طور قابل توجهی کاهش داد و عملکرد کلی را بهبود بخشید.

زمان‌های اتصال کند

• علت: تراکم شبکه، مشکلات سمت سرور، تداخل فایروال.
• راه‌حل: بهینه‌سازی زیرساخت سرور، استفاده از CDN برای توزیع محتوا نزدیک‌تر به کاربران، پیکربندی فایروال‌ها برای اجازه دادن به ارتباطات کارآمد.
• مثال: یک وب‌سایت تجارت الکترونیک در ساعات اوج خرید با زمان‌های اتصال کند مواجه بود. تحلیل داده‌های زمان‌بندی منابع، بار اضافی سرور را به عنوان علت اصلی نشان داد. ارتقاء سخت‌افزار سرور و بهینه‌سازی کوئری‌های پایگاه داده، زمان‌های اتصال را بهبود بخشید و از کاهش عملکرد در زمان ترافیک بالا جلوگیری کرد.

حجم‌های انتقال بزرگ

• علت: تصاویر بهینه‌نشده، کد کوچک‌سازی‌نشده، دارایی‌های غیرضروری.
• راه‌حل: بهینه‌سازی تصاویر (مثلاً فشرده‌سازی، تغییر اندازه، استفاده از فرمت‌های مدرن مانند WebP)، کوچک‌سازی کد جاوا اسکریپت و CSS، حذف کدها و دارایی‌های استفاده نشده، فعال کردن فشرده‌سازی GZIP یا Brotli.
• مثال: یک وب‌سایت خبری از تصاویر بزرگ و بهینه‌نشده استفاده می‌کرد که زمان بارگذاری صفحه را به طور قابل توجهی افزایش می‌داد. بهینه‌سازی تصاویر با استفاده از ابزارهایی مانند ImageOptim و پیاده‌سازی بارگذاری تنبل (lazy loading)، حجم انتقال تصاویر را کاهش داد و عملکرد بارگذاری صفحه را بهبود بخشید.
• ملاحظات بین‌المللی‌سازی: اطمینان حاصل کنید که بهینه‌سازی تصویر، اندازه‌ها و رزولوشن‌های مختلف صفحه نمایش را که در مناطق مختلف رایج است، در نظر می‌گیرد.

زمان‌های پاسخ کند سرور

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

منابع مسدودکننده رندر

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

یکپارچه‌سازی داده‌های زمان‌بندی منابع با ابزارهای نظارت بر عملکرد

جمع‌آوری و تحلیل دستی داده‌های زمان‌بندی منابع می‌تواند زمان‌بر باشد. خوشبختانه، چندین ابزار نظارت بر عملکرد می‌توانند این فرآیند را خودکار کرده و بینش‌های لحظه‌ای در مورد عملکرد وب‌سایت شما ارائه دهند. این ابزارها معمولاً داده‌های زمان‌بندی منابع را در پس‌زمینه جمع‌آوری کرده و آن را در یک داشبورد کاربرپسند ارائه می‌دهند.

ابزارهای محبوب نظارت بر عملکرد که از داده‌های زمان‌بندی منابع پشتیبانی می‌کنند عبارتند از:

• Google PageSpeed Insights: توصیه‌هایی برای بهبود سرعت صفحه بر اساس معیارهای مختلف عملکرد، از جمله داده‌های زمان‌بندی منابع، ارائه می‌دهد.
• WebPageTest: به شما امکان می‌دهد عملکرد وب‌سایت خود را از مکان‌ها و مرورگرهای مختلف آزمایش کنید و اطلاعات دقیق زمان‌بندی منابع را ارائه می‌دهد.
• New Relic: قابلیت‌های جامع نظارت بر عملکرد، از جمله داده‌های زمان‌بندی منابع و مصورسازی‌های لحظه‌ای را ارائه می‌دهد.
• Datadog: معیارهای دقیق زمان‌بندی منابع را در کنار نظارت گسترده‌تر بر زیرساخت و اپلیکیشن ارائه می‌دهد و دیدی جامع از عملکرد را فراهم می‌کند.
• Sentry: اگرچه عمدتاً بر ردیابی خطا متمرکز است، Sentry همچنین ویژگی‌های نظارت بر عملکرد را ارائه می‌دهد، از جمله داده‌های زمان‌بندی منابع برای ارتباط دادن مشکلات عملکرد با خطاهای خاص.
• Lighthouse: یک ابزار خودکار و متن‌باز برای بهبود کیفیت صفحات وب. این ابزار ممیزی‌هایی برای عملکرد، دسترسی‌پذیری، برنامه‌های وب پیشرو، سئو و موارد دیگر دارد. می‌توان آن را از Chrome DevTools، از خط فرمان یا به عنوان یک ماژول Node اجرا کرد.

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

ملاحظات اخلاقی و حریم خصوصی کاربر

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

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

تکنیک‌های پیشرفته و روندهای آینده

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

Server Timing API

Server Timing API به سرورها اجازه می‌دهد تا اطلاعات زمان‌بندی مربوط به زمان پردازش خود را برای یک درخواست در معرض نمایش قرار دهند. این اطلاعات را می‌توان با داده‌های زمان‌بندی منابع ترکیب کرد تا تصویر کامل‌تری از عملکرد سرتاسری ارائه دهد.

Long Tasks API

Long Tasks API وظایفی را که نخ اصلی را برای مدت طولانی مسدود می‌کنند و باعث ایجاد لگ در رابط کاربری و مشکلات پاسخ‌گویی می‌شوند، شناسایی می‌کند. این اطلاعات را می‌توان برای بهینه‌سازی کد جاوا اسکریپت و بهبود تجربه کاربر استفاده کرد.

WebAssembly (Wasm)

WebAssembly یک فرمت دستورالعمل باینری برای ماشین‌های مجازی است که عملکردی نزدیک به بومی (native) را در مرورگر فراهم می‌کند. استفاده از Wasm برای وظایف حیاتی از نظر عملکرد می‌تواند زمان بارگذاری و عملکرد کلی را به طور قابل توجهی بهبود بخشد.

HTTP/3

HTTP/3 آخرین نسخه پروتکل HTTP است که از پروتکل انتقال QUIC برای ارائه عملکرد و قابلیت اطمینان بهبود یافته استفاده می‌کند. HTTP/3 مزایای متعددی نسبت به HTTP/2 دارد، از جمله کاهش تأخیر و مدیریت اتصال بهبود یافته.

نتیجه‌گیری

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

بینش عملی: با پیاده‌سازی تجمیع اولیه زمان‌بندی منابع بر اساس نوع منبع و دامنه شروع کنید. این کار بینش‌های فوری در مورد محل گلوگاه‌های عملکرد شما فراهم می‌کند. سپس، با یک ابزار نظارت بر عملکرد مانند Google PageSpeed Insights یا WebPageTest یکپارچه‌سازی کنید تا جمع‌آوری و تحلیل داده‌ها را خودکار کنید.