إتاحة عمليات التدقيق الآلي باستخدام AutoWebPerf

أداة نمطية جديدة تتيح جمع بيانات الأداء تلقائيًا من مصادر متعددة.

Antoine Bisch

Gilberto Cocchi

Jonathan Chen

ما هي أداة AutoWebPerf (AWP)؟

AutoWebPerf (AWP) هي أداة نموذجية تتيح جمع بيانات الأداء تلقائيًا من مصادر متعددة. تتوفّر حاليًا العديد من الأدوات لقياس أداء المواقع الإلكترونية في نطاقات مختلفة (مختبرية وميدانية)، مثل "تقرير تجربة المستخدم على Chrome" أو "إحصاءات PageSpeed" أو WebPageTest. توفّر AWP إمكانية الدمج مع أدوات تدقيق مختلفة من خلال عملية إعداد بسيطة، ما يتيح لك مراقبة أداء الموقع الإلكتروني باستمرار في مكان واحد.

إنّ طرح إرشادات Web Vitals يعني أنّ المراقبة الدقيقة والنشطة لصفحات الويب أصبحت أكثر أهمية. لقد أجرى المهندسون الذين صمّموا هذه الأداة عمليات تدقيق الأداء لسنوات، وأنشأوا AWP لأتمتة جزء يدوي ومتكرر ويستغرق وقتًا طويلاً من أنشطتهم اليومية. اليوم، وصلت أداة AWP إلى مستوى متقدّم وأصبحت جاهزة للمشاركة على نطاق واسع ليتمكّن الجميع من الاستفادة من ميزات التشغيل الآلي التي توفّرها.

يمكن الوصول إلى الأداة من المستودع العام AutoWebPerf على GitHub.

ما هو برنامج AWP؟

على الرغم من توفّر العديد من الأدوات وواجهات برمجة التطبيقات لرصد أداء صفحات الويب، فإنّ معظمها يعرض البيانات التي تم قياسها في وقت معيّن. لمراقبة موقع إلكتروني بشكل مناسب والحفاظ على الأداء الجيد للصفحات الرئيسية، ننصحك بقياس مؤشرات Core Web Vitals باستمرار بمرور الوقت ومراقبة المؤشرات.

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

على سبيل المثال، باستخدام AWP، يمكنك ضبط اختبار يومي على صفحتك الرئيسية لتسجيل بيانات الاستخدام الفعلي من CrUX API وبيانات المختبر من تقرير Lighthouse من إحصاءات PageSpeed. يمكن كتابة هذه البيانات وتخزينها بمرور الوقت، مثلاً في جداول بيانات Google، ثم عرضها بشكل مرئي في لوحة بيانات "مركز البيانات". تعمل AWP على أتمتة الجزء الصعب من العملية بأكملها، ما يجعلها حلاً رائعًا لتتبُّع المؤشرات في المختبر والميدان بمرور الوقت. لمزيد من التفاصيل، يُرجى الاطّلاع على عرض نتائج التدقيق بشكل مرئي في "مركز البيانات" أدناه.

نظرة عامة على البنية

‫AWP هي مكتبة مستندة إلى الوحدات وتتضمّن ثلاثة أنواع مختلفة من الوحدات:

• المحرّك
• وحدات الموصل
• وحدات gatherer

يأخذ المحرّك قائمة بالاختبارات من موصّل (على سبيل المثال، من ملف CSV محلي)، ويجري عمليات تدقيق الأداء من خلال أدوات التجميع المحدّدة (مثل إحصاءات PageSpeed)، ويكتب النتائج في موصّل الإخراج (على سبيل المثال، "جداول بيانات Google").

تتضمّن "منصة تحليلات Google" عددًا من أدوات جمع البيانات والموصلات التي تم تنفيذها مسبقًا:

• أدوات جمع البيانات المُعدّة مسبقًا:
  • CrUX API
  • CrUX BigQuery
  • واجهة برمجة التطبيقات لإحصاءات PageSpeed
  • WebPageTest API
