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

Sam Dutton

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

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

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

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

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

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

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

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

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

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

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

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

التحقّق من ذاكرة الجهاز وتحميل وحدة المعالجة المركزية

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

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

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

إنّ Lighthouse و WebPagetest و Pagespeed Insights مفيدة لتحليل السرعة وتكاليف البيانات واستخدام الموارد. سيتحقّق WebPagetest أيضًا من ملف cach المحتوى الثابت والوقت المستغرَق لتحميل أول بايت وما إذا كان موقعك الإلكتروني يستخدم خدمات CDN بفعالية.

حفظ النتائج

• WebPagetest: لكل نتيجة اختبار عنوان URL خاص بها.
• إحصاءات PageSpeed: على الإنترنت تتضمّن أداة "إحصاءات PageSpeed" الآن بيانات تقرير تجربة المستخدم في Chrome التي تُبرز إحصاءات الأداء الفعلي.
• Lighthouse: يمكنك حفظ التقارير من لوحة "تدقيق أدوات مطوّري البرامج في Chrome" بالنقر على زر التنزيل:

  

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

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

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

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

استخدام الإحصاءات وتتبُّع الأحداث ومقاييس النشاط التجاري لتتبُّع الأداء في الواقع

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

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

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

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

تستخدِم "إحصاءات Google" بيانات من Navigation Timing API.

قد تحتاج إلى تسجيل البيانات باستخدام إحدى واجهات برمجة التطبيقات لأداء 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,
      });
     }
    });

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

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

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

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

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

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

وماذا أيضًا؟

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

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

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