تحليل أداء التحميل: تجميع بيانات واجهة برمجة تطبيقات توقيت الموارد في الواجهة الأمامية

في إطار السعي لتقديم تجارب مستخدم استثنائية، يعد تحسين أداء الواجهة الأمامية أمرًا بالغ الأهمية. يكمن جانب حاسم من هذا التحسين في فهم كيفية تحميل الموارد على موقعك أو تطبيقك. توفر واجهة برمجة تطبيقات توقيت الموارد (Resource Timing 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). قد تشير أوقات الاتصال البطيئة إلى ازدحام الشبكة أو مشكلات من جانب الخادم. قد تبرز أحجام النقل الكبيرة فرصًا لتحسين الصور أو تصغير الكود.

الوصول إلى بيانات توقيت الموارد

يتم الوصول إلى واجهة برمجة تطبيقات توقيت الموارد من خلال كائن performance في JavaScript:

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

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

            

              
                Copy
              
            
          

يسترد هذا المقتطف البرمجي جميع إدخالات توقيت الموارد ويسجل اسم ومدة كل مورد في وحدة التحكم. لاحظ أنه لأسباب أمنية، قد تحد المتصفحات من مستوى التفاصيل التي توفرها واجهة برمجة تطبيقات توقيت الموارد. غالبًا ما يتم التحكم في ذلك بواسطة ترويسة timingAllowOrigin، التي تسمح للموارد من مصادر مختلفة بالكشف عن معلومات التوقيت الخاصة بها.

تجميع بيانات توقيت الموارد

تعتبر بيانات توقيت الموارد الخام مفيدة، ولكن للحصول على رؤى قابلة للتنفيذ، يجب تجميعها وتحليلها. يتضمن التجميع تجميع البيانات وتلخيصها لتحديد الاتجاهات والأنماط. يمكن القيام بذلك بعدة طرق:

حسب نوع المورد

يسمح تجميع الموارد حسب النوع (مثل الصور، السكريبتات، أوراق الأنماط) بمقارنة متوسط أوقات التحميل لكل فئة. يمكن أن يكشف هذا عما إذا كانت أنواع معينة من الموارد أبطأ باستمرار من غيرها.

            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
              
            
          

يحسب هذا الكود متوسط وقت التحميل لكل نوع مورد ويسجله في وحدة التحكم. على سبيل المثال، قد تجد أن الصور لها متوسط وقت تحميل أعلى بكثير من السكريبتات، مما يشير إلى الحاجة إلى تحسين الصور.

حسب النطاق

يسمح تجميع الموارد حسب النطاق بتقييم أداء شبكات توصيل المحتوى (CDNs) المختلفة أو خدمات الجهات الخارجية. يمكن أن يساعدك هذا في تحديد النطاقات ذات الأداء البطيء والنظر في مزودين بديلين.

            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).

إنشاء مقاييس مخصصة

بالإضافة إلى المقاييس القياسية التي توفرها واجهة برمجة تطبيقات توقيت الموارد، يمكنك إنشاء مقاييس مخصصة لتتبع جوانب محددة من أداء تطبيقك. على سبيل المثال، قد ترغب في قياس الوقت الذي يستغرقه تحميل مكون معين أو عرض عنصر معين.

يمكن تحقيق ذلك باستخدام طريقتي 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
              
            
          

يقيس هذا المقتطف البرمجي الوقت الذي يستغرقه تحميل مكون ويسجله في وحدة التحكم. يمكنك بعد ذلك تجميع هذه المقاييس المخصصة بنفس طريقة مقاييس واجهة برمجة تطبيقات توقيت الموارد القياسية.

تحليل بيانات توقيت الموارد للحصول على رؤى الأداء

بمجرد تجميع بيانات توقيت الموارد، يمكنك استخدامها لتحديد مجالات محددة لتحسين الأداء. إليك بعض السيناريوهات الشائعة والحلول المحتملة:

أوقات بحث DNS طويلة

• السبب: خادم DNS بطيء، خادم DNS بعيد، عمليات بحث DNS غير متكررة.
• الحل: التحول إلى مزود DNS أسرع (مثل Cloudflare، Google Public DNS)، الاستفادة من شبكة توصيل المحتوى (CDN) لتخزين سجلات DNS مؤقتًا بالقرب من المستخدمين، تنفيذ الجلب المسبق لـ DNS.
• مثال: واجه موقع ويب يستهدف المستخدمين على مستوى العالم أوقات تحميل بطيئة في مناطق معينة. كشف تحليل بيانات توقيت الموارد عن أوقات بحث DNS طويلة في تلك المناطق. أدى التحول إلى شبكة CDN بخوادم DNS عالمية إلى تقليل أوقات بحث DNS بشكل كبير وتحسين الأداء العام.

أوقات اتصال بطيئة

