DataDog للواجهة الأمامية: مراقبة البنية التحتية الشاملة لتطبيقات الويب الحديثة

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

سوف يستكشف هذا الدليل الشامل كيفية الاستفادة من DataDog لمراقبة البنية التحتية للواجهة الأمامية، مع تغطية الجوانب الرئيسية مثل:

• إعداد DataDog لمراقبة الواجهة الأمامية
• المقاييس الرئيسية لتتبع أداء الواجهة الأمامية
• مراقبة المستخدم الحقيقي (RUM) باستخدام DataDog
• الاختبار الاصطناعي للكشف الاستباقي عن المشكلات
• أفضل الممارسات لتحسين أداء الواجهة الأمامية من خلال رؤى DataDog

ما هي مراقبة البنية التحتية للواجهة الأمامية؟

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

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

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

لماذا تختار DataDog لمراقبة الواجهة الأمامية؟

توفر DataDog نظامًا أساسيًا موحدًا لمراقبة البنية التحتية بأكملها، بما في ذلك كل من أنظمة الواجهة الخلفية والأمامية. تتضمن ميزاته الرئيسية لمراقبة الواجهة الأمامية ما يلي:

• مراقبة المستخدم الحقيقي (RUM): احصل على رؤى حول تجربة المستخدم الفعلية من خلال جمع البيانات من المستخدمين الحقيقيين الذين يتصفحون موقع الويب أو التطبيق الخاص بك.
• الاختبار الاصطناعي: اختبر بشكل استباقي أداء وتوافر تطبيقك من مواقع مختلفة حول العالم.
• تتبع الأخطاء: التقاط وتحليل أخطاء JavaScript لتحديد الأخطاء وإصلاحها بسرعة.
• لوحات المعلومات والتنبيهات: قم بإنشاء لوحات معلومات مخصصة لتصور المقاييس الرئيسية وإعداد التنبيهات لتلقي إشعارات بمشكلات الأداء.
• التكامل مع الأدوات الأخرى: يتكامل DataDog بسلاسة مع الأدوات الأخرى في مجموعة التطوير والعمليات الخاصة بك.

إعداد DataDog لمراقبة الواجهة الأمامية

يتضمن إعداد DataDog لمراقبة الواجهة الأمامية الخطوات التالية:

1. إنشاء حساب DataDog

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

2. تثبيت DataDog RUM Browser SDK

DataDog RUM Browser SDK هي مكتبة JavaScript تحتاج إلى تضمينها في تطبيق الويب الخاص بك لجمع بيانات حول تفاعلات المستخدمين والأداء. يمكنك تثبيته باستخدام npm أو yarn:

            npm install @datadog/browser-rum
            

              
                Copy
              
            
          

أو:

            yarn add @datadog/browser-rum
            

              
                Copy
              
            
          

3. تهيئة RUM SDK

في ملف JavaScript الرئيسي للتطبيق الخاص بك، قم بتهيئة RUM SDK بمعرف تطبيق DataDog الخاص بك ورمز العميل واسم الخدمة:

            import { datadogRum } from '@datadog/browser-rum'

datadogRum.init({
  applicationId: 'YOUR_APPLICATION_ID',
  clientToken: 'YOUR_CLIENT_TOKEN',
  service: 'your-service-name',
  env: 'production',
  version: '1.0.0',
  sampleRate: 100,
  premiumSampleRate: 100,
  trackResources: true,
  trackLongTasks: true,
  trackUserInteractions: true,
});

datadogRum.startSessionReplayRecording();

            

              
                Copy
              
            
          

شرح المعلمات:

• applicationId: معرف تطبيق DataDog الخاص بك.
• clientToken: رمز عميل DataDog الخاص بك.
• service: اسم خدمتك.
• env: البيئة (على سبيل المثال، الإنتاج، التدريج).
• version: إصدار تطبيقك.
• sampleRate: النسبة المئوية للجلسات التي سيتم تتبعها. تعني قيمة 100 أنه سيتم تتبع جميع الجلسات.
• premiumSampleRate: النسبة المئوية للجلسات لتسجيل عمليات إعادة تشغيل الجلسات.
• trackResources: ما إذا كنت تريد تتبع أوقات تحميل الموارد.
• trackLongTasks: ما إذا كنت تريد تتبع المهام الطويلة التي تمنع سلسلة التعليمات الرئيسية.
• trackUserInteractions: ما إذا كنت تريد تتبع تفاعلات المستخدم مثل النقرات وعمليات إرسال النموذج.

