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

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

فهم أهمية مراقبة تحميل الموارد

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

لماذا تعد مراقبة الأداء أمرًا بالغ الأهمية؟

• تحسين تجربة المستخدم: تؤدي أوقات التحميل الأسرع إلى تجربة مستخدم أكثر متعة وجاذبية.
• تقليل معدلات الارتداد: من غير المرجح أن يغادر المستخدمون موقع ويب إذا تم تحميله بسرعة.
• تحسين مُحسّنات محرّكات البحث: تعتبر محركات البحث مثل Google أداء موقع الويب كعامل تصنيف.
• زيادة معدلات التحويل: غالبًا ما تشهد مواقع الويب الأسرع معدلات تحويل أعلى.
• تقليل تكاليف البنية التحتية: يمكن أن يؤدي تحسين تسليم الموارد إلى تقليل استهلاك النطاق الترددي وتحميل الخادم.

تقديم واجهة برمجة تطبيقات أداء الواجهة الأمامية

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

• توقيت التنقل: يقيس الوقت الذي يستغرقه تحميل صفحة ويب.
• توقيت الموارد: يقيس الوقت الذي يستغرقه تحميل الموارد الفردية.
• توقيت المستخدم: يسمح للمطورين بتحديد مقاييس أداء مخصصة.
• واجهة مهام طويلة: تحدد المهام الطويلة التي تمنع الخيط الرئيسي.
• أكبر رسم محتوى (LCP): يقيس الوقت الذي يستغرقه عرض أكبر عنصر محتوى في الصفحة.
• تأخير الإدخال الأول (FID): يقيس الوقت الذي يستغرقه المتصفح للاستجابة لتفاعل المستخدم الأول.
• تحول التخطيط التراكمي (CLS): يقيس الاستقرار المرئي للصفحة.

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

مراقب الموارد: نظرة متعمقة

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

كيف يعمل مراقب الموارد

يعمل مراقب الموارد عن طريق مراقبة PerformanceObserver والاستماع إلى أنواع إدخالات أداء معينة، وخاصة إدخالات `resource`. يحتوي كل إدخال `resource` على معلومات تفصيلية حول تحميل مورد معين، بما في ذلك:

• name: عنوان URL للمورد.
• entryType: نوع إدخال الأداء (في هذه الحالة، `resource`).
• startTime: الوقت الذي بدأ فيه تحميل المورد.
• duration: إجمالي الوقت الذي استغرقه تحميل المورد.
• initiatorType: نوع العنصر الذي بدأ طلب المورد (على سبيل المثال، `img`، `script`، `link`).
• transferSize: حجم المورد المنقول عبر الشبكة.
• encodedBodySize: حجم المورد قبل الضغط.
• decodedBodySize: حجم المورد بعد فك الضغط.
• connectStart: الوقت الذي يسبق مباشرة قيام المتصفح بإنشاء الاتصال بالخادم لاسترداد المورد.
• connectEnd: الوقت الذي يلي مباشرة قيام المتصفح بإنهاء إنشاء الاتصال بالخادم لاسترداد المورد.
• domainLookupStart: الوقت الذي يسبق مباشرة قيام المتصفح ببدء البحث عن اسم المجال للمورد.
• domainLookupEnd: الوقت الذي يلي مباشرة قيام المتصفح بإنهاء البحث عن اسم المجال للمورد.
• fetchStart: الوقت الذي يسبق مباشرة قيام المتصفح بجلب المورد.
• responseStart: الوقت الذي يلي مباشرة استلام المتصفح للبايت الأول من الاستجابة.
• responseEnd: الوقت الذي يلي مباشرة استلام المتصفح للبايت الأخير من الاستجابة.
• secureConnectionStart: الوقت الذي يسبق مباشرة قيام المتصفح ببدء عملية المصافحة لتأمين الاتصال الحالي.
• requestStart: الوقت الذي يسبق مباشرة قيام المتصفح بطلب المورد من الخادم أو ذاكرة التخزين المؤقت أو المورد المحلي.

إنشاء مراقب موارد

لإنشاء مراقب موارد، تحتاج إلى استخدام منشئ `PerformanceObserver` وتحديد الخيار `entryTypes`:

            const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    // Process the resource entry
    console.log(entry);
  });
});

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

              
                Copy
              
            
          

ينشئ هذا الرمز `PerformanceObserver` جديدًا يستمع إلى إدخالات `resource`. عند إنشاء إدخال مورد جديد، يتم تنفيذ دالة رد الاتصال، ويحتوي كائن `entry` على معلومات مفصلة حول المورد.

تحليل بيانات توقيت الموارد

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

• أوقات التحميل الطويلة: حدد الموارد التي تستغرق وقتًا طويلاً للتحميل والتحقق من الأسباب. يمكن أن يكون هذا بسبب أحجام الملفات الكبيرة أو الخوادم البطيئة أو مشكلات الشبكة.
• أحجام النقل الكبيرة: حدد الموارد ذات أحجام النقل الكبيرة وفكر في تحسينها عن طريق ضغط الصور أو تصغير التعليمات البرمجية أو استخدام تقسيم التعليمات البرمجية.
• أوقات الاتصال البطيئة: تحقق من الموارد ذات أوقات الاتصال البطيئة وفكر في استخدام CDN أو تحسين تكوين الخادم الخاص بك.
• أوقات البحث عن DNS: تحقق من الموارد ذات أوقات البحث عن DNS البطيئة وفكر في استخدام DNS مسبقًا.

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

فيما يلي بعض الأمثلة العملية لكيفية استخدام مراقب الموارد لمراقبة وتحسين تحميل الموارد:

المثال 1: تحديد الصور الكبيرة

يوضح هذا المثال كيفية استخدام مراقب الموارد لتحديد الصور التي تزيد حجمها عن حجم معين:

            const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.initiatorType === 'img' && entry.transferSize > 100000) { // 100KB
      console.warn(`Large image detected: ${entry.name} (${entry.transferSize} bytes)`);
    }
  });
});

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

              
                Copy
              
            
          

سيسجل هذا الرمز رسالة تحذير في وحدة التحكم لأي صورة يزيد حجمها عن 100 كيلو بايت.

المثال 2: مراقبة أوقات تحميل البرنامج النصي

يوضح هذا المثال كيفية استخدام مراقب الموارد لمراقبة أوقات تحميل ملفات JavaScript:

            const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.initiatorType === 'script') {
      console.log(`Script loaded: ${entry.name} in ${entry.duration} ms`);
    }
  });
});

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

              
                Copy
              
            
          

سيسجل هذا الرمز عنوان URL ووقت التحميل لكل ملف نصي في وحدة التحكم.

المثال 3: تتبع تحميل الخطوط

غالبًا ما تكون الخطوط بمثابة عنق زجاجة في الأداء. يوضح هذا المثال كيفية مراقبة أوقات تحميل الخطوط:

            const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.initiatorType === 'link' && entry.name.endsWith('.woff2')) { // Assuming WOFF2 fonts
      console.log(`Font loaded: ${entry.name} in ${entry.duration} ms`);
    }
  });
});

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

              
                Copy
              
            
          

سيسجل هذا الرمز عنوان URL ووقت التحميل لأي ملفات خطوط WOFF2 في وحدة التحكم.

المثال 4: تحديد اختناقات الموارد التابعة لجهات خارجية

غالبًا ما تنبع مشكلات الأداء من النصوص البرمجية والموارد التابعة لجهات خارجية. يوضح هذا المثال كيفية تحديد هذه:

            const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.name.includes('example.com')) { // Replace with the third-party domain
      console.warn(`Third-party resource: ${entry.name} took ${entry.duration} ms to load`);
    }
  });
});

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

              
                Copy
              
            
          

سيسجل هذا الرمز رسالة تحذير في وحدة التحكم لأي مورد يتم تحميله من المجال الخاص بجهة خارجية محددة، بالإضافة إلى وقت التحميل الخاص به.

أفضل الممارسات لاستخدام مراقب الموارد

لاستخدام مراقب الموارد بفعالية، اتبع أفضل الممارسات هذه:

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

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

التخزين المؤقت و خاصية `buffered`

يدعم `PerformanceObserver` التخزين المؤقت لإدخالات الأداء. بشكل افتراضي، يتم تسليم الإدخالات كما تحدث. ومع ذلك، يمكنك تكوين المراقب لتسليم الإدخالات في دفعات باستخدام الخاصية `buffered`:

            const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(entry);
  });
}, { entryTypes: ['resource'], buffered: true });

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

              
                Copy
              
            
          

سيؤدي تعيين `buffered` إلى `true` إلى تسليم جميع الإدخالات الموجودة عند إنشاء المراقب، والتي يمكن أن تكون مفيدة لجمع البيانات التاريخية.

باستخدام `clear()` و `disconnect()`

لإيقاف مراقبة إدخالات الأداء، يمكنك استخدام الطريقة `disconnect()`:

            observer.disconnect();
            

              
                Copy
              
            
          

سيؤدي هذا إلى منع المراقب من تلقي إدخالات أداء جديدة. يمكنك أيضًا استخدام الطريقة `clear()` لإزالة جميع الإدخالات المخزنة مؤقتًا:

            observer.clear();
            

              
                Copy
              
            
          

معالجة الأخطاء

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

            try {
  const observer = new PerformanceObserver((list) => {
    list.getEntries().forEach((entry) => {
      console.log(entry);
    });
  });

  observer.observe({ entryTypes: ['resource'] });
} catch (error) {
  console.error('PerformanceObserver not supported:', error);
}
            

              
                Copy
              
            
          

أمثلة من العالم الحقيقي عبر المناطق الجغرافية

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

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

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

ما وراء مراقب الموارد: التقنيات التكميلية

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

• شبكات توصيل المحتوى (CDNs): تقوم شبكات توصيل المحتوى بتوزيع محتوى موقع الويب الخاص بك عبر خوادم متعددة حول العالم، مما يقلل زمن الانتقال ويحسن أوقات التحميل.
• تحسين الصور: يمكن أن يؤدي تحسين الصور عن طريق ضغطها وتغيير حجمها واستخدام تنسيقات صور حديثة مثل WebP إلى تقليل حجم الملف بشكل كبير.
• تصغير التعليمات البرمجية وتجميعها: يمكن أن يؤدي تصغير التعليمات البرمجية وتجميعها بلغات JavaScript و CSS إلى تقليل حجم الملف وعدد طلبات HTTP المطلوبة لتحميلها.
• التخزين المؤقت: يسمح التخزين المؤقت للمتصفح بتخزين الموارد محليًا، مما يقلل الحاجة إلى تنزيلها مرة أخرى في الزيارات اللاحقة.
• التحميل الكسول: يؤخر التحميل الكسول تحميل الموارد غير الهامة حتى الحاجة إليها، مما يحسن وقت التحميل الأولي للصفحة.
• عمال الخدمة: عمال الخدمة عبارة عن ملفات JavaScript تعمل في الخلفية ويمكنها اعتراض طلبات الشبكة، مما يتيح التخزين المؤقت في وضع عدم الاتصال وإشعارات الدفع.

الخلاصة

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

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