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