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

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

نظرة عامة

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

استخدِم لوحة الأداء لتنفيذ ما يلي:

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

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

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

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

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

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

مراقبة "مؤشرات Core Web Vitals" مباشرةً

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

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

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

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

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

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

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

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

   

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

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

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

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

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

      

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

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

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

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

   

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

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

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

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

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

   

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

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

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

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

   

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

بعد ذلك، يمكنك البدء في تحسين مؤشرات Core Web Vitals لموقعك الإلكتروني باتّباع الخطوات التالية:

• تحسين مقياس "سرعة عرض أكبر محتوى مرئي"
• تحسين مقياس INP
• تحسين متغيّر التصميم التراكمي

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

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

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

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

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

تغيير إعدادات الالتقاط

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

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

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

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

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

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

للتعرّف على كيفية التنقّل في التقرير، اتّبِع الخطوات التالية:

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

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

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

للتعرّف على كيفية التركيز على ما يهمّ في سير عملك، اتّبِع الخطوات التالية:

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

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

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

للتعرّف على كيفية تحليل التقرير، اتّبِع الخطوات التالية:

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

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

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

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

مراجع إضافية