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

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. في قسم إعدادات البيئة، اضبط القائمة المنسدلة الشبكة على شبكة الجيل الرابع السريعة مثلاً، واضبط وحدة المعالجة المركزية (CPU) على بطء 20 ضعفًا مثلاً. يمكنك أيضًا التأكّد من إيقاف ذاكرة التخزين المؤقت للشبكة في القسم نفسه.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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