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

Milica Mihajlija

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

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

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

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

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

1. الإعداد

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

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

2. النشر على Firebase

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

النشر على Firebase

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

npm install -g firebase-tools

للسماح باستخدام Firebase CLI، نفِّذوا ما يلي:

firebase login

الآن، ابدأوا المشروع:

firebase init

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

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

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

تهانينا، أصبحتم مستعدين للنشر. نفِّذوا ما يلي:

firebase deploy

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

3. إعداد Travis

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

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

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

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

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

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

يحتوي مستودع 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. لكي يتمكّن 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 Bot

يقدّم لكم Lighthouse Bot الودود آخر الأخبار عن نتائج Lighthouse لتطبيقكم. ما عليكم سوى دعوته إلى مستودعكم.

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

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

تتم الموافقة على هذه الطلبات يدويًا، لذا لا تتم دائمًا على الفور. قبل بدء الاختبار، تأكّدوا من أنّ lighthousebot قد وافق على حالة المساهم. في هذه الأثناء، عليكم أيضًا إضافة مفتاح آخر إلى متغيّرات البيئة الخاصة بمشروعكم على 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" في سجلّ 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

سيؤدي ذلك إلى فشل طلب السحب إذا انخفضت نتيجة الأداء عن 93 أو انخفضت نتيجة تحسين محركات البحث عن 100.

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