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

Dale St. Marthe
Dale St. Marthe
LinkedIn

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

نظرة عامة

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

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

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

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

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

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

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

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

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

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

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

تعرض لوحة الأداء قائمة بالتفاعلات التي تم تسجيلها ضمن بطاقات المقاييس الثلاث. لمحو القائمة، انقر على محو.

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

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

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

لإضافة بيانات الحقول:

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

    الزر "إعداد" في قسم "الخطوات التالية"

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

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

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

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

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

      التعيين بين أصلَي التطوير والإنتاج في القسم المتقدم.

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

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

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

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

    تعرض المجموعة بيانات الحقل بعد استرجاعها.

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

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

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

لضبط بيئتك:

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

    أقسام "مراعاة ظروف الاختبار على نظامك المحلي" الموسّعة في كل بطاقة مقياس

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

  2. لمطابقة إعدادات البيئة لهذا المثال:

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

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

    يتم ضبط البيئة لتطابق تجربة المستخدم الفعلية.

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

بعد ذلك، يمكنك البدء في تحسين مؤشرات أداء الويب الأساسية لموقعك الإلكتروني:

إنشاء تقرير أداء وتحليله

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

تسجيل ملف شخصي للأداء

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

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

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

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

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

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

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

للتعرّف على كيفية التنقّل في التقرير:

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

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

للتعرّف على كيفية تحليل التقرير:

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

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