लाइटहाउस के बारे में जानकारी

Lighthouse एक ओपन सोर्स और अपने-आप काम करने वाला टूल है. यह वेब पेजों की क्वालिटी को बेहतर बनाने में आपकी मदद करता है. इसे किसी भी वेब पेज पर चलाया जा सकता है. भले ही, वह सार्वजनिक हो या पुष्टि की ज़रूरत हो. इसमें परफ़ॉर्मेंस, सुलभता, प्रोग्रेसिव वेब ऐप्लिकेशन, एसईओ वगैरह के ऑडिट होते हैं.

लाइटहाउस को Chrome DevTools में, कमांड लाइन से या Node मॉड्यूल के तौर पर चलाया जा सकता है. लाइटहाउस को ऑडिट के लिए यूआरएल दें. यह पेज के अलग-अलग ऑडिट चलाता है. इसके बाद, यह रिपोर्ट जनरेट करता है कि पेज की परफ़ॉर्मेंस कैसी है. फ़ेल हो चुके ऑडिट का इस्तेमाल इंडिकेटर के तौर पर करें और देखें कि पेज को कैसे बेहतर बनाएं. हर ऑडिट में एक रेफ़रंस होता है, जिससे पता चलता है कि ऑडिट क्यों अहम है और उसे ठीक कैसे किया जा सकता है.

अपनी साइटों पर रिग्रेशन को रोकने के लिए, Lighthouse CI का भी इस्तेमाल किया जा सकता है.

अपनी प्रोफ़ाइल बनाना शुरू करें

वह लाइटहाउस वर्कफ़्लो चुनें जो आपके हिसाब से सबसे सही हो:

  • Chrome DevTools में. ऐसे ऑडिट पेज जिन्हें प्रमाणीकरण की ज़रूरत होती है और सीधे ब्राउज़र से आपकी रिपोर्ट को उपयोगकर्ता के लिए आसान फ़ॉर्मैट में पढ़ें.
  • कमांड लाइन से. शेल स्क्रिप्ट की मदद से, Lighthouse की जांच अपने-आप चलने की सुविधा चालू करें.
  • नोड मॉड्यूल के तौर पर. लाइटहाउस को अपने कंटिन्यूअस इंटिग्रेशन सिस्टम के साथ इंटिग्रेट करें.
  • किसी वेब यूआई से. लाइटहाउस को चलाएं और रिपोर्ट से लिंक करें. इसके लिए, इंस्टॉल करने की ज़रूरत नहीं होती.

Chrome DevTools में लाइटहाउस चलाएं

Chrome DevTools में, Lighthouse का अपना पैनल होता है. रिपोर्ट चलाने के लिए:

  1. डेस्कटॉप के लिए Google Chrome डाउनलोड करें.
  2. Chrome खोलें और उस यूआरएल पर जाएं जिसका ऑडिट करना है. आपके पास वेब पर किसी भी यूआरएल को ऑडिट करने का विकल्प है.
  3. Chrome DevTools खोलें.

  4. Lighthouse टैब पर क्लिक करें.

    बाईं ओर उस वेब पेज का व्यूपोर्ट है जिसे ऑडिट करना है. दाईं ओर, Chrome DevTools का Lighthouse पैनल है.

  5. पेज लोड का विश्लेषण करें पर क्लिक करें. DevTools में, आपको ऑडिट कैटगरी की सूची दिखती है. उन सभी को चालू रहने दें.

  6. ऑडिट चलाएं पर क्लिक करें. लाइटहाउस आपको 30 से 60 सेकंड के बाद, पेज पर एक रिपोर्ट देता है.

    Chrome DevTools में एक लाइटहाउस रिपोर्ट.

नोड कमांड लाइन टूल को इंस्टॉल करें और चलाएं

Node मॉड्यूल इंस्टॉल करने के लिए:

  1. डेस्कटॉप के लिए Google Chrome डाउनलोड करें.
  2. Node का मौजूदा लंबे समय तक सहायता वाला वर्शन इंस्टॉल करें.
  3. Lighthouse इंस्टॉल करें. -g फ़्लैग इसे ग्लोबल मॉड्यूल के तौर पर इंस्टॉल करता है.
npm install -g lighthouse

ऑडिट करने के लिए:

lighthouse <url>

