परफ़ॉर्मेंस बजट सेट करने के लिए, Lighthouse बॉट का इस्तेमाल करना

Milica Mihajlija

तेज़ी से आगे बढ़ने के लिए आपने कड़ी मेहनत की है. अब ऑटोमेट करके तेज़ी से दौड़ना पक्का करें Lighthouse Bot की मदद से परफ़ॉर्मेंस की जांच की जा सकती है.

Lighthouse आपके ऐप्लिकेशन को पांच कैटगरी में ग्रेड देता है. इनमें से एक कैटगरी परफ़ॉर्मेंस है. जबकि आप इन्हें याद रखने की कोशिश कर सकते हैं DevTools की मदद से परफ़ॉर्मेंस में हुए बदलावों पर नज़र रखें या Lighthouse CLI आपको कोड संपादित करने की ज़रूरत नहीं है. टूल आपके लिए मुश्किल काम कर सकते हैं. Travis CI एक बेहतरीन सेवा है. यह हर बार नया कोड पुश करने पर, क्लाउड में आपके ऐप्लिकेशन की जांच अपने-आप करती है.

Lighthouse Bot को Travis CI के साथ इंटिग्रेट किया गया है और इसकी परफ़ॉर्मेंस बजट सुविधा पक्का करती है ध्यान दें कि आप गलती से परफ़ॉर्मेंस को डाउनग्रेड नहीं करेंगे. आप डेटा स्टोर करने की जगह को कॉन्फ़िगर करें ताकि लाइटहाउस का स्कोर इससे कम होने पर भी, पुल-अनुरोधों को मर्ज नहीं किया जा सकेगा तय किया गया थ्रेशोल्ड (उदाहरण के लिए, < 96/100).

हालांकि, localhost पर परफ़ॉर्मेंस की जांच की जा सकती है, लेकिन लाइव सर्वर पर आपकी साइट अक्सर अलग तरह से परफ़ॉर्म करती है. ज़्यादा असली जानकारी पाने के लिए, अपनी साइट को स्टेजिंग सर्वर पर डिप्लॉय करें. किसी भी होस्टिंग सेवा का इस्तेमाल किया जा सकता है; यह गाइड Firebase होस्टिंग स्पिन के लिए सही है.

1. सेटअप

इस आसान ऐप्लिकेशन से, तीन संख्याओं को क्रम से लगाया जा सकता है.

GitHub से उदाहरण का क्लोन बनाएं, और इसे अपने GitHub खाते में रिपॉज़िटरी के तौर पर जोड़ना न भूलें.

2. Firebase पर डिप्लॉय करना

शुरू करने के लिए, आपके पास Firebase खाता होना चाहिए. अच्छी तरह से ध्यान देने के बाद, Firebase कंसोल में नया प्रोजेक्ट बनाना "प्रोजेक्ट जोड़ें" पर क्लिक करके:

Firebase में डिप्लॉयमेंट

ऐप्लिकेशन को डिप्लॉय करने के लिए, आपके पास Firebase CLI होना चाहिए. भले ही, आपने इसे पहले से ही इंस्टॉल कर लिया हो, लेकिन इस निर्देश का इस्तेमाल करके, सीएलआई को नए वर्शन पर अपडेट करना अच्छा होता है:

npm install -g firebase-tools

Firebase CLI को अनुमति देने के लिए, यह चलाएं:

firebase login

अब प्रोजेक्ट को शुरू करें:

firebase init

सेटअप के दौरान, कंसोल आपसे कई सवाल पूछेगा:

• सुविधाएं चुनने के लिए कहा जाने पर, "होस्टिंग" चुनें.
• डिफ़ॉल्ट Firebase प्रोजेक्ट के लिए, वह प्रोजेक्ट चुनें जिसमें आपने बनाया है Firebase कंसोल.
• अपनी सार्वजनिक डायरेक्ट्री के तौर पर "सार्वजनिक" टाइप करें.
• "N" लिखें (नहीं) एक पेज वाले ऐप्लिकेशन के तौर पर कॉन्फ़िगर करने के लिए.

