لوحة الأداء: تحليل أداء موقعك الإلكتروني

استخدِم لوحة الأداء لتحليل أداء موقعك الإلكتروني.

نظرة عامة

تتيح لك لوحة الأداء تسجيل ملفات تعريف أداء وحدة المعالجة المركزية لتطبيقات الويب. يمكنك تحليل ملفات التعريف للعثور على المشاكل المحتمَلة التي تؤدي إلى حدوث بطء في الأداء والطرق التي يمكنك من خلالها تحسين استخدام الموارد.

استخدِم لوحة الأداء لإجراء ما يلي:

• تسجيل ملف تعريف الأداء
• تغيير إعدادات التسجيل
• تحليل تقرير الأداء

للحصول على دليل شامل حول تحسين أداء موقعك الإلكتروني، يُرجى الاطّلاع على مقالة تحليل أداء وقت التشغيل.

فتح لوحة "الأداء"

لفتح لوحة الأداء ، افتح "أدوات مطوّري البرامج" وانقر على الأداء من مجموعة علامات التبويب في أعلى الصفحة.

بدلاً من ذلك، اتّبِع الخطوات التالية لفتح لوحة الأداء باستخدام قائمة الأوامر:

1. افتح "أدوات مطوّري البرامج".
2. افتح قائمة الأوامر بالضغط على:
3. في نظام التشغيل macOS: Command+Shift+P
4. في نظام التشغيل Windows وLinux وChromeOS‏: Control+Shift+P
5. ابدأ بكتابة Performance panel ، ثم انقر على عرض لوحة الأداء واضغط على Enter.

مراقبة "مؤشرات أداء الويب الأساسية" مباشرةً

عند فتح لوحة الأداء ، تسجِّل اللوحة على الفور مقياسَي "سرعة عرض أكبر محتوى مرئي" (LCP) و"متغيّرات التصميم التراكمية" (CLS) المحليَين وتعرضهما لك، وتخبرك بالنتيجة (جيدة أو بحاجة إلى تحسين أو سيئة).

إذا تفاعلت مع صفحتك، تسجِّل لوحة الأداء أيضًا مقياس مدى استجابة الصفحة لتفاعلات المستخدم (INP) المحلي ونتيجته، ما يمنحك، بالإضافة إلى مقياسَي LCP وCLS، نظرة عامة كاملة على مؤشرات أداء الويب الأساسية لصفحتك باستخدام اتصال الشبكة وجهازك. تسجِّل اللوحة أيضًا Core Web Vitals لعمليات التنقّل الجزئي من جهة العميل في التطبيقات ذات الصفحة الواحدة، وتعدّ تقارير عنها.

ضمن بطاقات المقاييس الثلاث في علامتَي التبويب التفاعلات ومتغيّرات التصميم ، يمكنك العثور على جداول تتضمّن معلومات عن التفاعلات ومتغيّرات التصميم التي تم تسجيلها، بما في ذلك العناصر والأوقات والمراحل (للتفاعلات) والنتائج (لمتغيّرات التصميم). لمحو كلتا القائمتَين، انقر على block محو.

للاطّلاع على تفاصيل نتيجة أحد المقاييس، مرِّر مؤشر الماوس فوق قيمة المقياس لعرض تلميح.

مقارنة تجربتك بتجربة المستخدمين

يمكنك أيضًا استرجاع بيانات تجارب المستخدمِين الحقيقيين من تقرير تجربة المستخدم على Chrome ومقارنة تجربة مستخدمي موقعك الإلكتروني بالمقاييس المحلية.

لإضافة بيانات تجارب المستخدمِين الحقيقيين، اتّبِع الخطوات التالية:

1. في الأداء > الخطوات التالية > بيانات تجارب المستخدمِين الحقيقيين، انقر على الإعداد.

   

