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