इस प्रोसेस से, आपकी प्रोजेक्ट डायरेक्ट्री की रूट में firebase.json कॉन्फ़िगरेशन फ़ाइल बनती है.

बधाई हो, आप डिप्लॉय करने के लिए तैयार हैं! चलाएं:

firebase deploy

कुछ ही सेकंड में, आपके पास लाइव ऐप्लिकेशन होगा.

3. Travis सेट अप किया जा रहा है

आपको Travis पर एक खाता रजिस्टर करना होगा और फिर अपनी प्रोफ़ाइल के सेटिंग सेक्शन में जाकर, GitHub Apps इंटिग्रेशन को चालू करें.

खाता बन जाने के बाद

अपनी प्रोफ़ाइल में जाकर सेटिंग पर जाएं. इसके बाद, 'खाता सिंक करें' बटन पर क्लिक करें. साथ ही, पक्का करें कि आपके प्रोजेक्ट का रिपॉज़िटरी, Travis पर मौजूद हो.

इंटिग्रेशन की प्रोसेस को लगातार शुरू करने के लिए, आपको दो चीज़ों की ज़रूरत होगी:

1. .travis.yml फ़ाइल को रूट डायरेक्ट्री में शामिल करने के लिए
2. सामान्य git push करके, बिल्ड को ट्रिगर करने के लिए

lighthouse-bot-starter repo में पहले से ही .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 को सभी डिपेंडेंसी इंस्टॉल करने और आपके ऐप्लिकेशन को बनाने के लिए कहती है. अब आपको उदाहरण के तौर पर दिए गए ऐप्लिकेशन को अपनी GitHub रिपॉज़िटरी में पुश करना है. अगर आपने अब तक ऐसा नहीं किया है, तो यह कमांड चलाएं:

git push origin main

अपने प्रोजेक्ट का Travis देखने के लिए Travis में सेटिंग के अंतर्गत अपने रेपो पर क्लिक करें डैशबोर्ड पर जाएं. अगर सब कुछ ठीक है, तो आपको कुछ ही मिनटों में अपना बिल्ड पीले से हरे रंग में बदला हुआ दिखेगा. 🎉

4. Travis की मदद से Firebase डिप्लॉयमेंट को ऑटोमेट करना

दूसरे चरण में, आपने अपने Firebase खाते में लॉग इन करके, ऐप्लिकेशन को कमांड लाइन जोड़ें, जिस पर firebase deploy लिखा होगा. Travis को आपके ऐप्लिकेशन को Firebase पर डिप्लॉय करने के लिए, आपको अनुमति देनी होगी. आपको ऐसा कैसे करना है? Firebase टोकन के साथ. 🗝️🔥

Firebase को अनुमति देना

टोकन जनरेट करने के लिए, यह कमांड चलाएं:

firebase login:ci

यह ब्राउज़र विंडो में एक नया टैब खोलेगा, ताकि Firebase आपकी पुष्टि कर सके. इसके बाद, कंसोल पर वापस जाएं और आपको अपना नया टोकन दिखेगा. इसे कॉपी करें और ट्रेविस पर वापस जाएं.

अपने प्रोजेक्ट के Travis डैशबोर्ड में, ज़्यादा विकल्प > सेटिंग > एनवायरमेंट वैरिएबल पर जाएं.

टोकन को वैल्यू फ़ील्ड में चिपकाएं, वैरिएबल को FIREBASE_TOKEN नाम दें, और उसे जोड़ें.

अपने Travis सेटअप में डिप्लॉयमेंट जोड़ें

हर सफल बिल्ड के बाद ट्रैविस को ऐप्लिकेशन डिप्लॉय करने के लिए कहने के लिए, आपको इन लाइनों की ज़रूरत होगी. उन्हें .travis.yml फ़ाइल के आखिर में जोड़ें. 🔚

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

इस बदलाव को GitHub पर पुश करें और अपने-आप डिप्लॉय होने की सुविधा के पहली बार लागू होने का इंतज़ार करें. Travis लॉग में जाकर, आपको जल्द ही यह मैसेज दिखेगा: ✔️ डिप्लॉय हो गया!