• السبب: ازدحام الشبكة، مشكلات من جانب الخادم، تداخل جدار الحماية.
• الحل: تحسين البنية التحتية للخادم، استخدام شبكة CDN لتوزيع المحتوى بالقرب من المستخدمين، تكوين جدران الحماية للسماح بالاتصال الفعال.
• مثال: واجه موقع تجارة إلكترونية أوقات اتصال بطيئة خلال ساعات التسوق الذروة. أشار تحليل بيانات توقيت الموارد إلى الحمل الزائد على الخادم كسبب رئيسي. أدى ترقية أجهزة الخادم وتحسين استعلامات قاعدة البيانات إلى تحسين أوقات الاتصال ومنع تدهور الأداء أثناء حركة المرور الكثيفة.

أحجام نقل كبيرة

• السبب: صور غير مُحسَّنة، كود غير مُصغَّر، أصول غير ضرورية.
• الحل: تحسين الصور (مثل الضغط، تغيير الحجم، استخدام تنسيقات حديثة مثل WebP)، تصغير كود JavaScript و CSS، إزالة الكود والأصول غير المستخدمة، تمكين ضغط GZIP أو Brotli.
• مثال: استخدم موقع إخباري صورًا كبيرة وغير مُحسَّنة زادت بشكل كبير من أوقات تحميل الصفحة. أدى تحسين الصور باستخدام أدوات مثل ImageOptim وتنفيذ التحميل الكسول إلى تقليل أحجام نقل الصور وتحسين أداء تحميل الصفحة.
• اعتبارات التدويل: تأكد من أن تحسين الصور يأخذ في الاعتبار أحجام الشاشات المختلفة ودقتها الشائعة في مختلف المناطق.

أوقات استجابة الخادم البطيئة

• السبب: كود غير فعال من جانب الخادم، اختناقات في قاعدة البيانات، زمن وصول الشبكة.
• الحل: تحسين الكود من جانب الخادم، تحسين أداء قاعدة البيانات، استخدام شبكة CDN لتخزين المحتوى مؤقتًا بالقرب من المستخدمين، تنفيذ التخزين المؤقت لـ HTTP.
• مثال: عانت منصة وسائط اجتماعية من أوقات استجابة خادم بطيئة بسبب استعلامات قاعدة بيانات غير فعالة. أدى تحسين استعلامات قاعدة البيانات وتنفيذ آليات التخزين المؤقت إلى تقليل أوقات استجابة الخادم بشكل كبير وتحسين الأداء العام.

الموارد التي تعيق العرض

• السبب: JavaScript و CSS المتزامنان اللذان يمنعان عرض الصفحة.
• الحل: تأجيل تحميل JavaScript غير الحرج، تضمين CSS الحرج، استخدام التحميل غير المتزامن للسكريبتات، إزالة CSS غير المستخدم.
• مثال: استخدم موقع مدونة ملف CSS كبيرًا يعيق العرض مما أدى إلى تأخير العرض الأولي للصفحة. أدى تضمين CSS الحرج وتأجيل تحميل CSS غير الحرج إلى تحسين الأداء المتصور للموقع.

دمج بيانات توقيت الموارد في أدوات مراقبة الأداء

قد يكون جمع وتحليل بيانات توقيت الموارد يدويًا مستهلكًا للوقت. لحسن الحظ، يمكن للعديد من أدوات مراقبة الأداء أتمتة هذه العملية وتوفير رؤى في الوقت الفعلي حول أداء موقع الويب الخاص بك. تقوم هذه الأدوات عادةً بجمع بيانات توقيت الموارد في الخلفية وتقديمها في لوحة تحكم سهلة الاستخدام.

تشمل أدوات مراقبة الأداء الشائعة التي تدعم بيانات توقيت الموارد ما يلي:

• Google PageSpeed Insights: يقدم توصيات لتحسين سرعة الصفحة بناءً على مقاييس أداء مختلفة، بما في ذلك بيانات توقيت الموارد.
• WebPageTest: يسمح لك باختبار أداء موقع الويب الخاص بك من مواقع ومتصفحات مختلفة، مع توفير معلومات توقيت مفصلة للموارد.
• New Relic: يقدم إمكانات شاملة لمراقبة الأداء، بما في ذلك بيانات توقيت الموارد في الوقت الفعلي والتصورات.
• Datadog: يوفر مقاييس توقيت مفصلة للموارد إلى جانب مراقبة أوسع للبنية التحتية والتطبيقات، مما يوفر رؤية شاملة للأداء.
• Sentry: يركز بشكل أساسي على تتبع الأخطاء، ولكنه يوفر أيضًا ميزات لمراقبة الأداء، بما في ذلك بيانات توقيت الموارد لربط مشكلات الأداء بأخطاء محددة.
• Lighthouse: أداة آلية مفتوحة المصدر لتحسين جودة صفحات الويب. تحتوي على عمليات تدقيق للأداء وإمكانية الوصول وتطبيقات الويب التقدمية وتحسين محركات البحث والمزيد. يمكن تشغيلها من أدوات مطوري Chrome أو من سطر الأوامر أو كوحدة Node.