• الموصِّلات المُنفَّذة مسبقًا:
  • جداول بيانات Google
  • JSON
  • CSV

أتمتة عمليات التدقيق باستخدام AWP

تُجري AWP عمليات تدقيق الأداء تلقائيًا من خلال منصات التدقيق المفضّلة لديك، مثل إحصاءات PageSpeed أو WebPageTest أو CrUX API. توفّر AWP المرونة في اختيار مكان تحميل قائمة الاختبارات ومكان كتابة النتائج.

على سبيل المثال، يمكنك إجراء عمليات تدقيق لقائمة من الاختبارات المخزّنة في "جدول بيانات Google"، وكتابة النتائج في ملف CSV، باستخدام الأمر أدناه:

PSI_APIKEY=<YOUR_KEY> SHEETS_APIKEY=<YOUR_KEY> ./awp run sheets:<SheetID> csv:output.csv

عمليات التدقيق المتكرّرة

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

{
  "tests": [
    {
      "label": "web.dev",
      "url": "https://web.dev",
      "gatherer": "psi"
    }
  ]
}

يقرأ الأمر أدناه قائمة اختبارات التدقيق من ملف JSON محلي، ويجري عمليات تدقيق على جهاز محلي، ثم يعرض النتائج في ملف CSV محلي:

PSI_APIKEY=<YOUR_KEY> ./awp run json:tests.json csv:output.csv

لتنفيذ عمليات التدقيق كل يوم كخدمة تُشغَّل في الخلفية بشكل مستمر، يمكنك استخدام الأمر أدناه بدلاً من ذلك:

PSI_APIKEY=<YOUR_KEY> ./awp continue json:tests.json csv:output.csv

بدلاً من ذلك، يمكنك إعداد crontab في بيئة شبيهة بنظام Unix لتشغيل AWP كمهمة cron يومية:

0 0 * * * PSI_APIKEY=<YOUR_KEY> ./awp run json:tests.json csv:output.csv

يمكنك العثور على المزيد من الطرق لأتمتة عمليات التدقيق اليومية وجمع النتائج في مستودع AWP GitHub.

عرض نتائج التدقيق بشكل مرئي في "مركز البيانات"

بالإضافة إلى قياس مؤشرات Core Web Vitals باستمرار، من المهم أن تتمكّن من تقييم المؤشرات واكتشاف أي تراجع محتمل باستخدام مقاييس المستخدم الفعلي (RUM) أو بيانات "تقرير تجربة المستخدم على Chrome" (CrUX) التي تجمعها AWP. يُرجى العِلم أنّ "تقرير تجربة المستخدم على Chrome" (CrUX) هو تجميع متحرّك لمدة 28 يومًا، لذا يُنصح أيضًا باستخدام بيانات مراقبة المستخدم الحقيقي (RUM) الخاصة بك مع CrUX حتى تتمكّن من رصد حالات التراجع بشكل أسرع.

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

لتبسيط العملية الكاملة من جمع البيانات إلى عرضها بشكل مرئي، يمكنك تشغيل AWP باستخدام قائمة بعناوين URL لتصدير النتائج تلقائيًا إلى "جداول بيانات Google" باستخدام الأمر التالي:

PSI_APIKEY=<YOUR_KEY> SHEETS_APIKEY=<YOUR_KEY> ./awp run sheets:<SheetID> csv:output.csv

بعد جمع المقاييس اليومية في جدول بيانات، يمكنك إنشاء لوحة بيانات في مركز البيانات تحمّل البيانات مباشرةً من جدول البيانات، وترسم المؤشرات في رسم بياني للسلسلة الزمنية. اطّلِع على موصّل Google Spreadsheets API للحصول على خطوات تفصيلية حول كيفية إعداد AWP باستخدام جداول البيانات كمصدر بيانات لعرضها بشكل مرئي في Data Studio.

ما هي الخطوات التالية؟

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

يمكنك الاطّلاع على مزيد من المعلومات في مستودع AutoWebPerf.