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

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

نظرة عامة

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

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

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

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

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

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

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

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 لصفحتك باستخدام جهازك واتصالك بالشبكة.

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

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

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

يمكنك أيضًا استرجاع بيانات الاستخدام الفعلي من تقرير تجربة المستخدم على 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 المحلي، ثم قارِن نتائج المقياس مرة أخرى.

   

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

يمكنك الآن البدء في تحسين مؤشرات أداء الويب الأساسية لموقعك الإلكتروني باتّباع الخطوات التالية:

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

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

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

تسجيل بيانات الأداء

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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