هام: استبدل `YOUR_APPLICATION_ID` و `YOUR_CLIENT_TOKEN` ببيانات اعتماد DataDog الفعلية الخاصة بك. يتم العثور عليها في إعدادات حساب DataDog الخاصة بك ضمن إعدادات RUM.

4. تكوين Content Security Policy (CSP)

إذا كنت تستخدم Content Security Policy (CSP)، فأنت بحاجة إلى تكوينه للسماح لـ DataDog بجمع البيانات. أضف التوجيهات التالية إلى CSP الخاص بك:

            connect-src https://*.datadoghq.com https://*.data.dog;
img-src https://*.datadoghq.com https://*.data.dog data:;
script-src 'self' https://*.datadoghq.com https://*.data.dog;

            

              
                Copy
              
            
          

5. نشر تطبيقك

انشر تطبيقك مع دمج DataDog RUM SDK. ستبدأ DataDog الآن في جمع البيانات حول جلسات المستخدمين ومقاييس الأداء والأخطاء.

المقاييس الرئيسية لتتبع أداء الواجهة الأمامية

بمجرد إعداد DataDog، تحتاج إلى معرفة المقاييس التي يجب تتبعها للحصول على رؤى ذات مغزى في أداء الواجهة الأمامية. فيما يلي بعض أهم المقاييس:

1. وقت تحميل الصفحة

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

• أول رسم محتوى (FCP): الوقت الذي يستغرقه ظهور المحتوى الأول (نص، صورة، إلخ) على الشاشة.
• أكبر رسم محتوى (LCP): الوقت الذي يستغرقه ظهور أكبر عنصر محتوى على الشاشة. LCP هو مقياس حيوي أساسي للويب.
• أول تأخير إدخال (FID): الوقت الذي يستغرقه المتصفح للاستجابة لأول تفاعل للمستخدم (مثل النقر). FID هو أيضًا مقياس حيوي أساسي للويب.
• الوقت حتى التفاعلية (TTI): الوقت الذي يستغرقه حتى تصبح الصفحة تفاعلية بالكامل.
• نهاية حدث التحميل: الوقت الذي يكتمل فيه حدث التحميل.

تهدف إلى LCP يبلغ 2.5 ثانية أو أقل، وFID يبلغ 100 مللي ثانية أو أقل، وTTI يبلغ 5 ثوانٍ أو أقل. هذه هي المعايير الموصى بها من Google لتجربة مستخدم جيدة.

مثال على السيناريو: تخيل موقعًا للتجارة الإلكترونية. إذا استغرقت صفحة المنتج أكثر من 3 ثوانٍ للتحميل (LCP مرتفع)، فقد يتخلى المستخدمون عن عربات التسوق الخاصة بهم بسبب الإحباط. تساعد مراقبة LCP في تحديد ومعالجة مثل هذه التباطؤات، مما قد يؤدي إلى زيادة تحويلات المبيعات.

2. أخطاء JavaScript

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

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

3. وقت تحميل المورد

وقت تحميل المورد هو الوقت الذي يستغرقه تحميل الموارد الفردية، مثل الصور وملفات CSS وملفات JavaScript. يمكن أن تساهم أوقات تحميل الموارد الطويلة في أوقات تحميل الصفحة البطيئة.

مثال على السيناريو: تزيد الصور الكبيرة وغير المحسّنة بشكل كبير من وقت تحميل الصفحة. تساعد بيانات توقيت موارد DataDog في تحديد هذه الاختناقات، مما يتيح جهود التحسين مثل ضغط الصور واستخدام تنسيقات الصور الحديثة مثل WebP.

4. زمن وصول واجهة برمجة التطبيقات (API)

