استخدام برنامج تتبُّع Lighthouse لضبط ميزانية للأداء

Milica Mihajlija

لقد بذلت جهدًا كبيرًا لتحقيق السرعة، فاحرص الآن على البقاء سريعًا من خلال التشغيل الآلي. لاختبار الأداء باستخدام Lighthouse Bot.

يقيّم Lighthouse تطبيقك في 5 فئات، وأحد هذه الفئات هو الأداء. بينما يمكنك أن تحاول أن تتذكر أن مراقبة تغييرات الأداء باستخدام DevTools أو واجهة سطر الأوامر Lighthouse كل عندما تعدّل التعليمات البرمجية، لن تضطر إلى القيام بذلك. يمكن للأدوات أن تُنجز المهام المملة بدلاً منك. Travis CI هي خدمة رائعة تُجري تلقائيًا اختبارات لتطبيقك في السحابة الإلكترونية في كل مرة تُرسل فيها رمزًا جديدًا.

يمكن دمج Lighthouse Bot مع Travis CI، وتضمن ميزة ميزانية الأداء الخاصة بها أنك لن تقوم بخفض الأداء دون قصد دون أن تلاحظ ذلك. يمكنك ضبط المستودع كي لا يسمح بدمج طلبات الربط إذا انخفضت نتائج Lighthouse عن الحدّ الأدنى الذي حدّدته (مثلاً < 96/100).

عدم اجتياز عمليات التحقّق من برنامج Lighthouse Bot على GitHub
يتحقّق Lighthouse Bot على GitHub.

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

1. ضبط إعدادات الجهاز

يساعدك هذا التطبيق البسيط في فرز ثلاثة أرقام.

استنساخ المثال من GitHub، وتأكد من إضافته كمستودع على حسابك في جيت هب.

2. النشر على Firebase

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

النشر على Firebase

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

npm install -g firebase-tools

لمنح إذن الوصول إلى Firebase CLI، نفِّذ ما يلي:

firebase login

الآن عليك بدء المشروع:

firebase init

ستطرح عليك وحدة التحكّم مجموعة من الأسئلة أثناء عملية الإعداد:

  • عندما يُطلب منك تحديد الميزات، اختَر "الاستضافة".
  • بالنسبة إلى مشروع Firebase التلقائي، اختَر المشروع الذي أنشأته في وحدة تحكّم Firebase.
  • اكتب كلمة "علني" كدليل عام.
  • اكتب "N". (لا) إلى الضبط كتطبيق من صفحة واحدة.

تؤدي هذه العملية إلى إنشاء ملف إعدادات firebase.json في الدليل الجذر لملف دليل المشروع.

تهانينا، أصبحت جاهزًا للنشر. تنفيذ:

firebase deploy

وخلال جزء من الثانية، سيصبح لديك تطبيق نشط.

3- إعداد تطبيق Travis

عليك تسجيل حساب على Travis ثم فعالةتكامل تطبيقات GitHub ضمن قسم "الإعدادات" في ملفك الشخصي.

تكامل تطبيقات GitHub على Travis CI

بعد إنشاء حساب

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

لبدء عملية الدمج المستمر، تحتاج إلى أمرين:

  1. لتضمين ملف .travis.yml في الدليل الجذر
  2. لبدء عملية إنشاء من خلال إجراء عملية دفع عادية قديمة من خلال git

يتضمّن مستودع lighthouse-bot-starter ملف YAML بتنسيق .travis.yml:

language: node_js
node_js:
  - "8.1.3"
install:
  - npm install
before_script:
  - npm install -g firebase-tools
script:
  - webpack

يطلب ملف YAML من Travis تثبيت جميع التبعيات وإنشاء تطبيقك. حان الآن دورك في دفع مثال التطبيق إلى مستودع GitHub الخاص بك. شغِّل الأمر التالي إذا لم يسبق لك إجراء ذلك:

git push origin main

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

4. إعداد عملية نشر Firebase تلقائيًا باستخدام Travis

في الخطوة 2، سجّلت الدخول إلى حسابك على Firebase ونشرت التطبيق من سطر العبارة باستخدام firebase deploy. ولكي يتمكّن "ترافيس" من نشر التطبيق لمنصة Firebase، يجب تفويضه. كيف تفعل ذلك؟ باستخدام رمز Firebase المميز. 🗝️🔥

تفويض Firebase

لإنشاء الرمز المميّز، شغِّل الأمر التالي:

firebase login:ci

سيؤدي ذلك إلى فتح علامة تبويب جديدة في نافذة متصفّح حتى تتمكّن Firebase من إثبات هويتك. بعد ذلك، يُرجى الرجوع إلى وحدة التحكّم للاطّلاع على الرمز المميّز الذي تم إنشاؤه حديثًا. انسخ هذا الرمز والصِقه في Travis.

في لوحة بيانات Travis الخاصة بمشروعك، انتقِل إلى خيارات إضافية > الإعدادات > متغيّرات البيئة.