सभी विकल्प देखने के लिए:

lighthouse --help

प्रोग्राम के हिसाब से Node मॉड्यूल चलाना

Node मॉड्यूल के तौर पर, प्रोग्राम के हिसाब से लाइटहाउस चलाने का उदाहरण देखने के लिए, प्रोग्राम के हिसाब से इस्तेमाल करना देखें.

PageSpeed Insights का इस्तेमाल करना

PageSpeed Insights पर Lighthouse चलाने के लिए:

  1. PageSpeed Insights पर जाएं.
  2. वेब पेज का यूआरएल डालें.

  3. विश्लेषण करें पर क्लिक करें.

    PageSpeed Insights की वेबसाइट.

Lighthouse को Chrome एक्सटेंशन के तौर पर चलाना

एक्सटेंशन इंस्टॉल करने के लिए:

  1. डेस्कटॉप के लिए Google Chrome डाउनलोड करें.
  2. Chrome Webstore से Lighthouse Chrome एक्सटेंशन इंस्टॉल करें.

ऑडिट करने के लिए:

  1. Chrome में, उस पेज पर जाएं जिसे आपको ऑडिट करना है.

  2. Chrome के पता बार के बगल में या Chrome के एक्सटेंशन मेन्यू में, Lighthouse पर क्लिक करें. क्लिक करने पर, Lighthouse मेन्यू बड़ा हो जाता है.

    एक्सटेंशन, आपको रिपोर्ट जनरेट करने के लिए कहता है.

  3. रिपोर्ट जनरेट करें पर क्लिक करें. लाइटहाउस उस पेज के लिए ऑडिट चलाता है जिस पर फ़िलहाल फ़ोकस है. इसके बाद, वह नतीजों की रिपोर्ट के साथ एक नया टैब खोलता है.

    एक्सटेंशन से जनरेट की गई लाइटहाउस रिपोर्ट.

रिपोर्ट ऑनलाइन शेयर और देखना

रिपोर्ट को ऑनलाइन देखने और शेयर करने के लिए, Lighthouse Viewer का इस्तेमाल करें.

लाइटहाउस व्यूअर

रिपोर्ट को JSON फ़ॉर्मैट में शेयर करना

Lighthouse व्यूअर को लाइटहाउस रिपोर्ट का JSON आउटपुट चाहिए. JSON आउटपुट को इस तरह जनरेट करें:

  • Lighthouse रिपोर्ट से. मेन्यू के लिए, पर क्लिक करें. इसके बाद, JSON के तौर पर सेव करें पर क्लिक करें
  • कमांड लाइन. चलाएं: shell lighthouse --output json --output-path <path/for/output.json>

रिपोर्ट का डेटा देखने के लिए:

  1. Lighthouse Viewer खोलें.
  2. JSON फ़ाइल को व्यूअर पर खींचें और छोड़ें या फ़ाइल नेविगेटर खोलने के लिए व्यूअर में कहीं भी क्लिक करें और फ़ाइल चुनें.

रिपोर्ट को GitHub Gist के तौर पर शेयर करना

अगर आपको JSON फ़ाइलों को मैन्युअल तरीके से शेयर नहीं करना है, तो अपनी रिपोर्ट को GitHub पर गुप्त तौर पर शेयर किया जा सकता है. सारांश का एक लाभ मुफ़्त वर्शन नियंत्रण है.

रिपोर्ट को खास जानकारी के तौर पर एक्सपोर्ट करने के लिए:

  1. मेन्यू पर क्लिक करें. इसके बाद, दर्शक में खोलें पर क्लिक करें. यह रिपोर्ट, https://googlechrome.github.io/lighthouse/viewer/ पर मौजूद है.
  2. व्यूअर में जाकर, मेन्यू पर क्लिक करें. इसके बाद, Gist के तौर पर सेव करें पर क्लिक करें. जब आप पहली बार ऐसा करते हैं, तो एक पॉप-अप आपके बुनियादी GitHub डेटा को ऐक्सेस करने के लिए अनुमति मांगता है. साथ ही, आपके Gist को पढ़ने और उसमें बदलाव करने के लिए कहता है.

