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

Milica Mihajlija

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

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

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

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

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

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

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

2. النشر على Firebase

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

النشر على Firebase

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

npm install -g firebase-tools

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

firebase login

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

firebase init

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

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

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

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

firebase deploy

في غضون ثوانٍ معدودة، سيكون لديك تطبيق متوفّر على Google Play.

3- إعداد Travis

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

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

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

لبدء عملية التكامل المستمر، عليك تنفيذ أمرَين:

1. أن يكون لديك ملف .travis.yml في الدليل الجذر
2. لبدء الإنشاء عن طريق إجراء ضغطة سريعة منتظمة،

يحتوي مستودع 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

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

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

تُعد الموافقة على هذه الطلبات عملية يدوية؛ لذا لا تحدث دائمًا بشكل فوري. قبل بدء الاختبار، تأكَّد من أنّ 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 PR" في سجلّ Travis.

لبدء اختبار Lighthouse Bot، اتّبِع الخطوات التالية:

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

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

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

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

هل تتذكر كيف تختبر Lighthouse 5 فئات مختلفة؟ يمكنك فرض النتائج على أيّ من المواقع التي تم وضع علامة عليها بأنّها بوتات Lighthouse:

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