من خلال دمج بيانات توقيت الموارد في هذه الأدوات، يمكنك الحصول على فهم أعمق لأداء موقع الويب الخاص بك وتحديد مجالات التحسين بشكل أكثر فعالية.

الاعتبارات الأخلاقية وخصوصية المستخدم

عند جمع وتحليل بيانات توقيت الموارد، من الأهمية بمكان مراعاة الآثار الأخلاقية وخصوصية المستخدم. كن شفافًا مع المستخدمين بشأن البيانات التي تجمعها وكيفية استخدامها. تأكد من امتثالك للوائح الخصوصية ذات الصلة، مثل GDPR و CCPA.

تجنب جمع معلومات التعريف الشخصية (PII) وقم بإخفاء هوية البيانات أو استخدام أسماء مستعارة حيثما أمكن. قم بتنفيذ تدابير أمنية مناسبة لحماية البيانات من الوصول أو الكشف غير المصرح به. فكر في منح المستخدمين خيار إلغاء الاشتراك في مراقبة الأداء.

التقنيات المتقدمة والاتجاهات المستقبلية

تتطور واجهة برمجة تطبيقات توقيت الموارد باستمرار، وتظهر ميزات وتقنيات جديدة لتعزيز تحليلات أداء الواجهة الأمامية بشكل أكبر. إليك بعض التقنيات المتقدمة والاتجاهات المستقبلية التي يجب الانتباه إليها:

واجهة برمجة تطبيقات توقيت الخادم (Server Timing API)

تسمح واجهة برمجة تطبيقات توقيت الخادم للخوادم بالكشف عن معلومات التوقيت حول وقت المعالجة الخاص بها لطلب ما. يمكن دمج هذه المعلومات مع بيانات توقيت الموارد لتوفير صورة أكثر اكتمالاً للأداء من طرف إلى طرف.

واجهة برمجة تطبيقات المهام الطويلة (Long Tasks API)

تحدد واجهة برمجة تطبيقات المهام الطويلة المهام التي تمنع الخيط الرئيسي لفترات طويلة، مما يسبب اهتزاز واجهة المستخدم ومشكلات في الاستجابة. يمكن استخدام هذه المعلومات لتحسين كود JavaScript وتحسين تجربة المستخدم.

WebAssembly (Wasm)

WebAssembly هو تنسيق تعليمات ثنائي للآلات الافتراضية يسمح بأداء شبه أصلي في المتصفح. يمكن أن يؤدي استخدام Wasm للمهام الحرجة من حيث الأداء إلى تحسين أوقات التحميل والأداء العام بشكل كبير.

HTTP/3

HTTP/3 هو أحدث إصدار من بروتوكول HTTP، والذي يستخدم بروتوكول النقل QUIC لتوفير أداء وموثوقية محسنين. يقدم HTTP/3 العديد من المزايا على HTTP/2، بما في ذلك تقليل زمن الوصول وتحسين إدارة الاتصال.

الخاتمة

تعد واجهة برمجة تطبيقات توقيت الموارد أداة قوية لفهم وتحسين أداء الواجهة الأمامية. من خلال تجميع وتحليل بيانات توقيت الموارد، يمكنك تحديد الاختناقات، وتحسين أوقات التحميل، وتقديم تجربة مستخدم أفضل. سواء كنت مطور واجهة أمامية متمرسًا أو مبتدئًا، فإن إتقان واجهة برمجة تطبيقات توقيت الموارد ضروري لبناء تطبيقات ويب عالية الأداء. احتضن قوة التحسين القائم على البيانات واطلق العنان للإمكانات الكاملة لموقعك أو تطبيقك. تذكر إعطاء الأولوية لخصوصية المستخدم والاعتبارات الأخلاقية عند جمع وتحليل بيانات الأداء. من خلال البقاء على اطلاع بأحدث الاتجاهات والتقنيات، يمكنك ضمان بقاء موقع الويب الخاص بك سريعًا ومستجيبًا وسهل الاستخدام لسنوات قادمة. سيساهم الاستفادة من هذه التقنيات والأدوات في إنشاء ويب أكثر أداءً ويمكن الوصول إليه عالميًا.

رؤية قابلة للتنفيذ: ابدأ بتنفيذ تجميع أساسي لتوقيت الموارد حسب نوع المورد والنطاق. يوفر هذا رؤى فورية حول مكان اختناقات الأداء لديك. بعد ذلك، قم بالتكامل مع أداة مراقبة الأداء مثل Google PageSpeed Insights أو WebPageTest لأتمتة جمع البيانات وتحليلها.