لقد بذلت جهدًا كبيرًا لتحسين سرعة أدائك، ولكن تأكّد الآن من سرعتك من خلال برمجة اختبار الأداء باستخدام برنامج Lighthouse Bot.
تقيّم Lighthouse تطبيقك في 5 فئات، وإحدى هذه الفئات هي الأداء. يمكنك محاولة تتبُّع التغييرات في الأداء باستخدام DevTools أو واجهة سطر الأوامر في Lighthouse في كل مرة تعدّل فيها الرمز، ولكن لا يجب تنفيذ ذلك. يمكن أن تقوم الأدوات بالمهام المملة نيابةً عنك. 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، شغِّل:
firebase login
الآن قم بتهيئة المشروع:
firebase init
ستطرح عليك وحدة التحكّم مجموعة من الأسئلة أثناء عملية الإعداد:
- عندما يُطلب منك تحديد الميزات، اختر "استضافة".
- بالنسبة إلى مشروع Firebase التلقائي، اختَر المشروع الذي أنشأته في وحدة تحكُّم Firebase.
- اكتب "public" كدليل عام.
- اكتب "N" (لا) للضبط كتطبيق من صفحة واحدة.
تنشئ هذه العملية ملف إعداد firebase.json
في جذر دليل المشروع.
تهانينا، لقد أصبحت جاهزًا للنشر! التنفيذ:
firebase deploy
سيكون لديك تطبيق مباشر خلال جزء من الثانية.
3- إعداد Travis
ستحتاج إلى تسجيل حساب على Travis ثم تفعيل دمج GitHub Apps ضمن قسم "الإعدادات" في ملفك الشخصي.
بعد إنشاء حساب
انتقل إلى الإعدادات ضمن ملفك الشخصي، واضغط على الزر "مزامنة الحساب" وتأكد من إدراج مستودع مشروعك على Travis.
لبدء عملية الدمج المستمر، ستحتاج إلى أمرَين:
- توفُّر ملف
.travis.yml
في الدليل الجذري - لتشغيل إصدار من خلال إجراء دفع 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" كمتعاون (الإعدادات>المتعاونون):
الموافقة على هذه الطلبات هي عملية يدوية لذا لا تحدث على الفور دائمًا. قبل بدء الاختبار، تأكَّد من أنّ برنامج منارة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"، اتّبِع الخطوات التالية:
- الدفع لفرع جديد
- دفعه إلى GitHub
- تقديم طلب سحب
يُرجى الانتظار على صفحة طلب السحب هذه والانتظار إلى أن يغنّي Lighthouse Bot. 🎤
نتيجة الأداء رائعة، والتطبيق أقل من الميزانية، وقد انقضى التحقق.
المزيد من خيارات 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
.