استخدِم لوحة إحصاءات الأداء للحصول على إحصاءات قابلة للاستخدام ومستندة إلى حالات الاستخدام حول أداء موقعك الإلكتروني.
نظرة عامة
تتيح لك لوحة إحصاءات الأداء إجراء ما يلي:
- تسجيل أداء تحميل الصفحة وقياسه
- عرض مقاييس أداء Web Vitals
- عرض نشاط الشبكة
- محاكاة سرعات وحدة المعالجة المركزية والشبكة البطيئة
- استيراد التسجيلات وتصديرها
ما الغرض من إنشاء لوحة جديدة؟
لوحة إحصاءات الأداء الجديدة هي تجربة لمعالجة النقاط الثلاث التالية التي تؤرق المطوّرين عند استخدام لوحة الأداء الحالية:
- كمية المعلومات كبيرة جدًا: من خلال واجهة المستخدم المُعاد تصميمها، تعمل لوحة إحصاءات الأداء على تبسيط البيانات وعرض المعلومات ذات الصلة فقط.
- من الصعب التمييز بين حالات الاستخدام. تتيح لوحة إحصاءات الأداء إجراء تحليل مستند إلى حالات الاستخدام. لا تتيح هذه الميزة حاليًا سوى استخدام حالة تحميل الصفحة، وستتوفّر المزيد من الميزات في المستقبل استنادًا إلى ملاحظاتك، مثل التفاعل.
- تتطلّب خبرة عميقة في كيفية عمل المتصفّحات لاستخدامها بفعالية. تُبرز لوحة إحصاءات الأداء الإحصاءات الرئيسية في لوحة الإحصاءات، مع ملاحظات قابلة للتنفيذ حول كيفية حلّ المشاكل.
مقدمة
يشرح لك هذا الدليل التعليمي كيفية قياس أداء تحميل الصفحة وفهمه باستخدام لوحة إحصاءات الأداء. تابِع القراءة أو شاهِد نسخة الفيديو من هذا الدليل التعليمي أعلاه.
فتح لوحة "إحصاءات الأداء"
- افتح "أدوات مطوّري البرامج".
انقر على خيارات إضافية > مزيد من الأدوات > إحصاءات الأداء.
بدلاً من ذلك، استخدِم قائمة الأوامر لفتح لوحة إحصاءات الأداء.
تسجيل الأداء
يمكن أن تسجِّل لوحة إحصاءات الأداء الأداء العام والأداء المستنِد إلى حالات الاستخدام (مثل تحميل الصفحة).
- افتح هذه الصفحة التجريبية في علامة تبويب جديدة، وفي الصفحة، افتح لوحة "إحصاءات الأداء".
يمكنك خفض سرعة الشبكة ووحدة المعالجة المركزية أثناء التسجيل. في هذا الدليل التعليمي، ضَع علامة في المربّع بجانب إيقاف ذاكرة التخزين المؤقت واضبط وحدة المعالجة المركزية على تقليل السرعة بمقدار 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، يحتاج العنوان إلى تحسين. ويعكس لون خلفية نافذة الجلسة اللون نفسه.
يزداد الرسم البياني في الخلفية لإطار الجلسة بمرور الوقت. تعكس النتيجة التراكمية لمتغيّر التصميم الزيادة في تلك النقطة الزمنية.
عرض نشاط الشبكة
اطّلِع على نشاط الشبكة في قناة الشبكة. يمكنك توسيع مسار الشبكة لعرض جميع أنشطة الشبكة والنقر على كل عنصر لعرض التفاصيل.
عرض نشاط وحدة المعالجة
اطّلِع على نشاط التقديم في قناة المعدّل. يمكنك توسيع كلّ أداة عرض لعرض الأنشطة والنقر على كلّ عنصر لعرض التفاصيل.
عرض نشاط وحدة معالجة الرسومات
اطّلِع على نشاط وحدة معالجة الرسومات في قناة الإصدار GPU. يكون سجلّ وحدة معالجة الرسومات مخفيًا تلقائيًا. لتفعيل هذه الميزة، ضَع علامة في المربّع بجانب وحدة معالجة الرسومات في الإعدادات.
عرض أوقات المستخدِمين
للحصول على مقاييس أداء مخصّصة، يمكنك استخدام توقيت المستخدِم وعرض التوقيتات بشكل مرئي باستخدام مسار التوقيت. لمزيد من المعلومات، يُرجى الاطّلاع على User timing API.
اطّلِع على هذه الصفحة التجريبية التي تحسب الوقت المستغرَق لتحميل النص.
لعرض أوقات المستخدمين:
- يمكنك وضع علامة على الأماكن في تطبيقك باستخدام الرمز
performance.mark(). - يمكنك قياس الوقت المنقضي بين العلامات باستخدام
performance.measure(). - تسجيل الأداء:
- اطّلِع على القياسات في مسار المواعيد. إذا لم يظهر لك المسار، تحقَّق من مُدد المستخدمين في الإعدادات.
- للاطّلاع على التفاصيل، انقر على التوقيت في المقطع الصوتي.
تخصيص واجهة المستخدم
لتخصيص المخطط الزمني والمقاطع الصوتية، انقر على رمز الإعدادات في اللوحة وضَع علامة في المربّعات بجانب الخيارات التي تفضّلها.
تصدير تسجيل
لحفظ تسجيل، انقر على رمز التصدير .
استيراد تسجيل
لتحميل تسجيل، انقر على رمز الاستيراد .
حذف تسجيل
لحذف تسجيل، اتّبِع ما يلي:
- انقر على حذف. سيظهر لك مربّع حوار تأكيد.
- في مربّع الحوار، انقر على حذف لتأكيد عملية الحذف.