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