Lighthouse के सीएलआई वर्शन से किसी रिपोर्ट को gist के तौर पर एक्सपोर्ट करने के लिए, मैन्युअल तरीके से gist बनाएं और रिपोर्ट के JSON आउटपुट को कॉपी करके gist में चिपकाएं. JSON आउटपुट वाली gist फ़ाइल का नाम, .lighthouse.report.json पर खत्म होना चाहिए. कमांड-लाइन टूल से JSON आउटपुट जनरेट करने का उदाहरण देखने के लिए, रिपोर्ट को JSON के तौर पर शेयर करना लेख पढ़ें.

Gist के तौर पर सेव की गई रिपोर्ट को देखने के लिए:

  • दर्शक के यूआरएल में ?gist=<ID> जोड़ें. यहां <ID>, खास जानकारी का आईडी है. text https://googlechrome.github.io/lighthouse/viewer/?gist=<ID>
  • व्यूअर खोलें और इसमें जिस्ट का यूआरएल चिपकाएं.

लाइटहाउस टूल को एक्सटेंसिबल बनाना

लाइटहाउस का मकसद, ऐसे दिशा-निर्देश देना है जो सभी वेब डेवलपर के लिए काम के हों और उन पर कार्रवाई की जा सके. इसके लिए, Lighthouse को अपनी ज़रूरतों के मुताबिक बनाने के लिए दो सुविधाएं उपलब्ध हैं.

स्टैक पैक

डेवलपर अपने वेब पेज बनाने के लिए, कई अलग-अलग टेक्नोलॉजी (बैकएंड, कॉन्टेंट मैनेजमेंट सिस्टम, और JavaScript फ़्रेमवर्क) का इस्तेमाल करते हैं. सामान्य सुझावों के बजाय, Lighthouse इस्तेमाल किए गए टूल के आधार पर काम की और कार्रवाई करने लायक सलाह देता है.

स्टैक पैक की मदद से लाइटहाउस यह पता लगाता है कि आपकी साइट किस प्लैटफ़ॉर्म पर बनी है. साथ ही, यह स्टैक के हिसाब से खास सुझाव दिखाता है. इन सुझावों को कम्यूनिटी के विशेषज्ञों की मदद से तय किया जाता है.

स्टैक पैक का योगदान देने के लिए, योगदान देने के दिशा-निर्देश पढ़ें.

लाइटहाउस प्लगिन

लाइटहाउस प्लगिन की मदद से डोमेन एक्सपर्ट अपने समुदाय की खास ज़रूरतों के लिए, Lighthouse की सुविधाओं को बढ़ा सकते हैं. नए ऑडिट बनाने के लिए, Lighthouse से इकट्ठा किए गए डेटा का फ़ायदा लिया जा सकता है. Lighthouse प्लग इन, एक नोड मॉड्यूल है. यह Lighthouse की जांच करने के लिए, जांच का एक सेट लागू करता है. साथ ही, इसे रिपोर्ट में नई कैटगरी के तौर पर जोड़ा जाता है.

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

लाइटहाउस को इंटिग्रेट करें

अगर आप कोई कंपनी या व्यक्ति हैं और अपने प्रॉडक्ट या सेवाओं में Lighthouse को इंटिग्रेट कर रहे हैं, तो यह बहुत बढ़िया है! हम चाहते हैं कि ज़्यादा से ज़्यादा लोग Lighthouse का इस्तेमाल करें.

Lighthouse को इंटिग्रेट करने के लिए दिशा-निर्देश और ब्रैंड ऐसेट देखें. इससे यह पता चलता है कि हमारे ब्रैंड को सुरक्षित रखते हुए, Lighthouse का इस्तेमाल किया गया है.

Lighthouse में योगदान देना

लाइटहाउस एक ओपन सोर्स है और योगदान का स्वागत है! ऐसे गड़बड़ियां ढूंढने के लिए कि जिन्हें ठीक किया जा सकता है या ऐसे ऑडिट ढूंढने के लिए जिन्हें बनाया जा सकता है या जिनमें सुधार किया जा सकता है, रिपॉज़िटरी का समस्या ट्रैकर देखें. ये समस्याएं, परफ़ॉर्मेंस मेट्रिक, नए ऑडिट के लिए आइडिया या Lighthouse से जुड़ी किसी भी अन्य चीज़ के बारे में चर्चा करने के लिए बेहतरीन जगह हैं.