AutoWebPerf
1.0.0
يوفر AutOwebPerf إطارًا مرنًا وقابل للتطوير لتشغيل عمليات تدقيق أداء الويب باستخدام أدوات تدقيق تعسفية مثل WebPagetest و PageSpeedInsights. تمكن هذه المكتبة المطورين من جمع المقاييس باستمرار وتخزين المقاييس لمتجر البيانات المفضل مثل ملفات JSON المحلية أو أوراق Google أو BigQuery أو قاعدة بيانات SQL داخل المنزل.
تحقق من https://web.dev/autowebperf للمقدمة.
يأخذ AutOweBperf قائمة بالاختبارات من منصة متجر بيانات تعسفي ، مثل Jsons المحلية أو أوراق Google أو BigQuery أو قاعدة بيانات SQL المستضافة ذاتيًا. مع قائمة الاختبارات ، يقوم بتنفيذ عمليات التدقيق بناءً على كل تكوين اختبار ، ويجمع المقاييس من مصادر البيانات الفردية إلى قائمة بالنتائج .
يتم تعريف عملية تشغيل التدقيق من خلال أداة قياس (مثل WebPagetest) في المجموع الفردي. يتم تطبيق منطق القراءة والكتابة مع منصة بيانات (مثل JSON المحلية) في موصل .
src/connectors/csv-connector للحصول على التفاصيل)تعمل AutOwebperf كمجمع تدقيق للأداء يقوم بأتمتة عملية مراجعة الأداء ومقاييس Meterics من خلال أدوات قياس السرعة المتعددة بما في ذلك WebPagetest و PagePeedInsights و Chrome UX. نظرًا لأن كل أداة قياس السرعة الفردية توفر مقاييس التدقيق ، فإن Autowebperf تجمع النتائج ويكتب إلى أي منصة تخزين البيانات المفضلة ، مثل Jsons المحلية أو قاعدة البيانات المستندة إلى مجموعة النظراء أو أوراق غوغليز.
أولاً ، استنساخ AWP repo وتركيب NPM:
git clone https://github.com/GoogleChromeLabs/AutoWebPerf.git
npm install
بمجرد الانتهاء ، تحقق من التثبيت عن طريق إجراء اختبار واحد مع الأمر التالي:
./awp run examples/tests.json output/results.json
يستخدم هذا الأمر ملف المثال في examples/tests.json ويعيد النتائج إلى output/results.json .
لبدء الاختبارات المتكررة ، ستحتاج إلى تضمين خاصية recurring.frequency في ملف الاختبار وتعيين المشغل التالي في ملف الاختبار. لإعداد وقت الزناد التالي وتشغيل اختبار لمرة واحدة ، استخدم هذا الأمر بعد إضافة خاصية recurring.frequency .
./awp recurring examples/tests-recurring.json output/results.json
إذا كان هذا ناجحًا ، فسيكون وقت الزناد قد تم تحديث قاعدة على التردد الذي اخترته ، وكانت النتيجة قد كتبت إلى output/results.json .
بمجرد تعيين وقت الزناد بشكل صحيح ، يمكنك إجراء اختباراتك تلقائيًا في وقت Triger التالي مع أمر continue :
./awp continue examples/tests-recurring.json output/results.json
سيقوم هذا تلقائيًا بتشغيل كل اختبار على التردد المحدد. يمكن الاطلاع على مزيد من المعلومات أدناه في قسم "Run Recursed Tests" أدناه.
عنوان URL واحد: لاختبار عنوان URL واحد من خلال PageSpeedInsights:
./awp run url:https://www.thinkwithgoogle.com/ json:output/results.json
Pick Gatherer: لاختبار عنوان URL واحد مع شركة محددة مثل PagePeedInsights أو WebPagetest:
./awp run --gatherers=psi url:https://web.dev json:output/results.json
ملف CSV: لتشغيل الاختبارات المحددة في ملف CSV وكتابة النتائج إلى ملف JSON:
./awp run csv:examples/tests.csv json:output/results.json
PageSpeedInsights API: لتشغيل اختبار PagePeedInsights مع مفتاح API:
PSI_APIKEY=SAMPLE_KEY ./awp run examples/tests.json output/results.json
WebPageTest API: لتشغيل اختبارات WebPagetest:
WPT_APIKEY=SAMPLE_KEY ./awp run examples/tests-wpt.json output/results.json
تجاوز مقابل إلحاق: لتشغيل الاختبارات وتجاوز النتائج الحالية في ملف الإخراج
./awp run examples/tests.json output/results.json --override-results
./awp run examples/tests.json output/results.json
بدلاً من ذلك ، لتحديد استخدام موصل JSON لمسار Tests ومسار Results :
./awp run json:/examples/tests.json json:output/results.json
Tests ومسار Results : ./awp run csv:/examples/tests.csv csv:output/results.csv
Test واحدًا فقط مع عنوان URL محدد للتدقيق. لتشغيل التدقيق مع Test واحد فقط مع عنوان URL محدد: ./awp run url:https://example.com csv:output/results.csv
يرجى ملاحظة أن هذا الموصل يعمل فقط مع مسار Tests ، وليس لمسار Results .
يمكنك تشغيل ما يلي في أي وقت لطباعة استخدامات CLI:
./awp --help
لتشغيل الاختبارات ، يمكنك تشغيل أمر CLI التالي مع اختبارات معينة JSON ، مثل examples/tests.json ، والتي تحتوي على مجموعة من الاختبارات. يمكنك التحقق من examples/tests.json لهيكل بيانات الاختبارات.
./awp run examples/tests.json output/results.json
سيؤدي ذلك إلى إنشاء كائن (كائن) النتيجة في المسار المحدد إلى results.json .
بشكل افتراضي ، ستستخدم AWP JSON كموصل افتراضي لكل من اختبارات القراءة ونتائج الكتابة. بدلاً من ذلك ، يمكنك تحديد موصل مختلف بتنسيق <connector>:<path> .
على سبيل المثال ، قم بإجراء اختبارات محددة في CSV ونتائج الكتابة في JSON:
./awp run csv:examples/tests.csv json:output/results.csv
بالنسبة لبعض منصات التدقيق مثل WebPagetest ، قد يستغرق كل اختبار بضع دقائق لجلب النتائج الفعلية. لهذا النوع من عمليات التدقيق غير المتزامنة ، ستبقى كل نتيجة في حالة "المقدمة". ستحتاج إلى استرداد النتائج بشكل صريح لاحقًا.
قم بتشغيل ما يلي لاسترداد المقاييس النهائية للنتائج في results.json .
./awp retrieve examples/tests.json output/results.json
سيؤدي ذلك إلى جلب مقاييس لجميع منصات التدقيق وتحديث كائن النتيجة في output/results.json . يمكنك التحقق من examples/results.json .
إذا كنت ترغب في إعداد اختبارات متكررة ، فيمكنك تحديد الكائن recurring الذي يحتوي على frequency لهذا الاختبار.
./awp recurring examples/tests-recurring.json output/results.json
سيؤدي ذلك إلى إنشاء كائن النتيجة في results.json وتحديث وقت الزناد التالي إلى كائن الاختبار الأصلي في tests.json . على سبيل المثال ، سيبدو كائن الاختبار المحدث على ما يلي ، مع تحديث nextTriggerTimestamp .
{
"label": "web.dev",
"url": "https://web.dev",
"recurring": {
"frequency": "Daily",
"nextTriggerTimestamp": 1599692305567,
"activatedFrequency": "Daily"
},
"psi": {
"settings": {
"locale": "en-GB",
"strategy": "mobile"
}
}
}
سيتم تحديث nextTriggerTimestamp إلى اليوم التالي بناءً على الطابع الزمني السابق. هذا هو منع عمليات التشغيل المتكررة بنفس الاختبار ولضمان تنفيذ هذا الاختبار مرة واحدة فقط يوميًا.
في معظم نظام التشغيل الذي يشبه UNIX ، يمكنك إعداد وظيفة CRON لتشغيل AWP CLI بشكل دوري.
على سبيل المثال ، في MacOS ، يمكنك تشغيل الأوامر التالية لإعداد وظيفة cron يومية مع AWP:
# Edit the cronjob with a text editor.
EDITOR=nano crontab -e
أضف السطر التالي إلى Crontab للركض اليومي في الساعة 12:00 ظهراً. لاحظ أن هذا يعتمد على وقت النظام الذي يعمل فيه AWP.
0 12 * * * PSI_APIKEY=SAMPLE_KEY cd ~/workspace/awp && ./awp run examples/tests.json csv:output/results-recurring.csv
التمديد هو وحدة نمطية لمساعدة AWP على إجراء الاختبارات بعملية إضافية وحساب. على سبيل المثال ، فإن ملحق budgets قادر على إضافة ميزانيات الأداء وحساب الدلتا بين الأهداف ومقاييس النتائج.
للركض مع الامتدادات:
./awp run examples/tests.json output/results.json --extensions=budgets
قائمة الاختبارات هي ببساطة مجموعة من كائنات الاختبارات ، مثل اختبارات العينة أدناه. أو تحقق من src/examples/tests.js للحصول على مثال مفصل على قائمة الاختبارات.
[{
"label": "Test-1",
"url": "example1.com",
"webpagetest": {
...
}
}, {
"label": "Test-2",
"url": "example2.com",
"psi": {
...
}
}]
يحدد كل كائن Test أي عمليات تدقيق لتشغيلها عن طريق تحديد gatherers . على سبيل المثال ، يحتوي Test الأول على خاصية webpagetest التي تحدد تكوين تشغيل مراجعة WebPagetest. يحتوي Test الثاني على خاصية psi التي تحدد كيفية تشغيل PageSpeedInsights.
بعد إجراء الاختبارات ، يتم إنشاء قائمة Results كما يلي. تحتوي كل Result على مقاييسها المقابلة gatherers المحددة مسبقًا مثل WebPageTest و PageSpeedInsights. انظر المثال أدناه.
[{
"label": "Test-1",
"url": "example1.com",
"webpagetest": {
"metrics": {
FirstContentfulPaint: 900,
...
}
}
}, {
"label": "Test-2",
"url": "example2.com",
"psi": {
"metrics": {
FirstContentfulPaint: 900,
...
}
}
}]
قد يتطلب بعض conenctors أو المتجمعات متغيرًا بيئيًا أو أكثر ، مثل مفاتيح API أو حساب المسار إلى الخدمة. على سبيل المثال ، يتطلب الركض مع Crux API Gatherer مفتاح Crux API.
لتمرير المتغيرات البيئية في CLI ، قم بتشغيل الأمر مع الاستخدام المنتظم للبيئة Vars:
CRUX_APIKEY=<YOUR_KEY> ./awp run url:https://wev.dev/ json:output/results.json
AWP يدعم جامعي التدقيق التاليين. يرجى مراجعة الوثائق المقابلة للحصول على التفاصيل.
يقوم WebPagetest Gatherer بإجراء الاختبارات من خلال إما نقاط النهاية العامة لـ WebPagetest أو مثيل WebPagetest خاص مخصص.
راجع Docs/WebPageTest.md لمزيد من التفاصيل لاستخدام WebPagetest Gatherer.
يجري PageSpeed Insights Gatherer الاختبارات من خلال API PageSpeed Insights.
انظر Docs/PSI.MD لمزيد من التفاصيل لاستخدام PSI Gatherer.
يجمع Grux API Gatherer مقاييس الأداء من خلال API Chrome UX Report.
انظر Docs/Cruxapi.MD لمزيد من التفاصيل لاستخدام Grux API Gatherer.
يجمع Crux BigQuery Gatherer مقاييس الأداء من خلال تقرير Chrome UX مع مشروع Google BigQuery العام. يرجى noet أنك ستحتاج إلى إعداد مشروع Google Cloud من أجل الاستعلام عن جدول BigQuery العام.
انظر Docs/Cruxbigquery.md لمزيد من التفاصيل لاستخدام Grux API Gatherer.
تم تصميم AWP باستخدام وحدات ، بما في ذلك وحدات لتشغيل عمليات التدقيق باستخدام WebPageTest أو PagePeedInsights أو غيرها من الأدوات أو الوحدات النمطية لقراءة/كتابة بيانات من منصات البيانات مثل JSON أو GOOGLESSHERS أو خدمة سحابية.
في عرض رفيع المستوى ، هناك ثلاثة أنواع من الوحدات النمطية:
يستخدم محرك AWP هيكلين رئيسيين كائن JavaScript لتشغيل عمليات التدقيق وجمع المقاييس.
examples/tests.json لكائن اختبار حقيقي.examples/results.json لكائن نتيجة فعلي.من أجل التعامل مع أداة التدقيق غير المتزامنة مثل WebPageTest ، يقوم AWP بتحطيم دورة التدقيق إلى ثلاث خطوات من الإجراءات:
Tests وينشئ قائمة كائنات Results .Tests ، ويولد قائمة Results ، ويحدث NextRiggerTimestamp لكل Test متكرر. يكون هذا الإجراء مفيدًا عند الجري مع المهام الدورية أو الموقت مثل CRON Job.Retrieved .لإعداد الوحدات النمطية وتكويناتها ، يلزم تكوين AWP العام ككائن JavaScript.
يحتوي AWP Config على الخصائص المطلوبة التالية:
connector : اسم الموصل.helper : مساعد لموصل معين ، بما في ذلك معالج API ووظائف المساعدة الأخرى ، والتي سيتم استخدامها في المجمعات والتمديدات.dataSources : مجموعة من مصادر التدقيق ، مثل webpagetest أو psi . يحتاج كل من مصدر البيانات إلى وجود ملف تجميع مقابل في مجلد src/gatherers .extensions : مجموعة من الامتدادات. يحتاج كل ملحق إلى وجود ملف تمديد مقابل في src/extensions .خصائص اختيارية أخرى:
verbose : سواء لطباعة الرسائل المطول.debug : ما إذا كان لطباعة رسائل التصحيح. يأتي مثال التكوين التالي من examples/awp-config.js :
{
connector: 'JSON',
helper: 'Node',
dataSources: ['webpagetest'],
json: { // Config for JSON Connector.
tests: 'tests.json',
results: 'results.json',
},
extensions: [
'budgets',
],
budgets: { // Config for Budgets extension.
dataSource: 'webpagetest',
},
verbose: true,
debug: false,
}
باستخدام مثال التكوين أعلاه ، سيستخدم موصل JSON الذي يقرأ ويكتب الاختبارات والنتائج كملفات JSON. انظر examples/tests.json examples/results.json للحصول على أمثلة.
بالإضافة إلى الخصائص الأساسية ، هناك بعض الخصائص الإضافية التي تستخدمها الوحدات النمطية:
json كتكوين لـ JSONConnector .budgets كتكوين للميزانيةأمثلة على إنشاء مثيل جديد لـ AWP:
let awp = new AutoWebPerf({
connector: 'JSON',
helper: 'Node',
dataSources: ['webpagetest'],
extensions: extensions,
json: { // Config for JSON connector.
tests: argv['tests'],
results: argv['results'],
},
verbose: verbose,
debug: debug,
});
لتقديم جميع الاختبارات:
awp.run();
لإرسال اختبارات محددة باستخدام المرشحات: سيؤدي ذلك إلى تشغيل الاختبار الذي يحتوي على معرف = 1 ومحدد = خصائص حقيقية.
awp.run({
filters: ['id="1"', 'selected'],
});
لاسترداد جميع النتائج المعلقة ، التصفية مع الحالة! == "Retrieved".
awp.retrieve({
filters: ['status!=="Retrieved"'],
});
src/utils/pattern-filter.js مع المزيد من الأمثلة.لتشغيل الاختبارات المتكررة:
// This will run the actual audit and update the nextTriggerTimestamp.
awp.recurring();
لتشغيل الاختبارات مع امتدادات محددة:
// This will override the extension list defined in the awpConfig.
awp.run({
extensions: ['budgets']
})
يمتد فئة التجمع src/gatherers/gatherer.js ويتجاوز الطرق التالية:
constructor(config, apiHelper, options) :
config : التكوين المحدد في خاصية تحمل اسم هذا المجمع في تكوين AWP. تتطلب بعض أدوات التدقيق مثل WebPagetest أو PagePeedInsights مفاتيح API. يقع مفتاح API للمجمع في config.apiKey .options : إعدادات إضافية مثل verbose debug . run(test, options) :
test : كائن Test لتشغيل التدقيق هذا. ستكون البيانات المطلوبة لهذا المجمع (على سبيل المثال الإعدادات أو البيانات الوصفية) في مكان الإقامة باسم المجمع. على سبيل المثال ، ستكون بيانات WebPagetest في webpagetest من كائن Test هذا.options : إعدادات إضافية. retrieve(result, options) :
result : كائن Result لاسترداد المقاييس مع. ستكون البيانات المطلوبة لهذا المجمع في مكان الإقامة باسم المجمع. على سبيل المثال ، ستكون البيانات والمقاييس في webpagetest من كائن Result هذا.options : إعدادات إضافية مثل verbose debug . يمتد فئة الموصل src/connectors/connector.js ويتجاوز الطرق التالية:
constructor(config, apiHandler) :
config : التكوين المحدد في خاصية باسم هذا الموصل في تكوين AWP.apiHandler : مثيل معالج API المستخدمة في إجراء مكالمات API. getConfig() : طريقة إرجاع كائن التكوين الإضافي للموصل. يعتمد كائن التكوين هذا على المكان الذي يخزن فيه هذا الموصل إعداداته الإضافية بما في ذلك مفاتيح API للتجمعين. على سبيل المثال ، يستخدم JsonConnector tests.json ويقرأ إعدادات إضافية من خاصية config ، بما في ذلك مفاتيح API لكل جامعي.
getTestList(options) : طريقة إرجاع قائمة Tests كصفيف.
updateTestList(newTests, options) : طريقة تحديث قائمة Tests ، بالنظر إلى قائمة Tests الجديدة.
getResultList(options) : طريقة إرجاع قائمة Results كصفيف.
appendResultList(newResults, options) : طريقة إلحاق Results الجديدة إلى نهاية قائمة Results الحالية.
updateResultList(newResults, options) : طريقة تحديث Results الحالية في قائمة Results الحالية.
يمتد فئة التمديد src/extensions/extension.js ويتجاوز الطرق التالية:
constructor(config) :config : التكوين المحدد في خاصية باسم هذا الامتداد في تكوين AWP.beforeRun(context) : الطريقة قبل تنفيذ خطوة التشغيل Test .context.test : كائن Test المقابل.afterRun(context) : الطريقة بعد تنفيذ خطوة التشغيل Test .context.test : كائن Test المقابل.context.result : كائن Result المقابلة.beforeAllRuns(context) : الطريقة قبل تنفيذ خطوة التشغيل .context.tests : جميع كائنات Test في هذا التشغيل .afterAllRuns(context) : الطريقة بعد تنفيذ خطوة التشغيل .context.tests : جميع كائنات Test في هذا التشغيل .context.results : جميع كائنات Result في هذا التشغيل .beforeRetrieve(context) : الطريقة قبل تنفيذ خطوة استرداد للحصول Result .context.result : كائن Result المقابلة.afterRetrieve(context) : الطريقة بعد تنفيذ خطوة استرداد لتحقيق Result .context.result : كائن Result المقابلة.beforeAllRetrieves(context) : الطريقة قبل تنفيذ خطوة استرداد .context.result : كائن Result المقابلة.afterAllRetrieves(context) : الطريقة بعد تنفيذ خطوة استرداد .context.result : كائن Result المقابلة. يحتوي كائن Test قياسي على الخصائص التالية:
(يمكنك الرجوع إلى examples/tests.json على سبيل المثال.)
selected : ما إذا كان أداء التشغيل لهذا Test .label : اسم هذا Test .url : عنوان URL للمراجعة.recurring : إعدادات للتدقيق المتكرر.frequency : سلسلة التردد المحددة في src/common/frequency.js . على سبيل المثال "يوميًا" أو "أسبوعيًا" أو "شهريًا".ستكون الإعدادات الخاصة بالتجمع في ممتلكاتهم الخاصة مع اسم المجمع في القضية السفلية. على سبيل المثال ، ستكون إعدادات WebPagetests هي:
webpagetestsettings : إعداد الكائن يحتوي على موقع تدقيق ، اتصال ، إلخ.metadata : يحتوي كائن بيانات التعريف على معرف WebPagetests ، URL JSON ، إلخ. يحتوي كائن Result قياسي على الخصائص التالية:
selected : ما إذا كان لإجراء استرداد لهذه Result .id : معرف فريد من نوعه تلقائيًا لهذه Result .type : مراجعة Single أو Recurring .status : Submitted ، Retrieved أو Error . الرجوع إلى src/common/status.js للحصول على التفاصيل.label : تسمية السلسلة لهذه Result . ترث هذه التسمية من كائن Test الأصلي.url : عنوان URL المدقق.createdTimestamp : عند إنشاء هذه Result .modifiedTimestamp : عندما يتم تعديل هذه Result آخر مرة. مطلوب جميع الأسماء المترية المستخدمة في AWP لمتابعة الأسماء ، حساسة للحالة. انظر القائمة الكاملة للمقاييس الموحدة في src/common/metrics.js
مقاييس التوقيت
TimeToFirstByteFirstPaintFirstMeaningfulPaintFirstContentfulPaintVisualCompleteSpeedIndexDOMContentLoadedLoadEventTimeToInteractiveTotalBlockingTimeFirstCPUIdleFirstInputDelayLargestContentfulPaintحجم المورد
HTMLJavascriptCSSFontsImagesVideosعدد الموارد
DOMElementsConnectionsRequestsدرجات الموارد
PerformanceProgressiveWebApp توجد جميع رموز المصدر للوظائف الرئيسية في مجلد src . يتم تنظيم الملفات في المجلدات الفرعية التالية:
common : الفئات والتعاريف الشائعة ، مثل الحالة ، والتردد ، والمقاييس ، إلخ.connectors : فئات الموصل.extensions : فصول التمديد.gatherers : دروس المتجهات.utils : المرافق والأدوات. قم بتشغيل الأوامر التالية لتشغيل اختبار الوحدة:
npm test
لتشغيل مواصفات الاختبار الفردية ، يمكنك تثبيت وحدة NPM Jest على جهازك المحلي:
npm install -g jest
jest test/some-module.test.js
يعتمد اختبار الوحدة على إطار اختبار وحدة Jest. توجد جميع اختبارات الوحدة في ./test src
