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

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) المحلي ونتائجه، بالإضافة إلى مقياس 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 المحلي، ومقارنة نتائج المقاييس مرة أخرى.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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