2. في مربّع الحوار ضبط استرجاع بيانات تجارب المستخدمِين الحقيقيين ، اطّلِع على بيان الخصوصية وانقر على حسنًا.

   إعدادات متقدّمة: إعداد عملية ربط بين بيئتَي التطوير والإنتاج...

   اختياريًا، للحصول تلقائيًا على بيانات تجارب المستخدمِين الحقيقيين الأكثر صلة، يمكنك إعداد (عمليات ربط متعدّدة) بين مصادر التطوير والإنتاج:

   1. في نافذة مربّع الحوار، وسِّع قسم إعدادات متقدّمة وانقر على + جديد.

   2. في جدول الربط، أدخِل عناوين URL لمصدرَي التطوير والإنتاج وانقر على +.

      

      على سبيل المثال، سيؤدي ربط http://localhost:8080 بـ https://example.com إلى عرض بيانات تجارب المستخدمِين الحقيقيين لـ example.com/page1 عند الانتقال إلى localhost:8080/page1.

      بالإضافة إلى ذلك، إذا تعذّر عليك الحصول على بيانات تجارب المستخدمِين الحقيقيين تلقائيًا لسبب ما، يمكنك تفعيل check_boxعرض بيانات تجارب المستخدمِين الحقيقيين دائمًا بشأن عنوان URL أدناه وتقديم عنوان URL. ستحاول لوحة الأداء أولاً استرجاع بيانات تجارب المستخدمِين الحقيقيين لعنوان URL هذا، ثم ستعرض لك هذه البيانات بغض النظر عن الصفحة التي تنتقل إليها.

      لتغيير إعدادات استرجاع بيانات تجارب المستخدمِين الحقيقيين بعد الإعداد، انقر على بيانات تجارب المستخدمِين الحقيقيين > ضبط.

   بعد إعداد عملية استرجاع بيانات تجارب المستخدمِين الحقيقيين، تعرض لك لوحة الأداء الآن مقارنة بين نتائج المقاييس المحلية وتلك التي يواجهها المستخدمون. يمكنك الاطّلاع على فترة جمع البيانات في قسم بيانات تجارب المستخدمِين الحقيقيين على يسار الشاشة.

   

   للاطّلاع على تفاصيل نتيجة أحد المقاييس، مرِّر مؤشر الماوس فوق قيمة المقياس لعرض تلميح.

ضبط بيئتك لتتطابق بشكل أفضل مع بيئة المستخدمين

بعد إعداد عملية استرجاع بيانات تجارب المستخدمِين الحقيقيين كما هو موضّح في القسم السابق، تقدّم لك لوحة الأداء اقتراحات حول كيفية ضبط بيئتك لتتطابق بشكل أفضل مع تجربة المستخدمين.

لضبط بيئتك، اتّبِع الخطوات التالية:

1. في كل بطاقة مقياس، وسِّع قسم مراعاة ظروف الاختبار على نظامك المحلي ، إن وُجد، واقرأ الاقتراحات.

   

   في هذا المثال، يبدو أنّه لتتطابق تجربتك بشكل أفضل مع تجربة المستخدمين، قد تحتاج إلى استخدام حجم شاشة شائع لأجهزة سطح المكتب وتقليل سرعة وحدة المعالجة المركزية (CPU) والشبكة.

2. لمطابقة إعدادات البيئة في هذا المثال، اتّبِع الخطوات التالية:

   1. اضبط إطار العرض على أحد أحجام الشاشة الشائعة (مثل 720p أو 1080p). لمحاكاة أجهزة وأحجام شاشة معيّنة، يمكنك استخدام وضع الجهاز في لوحة العناصر.
   2. يستخدم% 82 من مستخدمي الموقع الإلكتروني في هذا المثال أجهزة سطح المكتب للتصفّح. للتأكّد من مقارنة نتائج المقاييس المحلية ببيانات تجارب المستخدمِين الحقيقيين الصحيحة، يمكنك النقر على سطح المكتب من القائمة المنسدلة بيانات تجارب المستخدمِين الحقيقيين > الجهاز.
   3. في قسم إعدادات البيئة ، اضبط القائمة المنسدلة الشبكة على شبكة الجيل الرابع السريعة على سبيل المثال، ووحدة المعالجة المركزية (CPU) على إبطاء بمقدار 20 مرة على سبيل المثال. يمكنك أيضًا التأكّد من وضع علامة في مربّع الاختيار check_box إيقاف ذاكرة التخزين المؤقت للشبكة في القسم نفسه.

3. بعد ضبط بيئتك، أعِد تحميل الصفحة وتفاعَل معها لتسجيل مقياس INP المحلي، وقارِن نتائج المقاييس مرة أخرى.

   

   يبدو أنّ نتائج المقاييس أصبحت الآن أكثر تشابهًا مع تلك التي يواجهها المستخدمون. وبناءً على ذلك، اختفت أقسام مراعاة ظروف الاختبار على نظامك المحلي من بطاقات المقاييس.

بعد ذلك، يمكنك الآن البدء في تحسين Core Web Vitals لموقعك الإلكتروني:

• تحسين سرعة عرض أكبر محتوى مرئي (LCP)
• تحسين مدى استجابة الصفحة لتفاعلات المستخدم (INP)
• تحسين متغيّرات التصميم التراكمية (CLS)

تسجيل تقرير الأداء وتحليله

في الأقسام التالية، اتّبِع الإرشادات حول كيفية تسجيل ملف تعريف وتغيير إعدادات التسجيل وتحليل التقرير.

تسجيل ملف تعريف الأداء

عندما تكون مستعدًا للتسجيل، تمنحك لوحة الأداء الخيارات التالية:

• تسجيل أداء وقت التشغيل
• تسجيل أداء التحميل
• التقاط لقطات شاشة أثناء التسجيل
• فرض جمع البيانات غير الضرورية أثناء التسجيل
• حفظ تسجيل
• تحميل تسجيل
• محو تسجيل

تغيير إعدادات التسجيل

تتيح لك إعدادات التسجيل تغيير طريقة تسجيل "أدوات مطوّري البرامج" لتسجيلات الأداء، ويمكن أن تمنحك معلومات إضافية في التقرير. انقر على إعدادات التسجيل settings للوصول إلى قائمة إعدادات التسجيل.

اختَر الخيارات التالية من قائمة إعدادات التسجيل:

• إيقاف عيّنات JavaScript: يؤدي ذلك إلى إيقاف تسجيل حزم تنفيذ JavaScript المعروضة في مسار الرئيسي التي يتم استدعاؤها أثناء التسجيل. سيؤدي ذلك إلى تقليل النفقات العامة للأداء.
• تفعيل قياس سرعة العرض المتقدّم (قد يؤدي ذلك إلى حدوث بطء في الأداء): يؤدي ذلك إلى تسجيل قياس سرعة العرض المتقدّم. يؤدي ذلك إلى إعاقة الأداء بشكل كبير.
• تفعيل إحصاءات أداة اختيار لغة CSS (قد يؤدي ذلك إلى حدوث بطء في الأداء): يؤدي ذلك إلى تسجيل إحصاءات أداة اختيار لغة CSS. يؤدي ذلك إلى إعاقة الأداء بشكل كبير.
• ضبط الحدّ الأقصى المسموح لعرض نطاق وحدة المعالجة المركزية (CPU): يؤدي ذلك إلى محاكاة سرعات أبطأ لوحدة المعالجة المركزية (CPU).
• **ضبط الحدّ الأقصى المسموح لعرض نطاق الشبكة**: يؤدي ذلك إلى محاكاة سرعات أبطأ للشبكة.
• التقاط لقطات الشاشة: اختَر إعدادًا مُسبقًا لحجم إطار لقطة الشاشة والحد الأقصى لعدد اللقطات عند تفعيل لقطات الشاشة.

تحليل تقرير الأداء

يُرجى الاطّلاع على مقالة تحليل تسجيل الأداء للحصول على دليل كامل حول كيفية استخدام لوحة الأداء.

في ما يلي تجميع للمواضيع من الدليل، بالإضافة إلى مستندات مفيدة أخرى:

للتعرّف على كيفية التنقّل في التقرير، يُرجى الاطّلاع على ما يلي:

• التنقّل في التسجيل
• سجلّات البحث
• تتبُّع الجهات التي بدأت الحدث

استخدِم "إحصاءات الأداء" للحصول على إحصاءات قابلة للاستخدام حول أداء موقعك الإلكتروني:

• إحصاءات الأداء

للتعرّف على كيفية التركيز على ما يهم في سير عملك، يُرجى الاطّلاع على ما يلي:

• تغيير ترتيب عمليات التتبُّع وإخفاؤها
• إخفاء الدوال والعناصر التابعة لها في رسم بياني مفصّل لأداء الرموز
• إنشاء مسارات التنقّل والانتقال بين مستويات التكبير/التصغير

للتعرّف على علامات التبويب "من الأسفل إلى الأعلى" و"شجرة عمليات التتبُّع" و"سجلّ الأحداث"، يُرجى الاطّلاع على ما يلي:

• عرض الأنشطة في جدول

للتعرّف على كيفية تحليل التقرير، يُرجى الاطّلاع على ما يلي:

• عرض نشاط سلسلة العمل الرئيسية
• قراءة الرسم البياني المفصّل لأداء الرموز
• عرض لقطة شاشة
• عرض مقاييس الذاكرة
• عرض مدة جزء من التسجيل
• تحليل أداء أداة اختيار لغة CSS أثناء أحداث "إعادة احتساب النمط"
• ملف تعريف أداء Node.js باستخدام لوحة "الأداء"
• تحليل عدد اللقطات في الثانية (FPS)
• مرجع لأحداث المخطط الزمني

تحسين الأداء باستخدام هذه اللوحات

اكتشِف لوحات أخرى يمكن أن تساعدك في تحسين أداء موقعك الإلكتروني:

• Lighthouse: تحسين سرعة الموقع الإلكتروني
• الذاكرة: نظرة عامة على لوحة "الذاكرة"
• العرض: اكتشاف المشاكل المتعلّقة بأداء العرض
• المشاكل: العثور على المشاكل وحلّها
• الأداء: عرض معلومات الطبقات

مراجع إضافية