استخدِم لوحة إحصاءات الأداء للحصول على إحصاءات قابلة للاستخدام ومستندة إلى حالات الاستخدام حول أداء موقعك الإلكتروني.
نظرة عامة
تتيح لك لوحة إحصاءات الأداء إجراء ما يلي:
- تسجيل وقياس أداء تحميل الصفحة:
- عرض مقاييس أداء Web Vitals
- عرض نشاط الشبكة
- محاكاة سرعات أبطأ لوحدة المعالجة المركزية والشبكة
- استيراد التسجيلات وتصديرها
لماذا لوحة جديدة؟
لوحة إحصاءات الأداء الجديدة هي تجربة تهدف إلى معالجة المشاكل الثلاث التي يواجهها المطوّرون عند استخدام لوحة الأداء الحالية:
- كمية المعلومات كبيرة جدًا باستخدام واجهة المستخدم المعاد تصميمها، تعمل لوحة إحصاءات الأداء على تبسيط البيانات وعرض المعلومات ذات الصلة فقط.
- صعوبة التمييز بين حالات الاستخدام: تتيح لوحة إحصاءات الأداء إجراء تحليل مستند إلى حالات الاستخدام. في الوقت الحالي، لا تتوافق إلا مع حالة استخدام تحميل الصفحة، وسيتم توفير المزيد من حالات الاستخدام في المستقبل استنادًا إلى ملاحظاتك، مثل التفاعل.
- يتطلّب خبرة كبيرة في طريقة عمل المتصفّحات لاستخدامه بفعالية. تسلّط لوحة إحصاءات الأداء الضوء على الإحصاءات الرئيسية في جزء الإحصاءات، مع تقديم ملاحظات قابلة للتنفيذ حول كيفية حلّ المشاكل.
مقدمة
يعلّمك هذا الفيديو التعليمي كيفية قياس مستوى أداء تحميل الصفحة وفهمه باستخدام لوحة إحصاءات الأداء. يمكنك مواصلة القراءة أو مشاهدة نسخة الفيديو من هذا البرنامج التعليمي أعلاه.
فتح لوحة "إحصاءات الأداء"
- افتح "أدوات مطوّري البرامج".
انقر على المزيد من الخيارات > المزيد من الأدوات > إحصاءات الأداء.
بدلاً من ذلك، استخدِم قائمة الأوامر لفتح لوحة إحصاءات الأداء.
تسجيل الأداء
يمكن للوحة إحصاءات الأداء تسجيل الأداء العام والأداء المستند إلى حالات الاستخدام (مثل تحميل الصفحة).
- افتح صفحة العرض التوضيحي هذه في علامة تبويب جديدة، ثم افتح لوحة "إحصاءات الأداء" على الصفحة.
يمكنك تقليل سرعة الشبكة واستخدام وحدة المعالجة المركزية أثناء التسجيل. في هذا البرنامج التعليمي، ضَع علامة في المربّع بجانب إيقاف ذاكرة التخزين المؤقت واضبط وحدة المعالجة المركزية على 4x slowdown في القائمة المنسدلة:
انقر على قياس سرعة تحميل الصفحة. تسجّل "أدوات مطوّري البرامج" مقاييس الأداء أثناء إعادة تحميل الصفحة، ثم تتوقف تلقائيًا عن التسجيل بعد ثوانٍ قليلة من انتهاء تحميل الصفحة.
إعادة تشغيل تسجيل الأداء
استخدِم عناصر التحكّم في أسفل الشاشة للتحكّم في إعادة تشغيل التسجيل.
في ما يلي مثال على كيفية إجراء ذلك.
- انقر على تشغيل لتشغيل التسجيل.
- انقر على إيقاف مؤقت لإيقاف إعادة التشغيل مؤقتًا.
- اضبط سرعة التشغيل باستخدام القائمة المنسدلة.
- انقر على تبديل المعاينة المرئية لإظهار المعاينة المرئية أو إخفائها.
التنقّل في تسجيل للأداء
تُصغِّر "أدوات مطوّري Chrome" تلقائيًا لعرض المخطط الزمني الكامل للتسجيل. يمكنك التنقّل في التسجيل باستخدام ميزة التكبير/التصغير ونقل المخطط الزمني.
لتكبير المخطط الزمني وتحريكه لليمين واليسار، استخدِم أزرار التنقّل المناسبة:
- انقر على المخطط الزمني لنقل رأس التشغيل وعرض إطار معيّن.
- انقر على عناصر التحكّم تكبير و تصغير في أسفل الشاشة للتكبير أو التصغير. في هذه الحالة، يتم التكبير أو التصغير استنادًا إلى رأس التشغيل.
- اسحب شريط التمرير الأفقي في أسفل الشاشة لتحريك المخطط الزمني يمينًا ويسارًا.
يمكنك بدلاً من ذلك استخدام اختصارات لوحة المفاتيح. انقر على الزر لعرض الاختصارات.
عند استخدام الاختصارات، يتم التكبير أو التصغير استنادًا إلى مؤشر الماوس.
عرض "إحصاءات الأداء"
يمكنك الحصول على قائمة بإحصاءات الأداء في جزء الإحصاءات. تحديد المشاكل المحتملة في الأداء وحلّها
مرِّر مؤشر الماوس فوق كل إحصاء لتسليط الضوء عليه في المقاطع الصوتية الرئيسية.
انقر على إحدى الإحصاءات، مثل الطلب الذي يحظر العرض، لفتحها في جزء التفاصيل. لفهم المشكلة بشكل أفضل، يمكنك الاطّلاع على أقسام الملف والمشكلة وكيفية الحلّ والمزيد.
عرض مقاييس أداء "مؤشرات أداء الويب"
مؤشرات أداء الويب هي مبادرة أطلقتها Google تهدف إلى توفير إرشادات موحّدة حول إشارات الجودة الأساسية لتقديم تجربة مستخدم ممتازة على الويب.
يمكنك الاطّلاع على هذه المقاييس في لوحة المخطّط الزمني والإحصاءات.
مرِّر مؤشر الماوس فوق الإحصاءات في المخطط الزمني لمعرفة المزيد عن المقاييس.
التعرّف على حالات التأخير في مقياس "سرعة عرض أكبر جزء من المحتوى على الصفحة"
سرعة عرض أكبر محتوى مرئي (LCP) هي أحد مقاييس Core Web Vitals. يشير مقياس LCP إلى الوقت الذي تستغرقه أكبر صورة أو مقطع نصي للظهور ضمن إطار العرض مقارنةً بالوقت الذي بدأ فيه تحميل الصفحة.
نتيجة LCP الجيّدة هي 2.5 ثانية أو أقل.
إذا استغرق عرض أكبر جزء من المحتوى على الصفحة وقتًا أطول، سيظهر في المخطّط الزمني شارة LCP مع مربّع أصفر أو مثلث أحمر.
لفتح جزء التفاصيل، انقر على شارة LCP في المخطط الزمني أو في جزء الإحصاءات على يسار الصفحة. في اللوحة، يمكنك التعرّف على الأسباب المحتملة للتأخيرات واقتراحات حول كيفية حلّها.
في هذا المثال، يحظر أحد الطلبات العرض، ويمكنك تطبيق الأنماط المهمة بشكل مضمّن لإصلاح المشكلة. لمزيد من المعلومات، يمكنك الاطّلاع على مقالة إزالة الموارد التي تحظر العرض.
لعرض الأجزاء الفرعية من وقت عرض أكبر محتوى مرئي، انتقِل إلى قسم التفاصيل > تقسيم التوقيتات.
يتألف وقت عرض أكبر محتوى مرئي من الأجزاء الفرعية التالية:
| الجزء الفرعي من مقياس "سرعة عرض أكبر محتوى مرئي" | الوصف |
|---|---|
| مدة تحميل أول بايت (TTFB) | الوقت المنقضي منذ أن يبدأ المستخدم تحميل الصفحة إلى أن يتلقّى المتصفّح البايت الأول من استجابة مستند HTML |
| مهلة تحميل الموارد | الفرق بين مقياس TTFB والوقت الذي يبدأ فيه المتصفّح تحميل مورد LCP. |
| مدة تحميل الموارد | الوقت المستغرَق لتحميل مورد LCP نفسه |
| مهلة عرض العناصر | الفرق بين وقت انتهاء تحميل مورد LCP ووقت عرض عنصر LCP بالكامل |
إذا كان أحد عناصر LCP لا يتطلّب تحميل مورد لعرضه، يتم حذف مهلة تحميل المورد ووقته. على سبيل المثال، في حال كان العنصر عبارة عن عقدة نصية معروضة بخط نظام.
عرض نشاط تغييرات التصميم
عرض نشاط تغييرات التنسيق في مسار تغييرات التنسيق
يتم تجميع متغيّرات التصميم في فترة زمنية للجلسة. في المثال، هناك نافذتا جلسة. تتضمّن نوافذ الجلسات فجوات بينها.
متغيّرات التصميم التراكمية (CLS) هي أحد مقاييس مؤشرات أداء الويب الأساسية. استخدِم مسار متغيّرات التصميم لتحديد المشاكل المحتملة وأسباب متغيّرات التصميم.
ابدأ دائمًا بأكبر فاصل زمني في الجلسة عند تحسين مقياس CLS. في مثالنا، نافذة الجلسة 1 هي الأكبر، استنادًا إلى لون الخلفية والمستوى.
انقر على لقطة شاشة لعرض تفاصيل متغيّر التصميم وتحديد الأسباب الأساسية المحتمَلة والعناصر المتأثرة.
في مثالنا، السبب الأساسي المحتمَل هو وسائط غير محدّدة الحجم. لمعرفة كيفية حلّ هذه المشكلة، اطّلِع على مقالة تحسين مقياس "تغيير تنسيق تراكمي".
فهم نتيجة متغيّرات التصميم
لفهم كيفية احتساب النتائج، استخدِم قسم النافذة في جزء التفاصيل. تعرض الفترة الزمنية الفترة الزمنية للجلسة التي ينتمي إليها متغيّر التصميم الحالي.
إذا تم تغيير تصميم الصفحة بأكملها، تكون النتيجة القصوى لكل متغيّر تصميم هي 1. في مثالنا، سجّل أول تغيير في التنسيق 0.15. سجّلت عملية تغيير التنسيق الثانية النتيجة 0.041.
النتيجة الإجمالية لفترة الجلسة هذه هي 0.19. استنادًا إلى حدّ CLS، يجب تحسينه. ويعكس لون خلفية نافذة الجلسة ذلك.
يزداد الرسم البياني للخلفية في نافذة الجلسة بمرور الوقت. تعكس النتيجة التراكمية لمتغيّرات التصميم الزيادة في تلك النقطة الزمنية.
عرض نشاط الشبكة
عرض نشاط الشبكة في مسار الشبكة يمكنك توسيع مسار الشبكة لعرض جميع أنشطة الشبكة والنقر على كل عنصر لعرض التفاصيل.
عرض نشاط أداة العرض
عرض نشاط العرض في مسار العارض يمكنك توسيع كل أداة عرض للاطّلاع على الأنشطة والنقر على كل عنصر لعرض التفاصيل.
عرض نشاط وحدة معالجة الرسومات
عرض نشاط وحدة معالجة الرسومات في مسار وحدة معالجة الرسومات يكون مسار وحدة معالجة الرسومات مخفيًا تلقائيًا. لتفعيلها، ضَع علامة في المربّع بجانب وحدة معالجة الرسومات في الإعدادات.
عرض أوقات المستخدم
للحصول على مقاييس أداء مخصّصة، يمكنك استخدام User Timing وعرض توقيتاتك بشكل مرئي باستخدام مسار Timing. لمزيد من المعلومات، يُرجى الاطّلاع على User timing API.
اطّلِع على صفحة العرض التوضيحي هذه التي تحتسب الوقت المنقضي لتحميل النص.
للاطّلاع على توقيتات المستخدمين، اتّبِع الخطوات التالية:
- تمييز الأماكن في تطبيقك باستخدام
performance.mark() - يمكنك قياس الوقت المنقضي بين العلامات باستخدام
performance.measure(). - تسجيل الأداء
- اطّلِع على القياسات في مسار التوقيتات. إذا لم تتمكّن من رؤية المسار، تحقَّق من توقيتات المستخدم في الإعدادات.
- لعرض التفاصيل، انقر على التوقيت في المقطع الصوتي.
تخصيص واجهة المستخدم
لتخصيص المخطط الزمني والمقاطع، انقر على رمز الإعدادات في اللوحة وضع علامة في المربّعات بجانب الخيارات المفضّلة.
تصدير تسجيل
لحفظ تسجيل، انقر على تصدير .
استيراد تسجيل
لتحميل تسجيل، انقر على استيراد .
حذف تسجيل
لحذف تسجيل، اتّبِع ما يلي:
- انقر على حذف. سيظهر مربّع حوار للتأكيد.
- في مربّع الحوار، انقر على حذف لتأكيد عملية الحذف.