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

تستخدِم Performance Monitoring خدمة التتبُّعات لجمع بيانات عن العمليات التي يتم رصدها في تطبيقك. والتتبُّع هو تقرير يتضمّن بيانات تم جمعها بين نقطتَين زمنيتَين في تطبيقك.

بالنسبة إلى تطبيقات الويب، تجمع خدمة Performance Monitoring Performance Monitoring تلقائيًا تتبُّعًا لكل صفحة من صفحات تطبيقك يُعرف باسم تتبُّع تحميل الصفحة. يجمع كل تتبُّع لتحميل الصفحة المقاييس التلقائية التالية:

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

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

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

تساعدك عمليات تتبُّع تحميل الصفحة في تتبُّع مقاييس Core Web Vitals لتطبيقك، مثل سرعة عرض أول محتوى مرئي.

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

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

سرعة عرض أكبر جزء من المحتوى على الصفحة

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

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

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

  • يتوقف هذا المقياس عند حدوث أكبر تغيير مرئي، بما في ذلك الصور أو النصوص أو عناصر الفيديو. راجِع مقاييس core web vitals لمزيد من التفاصيل.

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

مدى استجابة الصفحة لتفاعلات المستخدم

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

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

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

  • يتوقف هذا المقياس عند عرض المحتوى التالي. راجِع مقاييس core web vitals لمزيد من التفاصيل.

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

متغيّرات التصميم التراكمية

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

يفيد هذا المقياس لأنّ التغييرات غير المتوقّعة في التصميم يمكن أن تؤثر في تجربة المستخدم. يعرض المقياس نتيجة استنادًا إلى Layout Instability API. راجِع مقاييس Core Web Vitals لمزيد من التفاصيل حول كيفية احتساب النتيجة.

"العنصر المستهدَف لأكبر تغيير في التصميم" هو سمة مخصّصة تحدّد الـ عنصر الذي تم تغييره عند حدوث أكبر تغيير في التصميم. يتم تسجيل هذه السمة بالإضافة إلى نتيجة متغيّرات التصميم التراكمية.

سرعة عرض الصفحة

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

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

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

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

سرعة عرض أول محتوى مرئي

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

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

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

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

domInteractive

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

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

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

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

domContentLoadedEventEnd

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

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

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

loadEventEnd

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

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

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

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

مهلة الاستجابة لأوّل إدخال

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

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

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

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

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

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

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

تتبُّع المقاييس الرئيسية في لوحة البيانات

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

صورة للوحة المقاييس في <span class=لوحة بيانات مراقبة الأداء في Firebase" />

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

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

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

مزيد من المعلومات عن استخدام لوحة البيانات.

عرض عمليات التتبُّع وبياناتها

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

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

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

يمكنك الوصول إلى صفحة تحديد المشاكل وحلّها بالطرق التالية:

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

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

صورة <span class=تتم فلترة بيانات Firebase Performance Monitoring حسب السمة" />
  • يمكنك الفلترة حسب عنوان URL للصفحة لعرض بيانات صفحة معيّنة من موقعك الإلكتروني.
  • يمكنك الفلترة حسب نوع الاتصال الفعلي للتعرّف على تأثير اتصال 3G في تطبيقك .
  • يمكنك الفلترة حسب البلد للتأكّد من أنّ موقع قاعدة البيانات لا يؤثر في منطقة معيّنة

مزيد من المعلومات عن عرض بيانات عمليات التتبُّع الخاصة بك.

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

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

  • مزيد من المعلومات عن كيفية تتبُّع مشاكل الأداء في Firebase Console

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