زمن وصول واجهة برمجة التطبيقات (API) هو الوقت الذي يستغرقه تطبيقك للتواصل مع واجهات برمجة التطبيقات (APIs) الخلفية. يمكن أن يؤثر زمن وصول واجهة برمجة التطبيقات (API) المرتفع على أداء تطبيقك.

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

5. إجراءات المستخدم

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

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

مراقبة المستخدم الحقيقي (RUM) باستخدام DataDog

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

فوائد RUM

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

ميزات RUM الرئيسية في DataDog

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

استخدام إعادة تشغيل الجلسة

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

لتمكين إعادة تشغيل الجلسة، تحتاج إلى تهيئة RUM SDK باستخدام خيار `premiumSampleRate` المضبوط على قيمة أكبر من 0. على سبيل المثال، لتسجيل عمليات إعادة تشغيل الجلسات لـ 10٪ من الجلسات، اضبط `premiumSampleRate` على 10:

            datadogRum.init({
  // ... other options
  premiumSampleRate: 10,
});

datadogRum.startSessionReplayRecording();

            

              
                Copy
              
            
          

بمجرد تمكين إعادة تشغيل الجلسة، يمكنك عرض عمليات إعادة تشغيل الجلسات في DataDog RUM Explorer. حدد جلسة وانقر فوق الزر "إعادة تشغيل الجلسة" لمشاهدة إعادة التشغيل.

الاختبار الاصطناعي للكشف الاستباقي عن المشكلات

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

فوائد الاختبار الاصطناعي

• الكشف الاستباقي عن المشكلات: تحديد مشكلات الأداء ومشاكل التوفر قبل أن تؤثر على المستخدمين الفعليين.
• التغطية العالمية: اختبر تطبيقك من مواقع مختلفة حول العالم لضمان أداء متسق لجميع المستخدمين.
• مراقبة واجهة برمجة التطبيقات (API): راقب أداء وتوافر واجهات برمجة التطبيقات (APIs) الخاصة بك.
• اختبار الانحدار: استخدم الاختبارات الاصطناعية للتأكد من أن تغييرات التعليمات البرمجية الجديدة لا تقدم انحدارات في الأداء.
• مراقبة خدمة الطرف الثالث: تتبع أداء خدمات الطرف الثالث التي يعتمد عليها تطبيقك.

أنواع الاختبارات الاصطناعية

تقدم DataDog عدة أنواع من الاختبارات الاصطناعية:

• اختبارات المتصفح: محاكاة تفاعلات المستخدم في متصفح حقيقي، مما يسمح لك باختبار الوظائف الشاملة لتطبيقك. يمكن لهذه الاختبارات تنفيذ إجراءات مثل النقر فوق الأزرار وملء النماذج والتنقل بين الصفحات.
• اختبارات واجهة برمجة التطبيقات (API): اختبر أداء وتوافر واجهات برمجة التطبيقات (APIs) الخاصة بك عن طريق إرسال طلبات HTTP والتحقق من الردود.
• اختبارات شهادات SSL: راقب تاريخ انتهاء الصلاحية وصلاحية شهادات SSL الخاصة بك.
• اختبارات DNS: تحقق من تكوين سجلات DNS الخاصة بك بشكل صحيح.

إنشاء اختبار متصفح

لإنشاء اختبار متصفح، اتبع الخطوات التالية:

1. في واجهة مستخدم DataDog، انتقل إلى Synthetic Monitoring > New Test > Browser Test.
2. أدخل عنوان URL للصفحة التي تريد اختبارها.
3. سجل الخطوات التي تريد محاكاتها باستخدام DataDog Recorder. سيلتقط المسجل إجراءاتك وينشئ رمزًا للاختبار.
4. قم بتكوين إعدادات الاختبار، مثل المواقع التي سيتم إجراء الاختبار منها، وتكرار الاختبار، والتنبيهات التي سيتم تشغيلها إذا فشل الاختبار.
5. احفظ الاختبار.

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

إنشاء اختبار واجهة برمجة التطبيقات (API)