अब जब भी अपने ऐप्लिकेशन में बदलाव किए जाएंगे, तो वे Firebase में अपने-आप डिप्लॉय हो जाएंगे.

5. Lighthouse Bot सेट अप करना

फ़्रेंडली लाइटहाउस बॉट, आपको ऐप्लिकेशन के लाइटहाउस स्कोर के बारे में अपडेट देता है. इसके लिए आपको बस न्योता भेजना होगा.

GitHub पर, अपने प्रोजेक्ट की सेटिंग में जाएं और "lighthousebot" को सहयोगी के तौर पर जोड़ें (सेटिंग>सहयोगी):

इन अनुरोधों को स्वीकार करने की प्रोसेस मैन्युअल होती है. इसलिए, ये अनुरोध हमेशा तुरंत स्वीकार नहीं किए जाते. जांच शुरू करने से पहले, पक्का करें कि lighthousebot ने सहयोगी के तौर पर अपनी स्थिति की पुष्टि कर ली हो. इस दौरान, आपको Travis पर अपने प्रोजेक्ट के एनवायरमेंट वैरिएबल में एक और कुंजी भी जोड़नी होगी. अपना ईमेल छोड़ें यहां, और आपको अपने इनबॉक्स में Lighthouse Bot कुंजी मिलेगी. 📬

ट्रैविस पर, इस कुंजी को एनवायरमेंट वैरिएबल के रूप में जोड़ें और इसे LIGHTHOUSE_API_KEY नाम दें:

अपने प्रोजेक्ट में लाइटहाउस बॉट जोड़ें

इसके बाद, अपने प्रोजेक्ट में Lighthouse Bot जोड़ने के लिए, यह तरीका अपनाएं:

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

साथ ही, package.json में यह जानकारी जोड़ें:

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

अपने Travis कॉन्फ़िगरेशन में लाइटहाउस बॉट को जोड़ें

आखिरी तरकीब के तौर पर, हर पुल अनुरोध के बाद ऐप्लिकेशन की परफ़ॉर्मेंस की जांच करें!

.travis.yml में, after_success में एक और चरण जोड़ें:

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

यह दिए गए यूआरएल पर लाइटहाउस ऑडिट चलाएगा, इसलिए आपके ऐप्लिकेशन के यूआरएल के साथ https://staging.example.com (जो आपका-app-123.firebaseapp.com है).

अपने स्टैंडर्ड अच्छी तरह सेट करें और सेटअप में बदलाव करें, ताकि आप उसमें कोई भी बदलाव स्वीकार न करें ऐसे ऐप्लिकेशन पर जिसकी परफ़ॉर्मेंस का स्कोर 95 से कम हो जाता है:

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

Travis पर लाइटहाउस बॉट टेस्ट को ट्रिगर करने के लिए, पुश अनुरोध करना

Lighthouse Bot सिर्फ़ पुश अनुरोधों की जांच करेगा. इसलिए, अगर आपने अब मुख्य शाखा पर पुश किया है, तो आपको अपने ट्रैविस लॉग में सिर्फ़ "यह स्क्रिप्ट सिर्फ़ ट्रैविस पीआर अनुरोधों पर चलाई जा सकती है" दिखेगा.

लाइटहाउस बॉट टेस्ट को ट्रिगर करने के लिए:

1. नई ब्रांच देखें
2. इसे GitHub पर पुश करना
3. पुल का अनुरोध करें

पुल अनुरोध वाले पेज पर इंतज़ार करें और लाइटहाउस बॉट के गाने का इंतज़ार करें! 🎤

परफ़ॉर्मेंस का स्कोर बेहतरीन है, ऐप्लिकेशन का बजट कम है, और टेस्ट की समयसीमा खत्म हो गई है!

लाइटहाउस के अन्य विकल्प

क्या आपको याद है कि लाइटहाउस पांच अलग-अलग कैटगरी का टेस्ट कैसे करता है? 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 से कम हो जाता है, तो प्रॉडक्ट को प्रमोशन नहीं मिलेगा.

आपके पास यह चुनने का विकल्प भी है कि --no-comment के साथ लाइटहाउस बॉट की टिप्पणियां न मिलें का विकल्प शामिल है.