تعرف على بيانات أداء تحميل الصفحة (تطبيقات الويب)

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

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

  • الطلاء الأول - مقياس يقيس الوقت بين انتقال المستخدم إلى الصفحة ووقت حدوث أي تغيير مرئي

  • الطلاء الأول للمحتوى - مقياس يقيس الوقت بين انتقال المستخدم إلى الصفحة ووقت عرض محتوى ذي معنى، مثل صورة أو نص

  • domInteractive - مقياس يقيس الوقت بين انتقال المستخدم إلى الصفحة والوقت الذي تعتبر فيه الصفحة تفاعلية للمستخدم

  • domContentLoadedEventEnd - مقياس يقيس الوقت بين انتقال المستخدم إلى الصفحة ووقت تحميل مستند HTML الأولي وتحليله بالكامل

  • LoadEventEnd — مقياس يقيس الوقت بين انتقال المستخدم إلى الصفحة ووقت اكتمال حدث تحميل المستند الحالي

  • تأخير الإدخال الأول - مقياس يقيس الوقت بين تفاعل المستخدم مع الصفحة ووقت قدرة المتصفح على الاستجابة لهذا الإدخال

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

تعريف تتبع تحميل الصفحة

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

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

المقاييس التي تم جمعها لتتبعات تحميل الصفحة

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

الطلاء الأول

يقيس هذا المقياس الوقت بين انتقال المستخدم إلى الصفحة ووقت حدوث أي تغيير مرئي.

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

  • يبدأ عندما ينتقل المستخدم إلى الصفحة.

  • يتوقف عند حدوث أي تغيير مرئي، بما في ذلك تغيير لون الخلفية أو تحميل الرأس.

الطلاء الأول بالمحتوى

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

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

  • يبدأ عندما ينتقل المستخدم إلى الصفحة.

  • يتوقف فورًا بعد أن يعرض المتصفح المحتوى الأول من DOM، بما في ذلك أي نص أو صورة (بما في ذلك صور الخلفية) أو لوحة قماش غير بيضاء أو SVG.

domInteractive

يقيس هذا المقياس الوقت بين انتقال المستخدم إلى الصفحة والوقت الذي تعتبر فيه الصفحة تفاعلية بالنسبة للمستخدم.

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

  • يبدأ عندما ينتقل المستخدم إلى الصفحة.

  • يتوقف فورًا قبل أن يقوم وكيل المستخدم بتعيين جاهزية مستند HTML الحالي على "تفاعلي".

domContentLoadedEventEnd

يقيس هذا المقياس الوقت بين انتقال المستخدم إلى الصفحة ووقت تحميل مستند HTML الأولي وتحليله بالكامل.

  • يبدأ عندما ينتقل المستخدم إلى الصفحة.

  • يتوقف فورًا بعد اكتمال تحميل مستند HTML الأولي وتحليله ( DOMContentLoaded )، لكن هذا لا يعني أن أوراق الأنماط والصور والإطارات الفرعية قد انتهت من التحميل.

تحميلEventEnd

يقيس هذا المقياس الوقت بين انتقال المستخدم إلى الصفحة ووقت اكتمال حدث تحميل المستند الحالي.

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

  • يبدأ عندما ينتقل المستخدم إلى الصفحة.

  • يتوقف فورًا بعد اكتمال حدث تحميل مستند HTML الحالي.

تأخير الإدخال الأول

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

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

  • يبدأ عندما يتفاعل المستخدم لأول مرة مع عنصر في الصفحة، مثل النقر فوق زر أو ارتباط تشعبي.

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

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

تتبع وعرض وتصفية بيانات الأداء

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

تتبع المقاييس الرئيسية في لوحة التحكم الخاصة بك

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

صورة للوحة المقاييس في لوحة معلومات مراقبة أداء Firebase

لإضافة مقياس إلى لوحة المقاييس، اتبع الخطوات التالية:

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

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

تعرف على المزيد حول استخدام لوحة المعلومات .

عرض الآثار وبياناتها

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

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

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

يمكنك الوصول إلى صفحة استكشاف الأخطاء وإصلاحها بالطرق التالية:

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

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

صورة لبيانات مراقبة أداء Firebase التي تتم تصفيتها حسب السمة
  • قم بالتصفية حسب عنوان URL للصفحة لعرض البيانات الخاصة بصفحة معينة في موقعك
  • قم بالتصفية حسب نوع الاتصال الفعال لمعرفة كيفية تأثير اتصال 3G على تطبيقك
  • قم بالتصفية حسب البلد للتأكد من أن موقع قاعدة البيانات الخاصة بك لا يؤثر على منطقة معينة

تعرف على المزيد حول عرض البيانات الخاصة بتتبعاتك .

الخطوات التالية

  • تعرف على المزيد حول استخدام السمات لفحص بيانات الأداء.

  • تعرف على المزيد حول كيفية تتبع مشكلات الأداء في وحدة تحكم Firebase.

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