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

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

نظرة عامة

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

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

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

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

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

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

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

1. افتح "أدوات مطوّري البرامج".
2. افتح قائمة الأوامر بالضغط على:
3. في نظام التشغيل macOS: Command+Shift+P
4. في أنظمة التشغيل Windows وLinux وChromeOS: Control+Shift+P
5. ابدأ بكتابة Performance panel، ثم انقر على Show 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 باستخدام لوحة "الأداء"
• تحليل عدد اللقطات في الثانية
• مرجع أحداث المخطط الزمني

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

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

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