استخدام الأدوات لقياس الأداء

Sam Dutton

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

لكل هدف، تحتاج إلى تدقيق.

الهدف لماذا؟ ما الذي يجب اختباره؟
ضمان الخصوصية والأمان وسلامة البيانات وتفعيل الاستخدام الفعّال لواجهة برمجة التطبيقات أسباب أهمية HTTPS تم تنفيذ بروتوكول HTTPS لجميع صفحات/مسارات الموقع الإلكتروني ومواد عرضه.
تحسين أداء التحميل يتراجع% 53 من المستخدمين عن المواقع الإلكترونية التي يستغرق تحميلها أكثر من ثلاث ثوانٍ محتوى JavaScript وCSS الذي يمكن تحميله بشكل غير متزامن أو تأجيله اضبط أهدافًا للوقت على حجم التفاعل وحجم الحمولة، على سبيل المثال TTI على شبكة الجيل الثالث. تحديد ميزانية للأداء
تقليل عرض الصفحة • تقليل تكلفة البيانات للمستخدمين الذين لديهم خطط بيانات محدودة • تقليل متطلبات مساحة التخزين لتطبيقات الويب، خاصةً بالنسبة إلى مستخدمي الأجهزة المنخفضة المواصفات • تقليل تكاليف الاستضافة والعرض • تحسين أداء العرض والموثوقية والمرونة ضبط ميزانية لحجم الصفحة، على سبيل المثال، تحميل أول تحميل أقل من 400 كيلو بايت تحقَّق مما إذا كان محتوى JavaScript كثيفًا. تحقَّق من أحجام الملفات للعثور على صور ووسائط وHTML وCSS وJavaScript متضخمة. ابحث عن الصور التي يمكن تحميلها بشكل كسول، وابحث عن الرموز غير المستخدَمة باستخدام أدوات التغطية.
تقليل طلبات الموارد • تقليل مشاكل وقت الاستجابة • تقليل تكاليف العرض • تحسين أداء العرض والموثوقية والمرونة ابحث عن الطلبات الزائدة أو غير الضرورية لأي نوع من الموارد. على سبيل المثال: الملفات التي يتم تحميلها بشكل متكرر أو ملفات JavaScript التي يتم تحميلها في إصدارات متعددة أو ملفات CSS التي لا يتم استخدامها مطلقًا أو الصور التي لا يتم عرضها مطلقًا (أو التي يمكن تحميلها باستخدام طريقة \"التحميل الكسول\").
تحسين استخدام الذاكرة يمكن أن تصبح الذاكرة المؤثِّر السلبي الجديد، وخاصةً على الأجهزة الجوّالة استخدِم "إدارة مهام Chrome" لمقارنة موقعك الإلكتروني بالمواقع الإلكترونية الأخرى بهدف استخدام الذاكرة عند تحميل الصفحة الرئيسية واستخدام ميزات الموقع الإلكتروني الأخرى.
تقليل حِمل وحدة المعالجة المركزية (CPU) الأجهزة الجوّالة هي وحدة معالجة مركزية (CPU) محدودة، خاصةً الأجهزة منخفضة المواصفات تحقَّق مما إذا كان محتوى JavaScript كثيفًا. يمكنك العثور على رموز JavaScript وCSS غير المستخدَمة باستخدام أدوات التغطية. تحقّق من حجم DOM الزائد والنصوص البرمجية التي يتم تشغيلها بدون داعٍ عند التحميل الأول. ابحث عن JavaScript التي تم تحميلها في إصدارات متعددة، أو مكتبات يمكن تجنبها من خلال إعادة الهيكلة البسيطة.

هناك مجموعة كبيرة من الأدوات والتقنيات لتدقيق مواقع الويب:

  • أدوات النظام
  • أدوات المتصفّح المضمَّنة
  • إضافات المتصفّح
  • تطبيقات الاختبار على الإنترنت
  • أدوات المحاكاة
  • الإحصاءات
  • المقاييس التي توفرها الخوادم وأنظمة الأعمال
  • تسجيل الشاشة والفيديو
  • الاختبارات اليدوية

ستتعرف أدناه على النهج المناسب لكل نوع من أنواع التدقيق.

تسجيل طلبات الموارد: العدد والحجم والنوع والتوقيت

أفضل مكان للبدء عند تدقيق موقع إلكتروني هو فحص الصفحات باستخدام أدوات الشبكة الخاصة بمتصفّحك. إذا لم تكن متأكدًا من طريقة إجراء ذلك، انتقِل إلى لوحة شبكة "أدوات مطوري البرامج في Chrome" دليل البدء. تتوفر أدوات مماثلة لـ Firefox وSafari وInternet Explorer وEdge.

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

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

في ما يلي بعض الميزات والمقاييس الأساسية التي يجب التحقّق منها باستخدام أدوات المتصفّح:

  • أداء التحميل: توفّر Lighthouse ملخّصًا لمقاييس التحميل. كتب "آدي عثماني" ملخّصًا رائعًا عن لحظات المستخدمين الرئيسية لتحميل الصفحة.
  • أحداث المخطط الزمني لتحميل الموارد وتحليلها واستخدام الذاكرة. إذا أردت التعمّق أكثر، يمكنك تشغيل الذاكرة وتحليل JavaScript.
  • إجمالي وزن الصفحة وعدد الملفات.
  • عدد ملفات JavaScript وحجمها.
  • أي ملفات JavaScript فردية كبيرة بشكل خاص (أكثر من 100 كيلوبايت مثلاً).
  • JavaScript غير مستخدَم. يمكنك التحقّق من ذلك باستخدام أداة التغطية في Chrome.
  • إجمالي عدد ملفات الصور ووزنها
  • أي ملفات صور فردية كبيرة بشكل خاص:
  • تنسيقات الصور: هل هناك تنسيق PNG الذي يمكن أن يكون بتنسيق JPEG أو SVG؟ هل يتم استخدام تنسيق WebP مع العناصر الاحتياطية؟
  • ما إذا كان يتم استخدام تقنيات صور سريعة الاستجابة (مثل srcset) أم لا.
  • حجم ملف HTML.
  • إجمالي عدد ملفات CSS وعرضها.
  • محتوى CSS غير مُستخدَم. (في Chrome، استخدِم لوحة التغطية.)
  • تحقق من وجود مشكلات في الاستخدام لمواد العرض الأخرى مثل خطوط الويب (بما في ذلك خطوط الرموز).
  • تحقَّق من المخطط الزمني في "أدوات مطوري البرامج" بحثًا عن أي عناصر تمنع تحميل الصفحة.

إذا كنت تعمل من خلال شبكة Wi-Fi سريعة أو اتصال شبكة جوّال سريع، اختبِر الاتصال باستخدام معدّل نقل بيانات منخفض ومحاكاة زمن انتقال عالٍ. احرص على إجراء الاختبارات على الأجهزة الجوّالة وكذلك على أجهزة الكمبيوتر المكتبي، فبعض المواقع الإلكترونية تستخدم خوارزمية تقصّي UA لتقديم مواد عرض وتنسيقات مختلفة للأجهزة المختلفة. قد تحتاج إلى اختبار الأجهزة باستخدام تصحيح الأخطاء عن بُعد، وليس فقط باستخدام محاكاة الأجهزة.

التحقق من الحِمل في الذاكرة ووحدة المعالجة المركزية (CPU)

قبل إجراء تغييرات، يُرجى الاحتفاظ بسجلّ حول استخدام الذاكرة ووحدة المعالجة المركزية (CPU).

في Chrome، يمكنك الوصول إلى "إدارة المهام" من قائمة "نافذة". هذه طريقة بسيطة للتحقق من متطلبات صفحة الويب.

أداة "إدارة مهام Chrome" تعرض استخدام الذاكرة ووحدة المعالجة المركزية (CPU) لعلامات التبويب الأربع المفتوحة في المتصفّح
أداة "إدارة المهام" في Chrome: عليك الانتباه إلى أهمية الذاكرة ووحدة المعالجة المركزية (CPU).

اختبار أداء التحميل الأول والتحميل اللاحق

تُعدّ Lighthouse وWebPagetest وإحصاءات Pagespeed مفيدة لتحليل السرعة وتكلفة البيانات واستخدام الموارد. سيتحقق WebPagetest من التخزين المؤقت للمحتوى الثابت، والوقت المستغرق للوصول إلى البايت الأول، وما إذا كان موقعك يستفيد من شبكات توصيل المحتوى (CDN) بشكل فعّال.

حفظ النتائج

اختبار المتطلبات الأساسية لتطبيق الويب التقدّمي

تساعدك أداة Lighthouse في اختبار الأمان والوظائف وتسهيل الاستخدام والأداء وأداء محرّكات البحث. وعلى وجه التحديد، تتحقّق أداة Lighthouse من ما إذا كان موقعك الإلكتروني قد نفّذ ميزات تطبيق الويب التقدّمية (PWA) بنجاح، مثل مشغّلي الخدمات وبيان تطبيق الويب.

تختبر أداة Lighthouse أيضًا ما إذا كان بإمكان موقعك الإلكتروني توفير تجربة مقبولة بلا اتصال بالإنترنت.

يمكنك تنزيل تقرير Lighthouse بتنسيق JSON أو إذا كنت تستخدم إضافة Lighthouse في Chrome، يمكنك مشاركة التقرير على هيئة GitHub Gist: انقر على زر المشاركة واختَر "فتح في العارض"، ثم انقر على زر المشاركة مرة أخرى في النافذة الجديدة وعلى "الحفظ باسم Gist".

لقطة شاشة تعرض كيفية تصدير تقرير Chrome Lighthouse كخلاصة
تصدير تقرير إلى ملخص من إضافة Lighthouse في Chrome، والنقر على زر المشاركة

استخدِم الإحصاءات وتتبُّع الأحداث ومقاييس الأعمال لتتبّع الأداء الفعلي.

إذا استطعت، فاحتفظ بسجل لبيانات الإحصاءات قبل تنفيذ التغييرات: معدلات الارتداد، والوقت المستغرق في الصفحة، وصفحات الخروج: كل ما ينطبق على متطلبات نشاطك التجاري.

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

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

يمكنك متابعة سرعة الموقع الإلكتروني في "إحصاءات Google" للاطّلاع على كيفية ارتباط مقاييس الأداء بمقاييس النشاط التجاري. على سبيل المثال: "ما مدى سرعة تحميل الصفحة الرئيسية؟" مقارنة بـ "هل أدى الدخول عبر الصفحة الرئيسية إلى تحقيق عملية بيع؟"

لقطة شاشة تعرض سرعة الموقع الإلكتروني في "إحصاءات Google"

تستخدم "إحصاءات Google" بيانات من واجهة برمجة تطبيقات وقت التنقل.

يمكنك تسجيل البيانات باستخدام إحدى واجهات برمجة تطبيقات الأداء في JavaScript أو المقاييس الخاصة بك، على سبيل المثال:

    const subscribeBtn = document.querySelector('#subscribe');

    subscribeBtn.addEventListener('click', (event) => {
     // Event listener logic goes here...

     const lag = performance.now() - event.timeStamp;
     if (lag > 100) {
      ga('send', 'event', {
       eventCategory: 'Performance Metric'
       eventAction: 'input-latency',
       eventLabel: '#subscribe:click',
       eventValue: Math.round(lag),
       nonInteraction: true,
      });
     }
    });

يمكنك أيضًا استخدام ReportingMonitorer للتحقّق من إيقاف المتصفِّح وتحذيرات التدخل. وهي إحدى واجهات برمجة التطبيقات العديدة التي تتيح الحصول على قياسات فعلية من مستخدمين فعليين.

تجربة حقيقية: تسجيل الشاشة والفيديو

يمكنك تسجيل فيديو لتحميل الصفحة على الجهاز الجوّال والكمبيوتر المكتبي. تعمل هذه الميزة بشكل أفضل مع معدلات عرض اللقطات العالية وفي حال إضافة شاشة عرض مؤقّتة.

يمكنك أيضًا حفظ التسجيلات الرقمية للشاشة. هناك العديد من تطبيقات تسجيل التسجيل الرقمي للشاشة على أنظمة التشغيل Android وiOS وأجهزة سطح المكتب (والنصوص البرمجية لتنفيذ الإجراء نفسه).

يشبه تحميل صفحة تسجيل الفيديو إلى حد كبير طريقة عرض شريط الأفلام في WebPagetest أو Capture لقطات الشاشة في "أدوات مطوري البرامج في Chrome". يمكنك الحصول على سجل واقعي لسرعة تحميل مكوّنات الصفحة: السرعة والبطيئة. يمكنك حفظ تسجيلات الفيديو والتسجيلات الرقمية للشاشة لمقارنتها بالتحسينات اللاحقة.

يمكن أن تكون المقارنة جنبًا إلى جنب قبل وبعد طريقة رائعة لإظهار التحسينات!

وماذا أيضًا؟

يمكنك الحصول على نتيجة Web Bloat Score (درجات حرارة مختلفة على الويب) إذا كان ذلك مناسبًا. هذا اختبار ممتع، ولكن قد يكون أيضًا طريقة مقنعة لتوضيح تعدّد التعليمات البرمجية - أو لإظهار أنك قد أجريت تحسينات.

مقالة ما تكلفة موقعي الإلكتروني؟، كما هو موضّح أدناه، هي دليل تقريبي إلى التكلفة المالية لتحميل موقعك الإلكتروني في المناطق المختلفة.

لقطة شاشة من whatdoesmysitecost.com

وتتوفر العديد من الأدوات المستقلة الأخرى على الإنترنت: يمكنك إلقاء نظرة على perf.rocks/tools.