لإنشاء اختبار واجهة برمجة التطبيقات (API)، اتبع الخطوات التالية:

1. في واجهة مستخدم DataDog، انتقل إلى Synthetic Monitoring > New Test > API Test.
2. أدخل عنوان URL لنقطة نهاية واجهة برمجة التطبيقات (API) التي تريد اختبارها.
3. قم بتكوين طلب HTTP، بما في ذلك الطريقة (GET، POST، PUT، DELETE) والرؤوس والنص.
4. حدد التأكيدات للتحقق من الاستجابة، مثل التحقق من رمز الحالة أو نوع المحتوى أو وجود بيانات معينة في نص الاستجابة.
5. قم بتكوين إعدادات الاختبار، مثل المواقع التي سيتم إجراء الاختبار منها، وتكرار الاختبار، والتنبيهات التي سيتم تشغيلها إذا فشل الاختبار.
6. احفظ الاختبار.

مثال على السيناريو: يمكنك إنشاء اختبار واجهة برمجة التطبيقات (API) لمراقبة توفر نقطة نهاية واجهة برمجة التطبيقات (API) الهامة التي تعتمد عليها الواجهة الأمامية الخاصة بك. يمكن للاختبار إرسال طلب إلى نقطة النهاية والتحقق من أنه يرجع رمز حالة 200 OK وأن نص الاستجابة يحتوي على البيانات المتوقعة. إذا فشل الاختبار، فستتلقى تنبيهًا، مما يسمح لك بالتحقيق في المشكلة ومنعها من التأثير على المستخدمين.

أفضل الممارسات لتحسين أداء الواجهة الأمامية من خلال رؤى DataDog

بمجرد إعداد DataDog وجمع البيانات، يمكنك استخدام الرؤى لتحسين أداء الواجهة الأمامية الخاصة بك. فيما يلي بعض أفضل الممارسات:

1. تحسين الصور

تعتبر الصور الكبيرة وغير المحسّنة سببًا شائعًا لأوقات تحميل الصفحة البطيئة. استخدم بيانات توقيت موارد DataDog لتحديد الصور الكبيرة وتحسينها عن طريق:

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

2. تصغير وتجميع CSS و JavaScript

يعمل تصغير ملفات CSS و JavaScript على إزالة الأحرف غير الضرورية، مثل المسافات البيضاء والتعليقات، مما يقلل من حجم الملف. يجمع تجميع ملفات CSS و JavaScript ملفات متعددة في ملف واحد، مما يقلل من عدد طلبات HTTP المطلوبة لتحميل الصفحة.

استخدم أدوات مثل Webpack أو Parcel أو Rollup لتقليل وتجميع ملفات CSS و JavaScript الخاصة بك.

3. الاستفادة من ذاكرة التخزين المؤقت للمتصفح

تتيح ذاكرة التخزين المؤقت للمتصفح للمتصفحات تخزين الأصول الثابتة، مثل الصور وملفات CSS وملفات JavaScript، محليًا. عندما يزور المستخدم موقع الويب الخاص بك مرة أخرى، يمكن للمتصفح تحميل هذه الأصول من ذاكرة التخزين المؤقت بدلاً من تنزيلها من الخادم، مما يؤدي إلى أوقات تحميل أسرع للصفحة.

قم بتكوين خادم الويب الخاص بك لتعيين رؤوس ذاكرة التخزين المؤقت المناسبة للأصول الثابتة. استخدم أوقات انتهاء صلاحية ذاكرة التخزين المؤقت الطويلة للأصول التي نادرًا ما تتغير.

4. تحسين أداء العرض

يمكن أن يؤدي أداء العرض البطيء إلى تجربة مستخدم غير متناسقة. استخدم مقاييس أداء DataDog لتحديد اختناقات العرض وتحسين التعليمات البرمجية الخاصة بك عن طريق:

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

5. مراقبة خدمات الطرف الثالث

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

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

6. تنفيذ تقسيم التعليمات البرمجية

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

استخدم أدوات مثل Webpack أو Parcel لتنفيذ تقسيم التعليمات البرمجية في تطبيقك.

الخلاصة

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

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