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

Milica Mihajlija

لقد بذلت جهدًا كبيرًا لتحسين سرعة أدائك، ولكن تأكّد الآن من سرعتك من خلال برمجة اختبار الأداء باستخدام برنامج Lighthouse Bot.

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

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

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

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

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

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

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

2. نشر على Firebase

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

النشر في Firebase

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

npm install -g firebase-tools

لتفويض واجهة سطر الأوامر في Firebase، شغِّل:

firebase login

الآن قم بتهيئة المشروع:

firebase init

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

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

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

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

firebase deploy

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

3- إعداد Travis

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

دمج GitHub Apps على Travis CI

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

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

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

  1. توفُّر ملف .travis.yml في الدليل الجذري
  2. لتشغيل إصدار من خلال إجراء دفع git القديم بشكل منتظم

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

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

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

git push origin main

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

4. نشر Firebase بشكل تلقائي باستخدام Travis

في الخطوة الثانية، سجّلت الدخول إلى حسابك على Firebase ونشرت التطبيق من سطر الأوامر باستخدام firebase deploy. حتى يتسنى لـ Travis نشر تطبيقك في 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

يُطلعك برنامج Lighthouse Bot على نتائج Lighthouse الخاصة بتطبيقك. نحتاج فقط إلى دعوة إلى المستودع الخاص بك.

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

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

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

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

إضافة برنامج تتبُّع Lighthouse إلى مشروعك

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

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

وأضف هذا العنصر إلى package.json:

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

إضافة برنامج تتبُّع Lighthouse إلى إعدادات 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"، اتّبِع الخطوات التالية:

  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 Bot باستخدام خيار --no-comment.