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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

الطلاء الأول

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

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

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

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

أول طلاء مضمون

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

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

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

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

domInteractive

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

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

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

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

domContentLoadedEventEnd

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

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

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

loadEventEnd

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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