ألصِق الرمز المميّز في حقل القيمة، وامنح المتغيّر الاسم FIREBASE_TOKEN، ثم أضِفه.

إضافة عملية النشر إلى إعدادات Travis

ستحتاج إلى الأسطر التالية لتطلب من Travis نشر التطبيق بعد كل عملية إنشاء ناجحة. أضِفها إلى نهاية ملف .travis.yml. 🔚

after_success:
  - firebase deploy --token $FIREBASE_TOKEN --non-interactive

ادفع هذا التغيير إلى GitHub وانتظِر عملية النشر المبرمَجة الأولى. إذا اطّلعت على سجلّ Travis، من المفترض أن تظهر قريبًا رسالة ✔️ اكتمال عملية النشر.

والآن، كلما أجريت تغييرات في تطبيقك، سيتم نشرها تلقائيًا في Firebase.

5- إعداد Lighthouse Bot

يُطلعك "روبوت Lighthouse الودي" على نتائج Lighthouse لتطبيقك. ما عليك سوى إرسال دعوة إلى مستودعك.

على GitHub، انتقل إلى إعدادات مشروعك وأضف "منارةbot" كمتعاون (الإعدادات>المتعاونون):

حالة المتعاونين لبرنامج التتبُّع Lighthouse

إنّ الموافقة على هذه الطلبات هي عملية يدوية، لذا لا تتم دائمًا بشكل فوري. قبل بدء الاختبار، تأكَّد من أنّ lighthousebot قد وافق على حالة المتعاون. في الوقت الحالي، عليك أيضًا إضافة مفتاح آخر إلىvariabels بيئة مشروعك على Travis. اترك بريدك الإلكتروني هنا، وستتلقّى مفتاحًا لبرنامج Lighthouse Bot في بريدك الوارد. 📬

في Travis، أضِف هذا المفتاح كمتغيّر بيئة واسمه LIGHTHOUSE_API_KEY:

إضافة Lighthouse Bot إلى مشروعك

بعد ذلك، أضِف Lighthouse Bot إلى مشروعك من خلال تنفيذ ما يلي:

npm i --save-dev https://github.com/ebidel/lighthousebot

وإضافة هذا البت إلى package.json:

"scripts": {
  "lh": "lighthousebot"
}

إضافة Lighthouse Bot إلى إعدادات Travis

في الخدعة الأخيرة، اختبِر أداء التطبيق بعد كل عملية سحب. الطلب.

في .travis.yml، أضِف خطوة أخرى في after_success:

after_success:
  - firebase deploy --token $FIREBASE_TOKEN --non-interactive
  - npm run lh -- https://staging.example.com

سيتم إجراء تدقيق Lighthouse على عنوان URL المحدّد، لذا استبدل https://staging.example.com باستخدام عنوان URL لتطبيقك (هذا هو your-app-123.firebaseapp.com).

رفع معاييرك العالية وتعديل الإعدادات كي لا تقبل أي تغييرات التطبيق الذي يحقق نتيجة أداء أقل من 95:

- npm run lh -- --perf=95 https://staging.example.com

قدِّم طلب سحب لبدء اختبار Lighthouse Bot على Travis.

سيختبر Lighthouse Bot طلبات سحب الرمز البرمجي فقط، لذا إذا دفعت الرمز البرمجي إلى الفرع الرئيسي الآن، ستظهر لك الرسالة "لا يمكن تشغيل هذا النص البرمجي إلا على طلبات Travis PR" في سجلّ Travis.

لبدء اختبار Lighthouse Bot:

  1. الدفع لفرع جديد
  2. دفع التغييرات إلى GitHub
  3. تقديم طلب سحب

يُرجى الانتظار في صفحة طلب سحب الرمز البرمجي إلى أن يبدأ برنامج Lighthouse Bot بالغناء. 🎤

نتائج اجتياز اختبار Lighthouse

اجتياز عمليات التحقّق في GitHub

نتيجة الأداء رائعة، والتطبيق أقل من الميزانية، وانتهت عملية التحقّق.

المزيد من خيارات Lighthouse

هل تتذكّر كيفية اختبار أداة Lighthouse لـ 5 فئات مختلفة؟ يمكنك فرض النتائج أي من التطبيقات التي تحمل علامات Lighthouse Bot:

--perf  # performance
--pwa   # progressive web app score
--a11y  # accessibility score
--bp    # best practices score
--seo   # SEO score

مثال:

npm run lh -- --perf=93 --seo=100 https://staging.example.com

ولن يجتاز ذلك PR في حال انخفاض نتيجة الأداء إلى أقل من 93 أو مقدِّم خدمة تحسين محرّكات البحث. تنخفض النتيجة إلى أقل من 100.

يمكنك أيضًا اختيار عدم تلقّي تعليقات روبوت Lighthouse من خلال --no-comment. الخيار.