Lighthouse का इस्तेमाल करके, परफ़ॉर्मेंस से जुड़े अवसर खोजें

Kayce Basques

Lighthouse एक ऐसा टूल जो किसी पेज की परफ़ॉर्मेंस को मापने और उसे बेहतर बनाने के तरीके ढूंढने में आपकी मदद करता है. लाइटहाउस का इस्तेमाल कैसे किया जाता है, इसके लिए सामान्य वर्कफ़्लो यहां दिया गया है:

1. आप लाइटहाउस को बताएं कि किस पेज को ऑडिट करना है.
2. लाइटहाउस उस पेज को लोड करता है और यह रिकॉर्ड करता है कि पेज को अलग-अलग परफ़ॉर्मेंस की उपलब्धि हासिल करने में कितना समय लगा. इन माइलस्टोन को metrics कहा जाता है.
3. लाइटहाउस आपको एक रिपोर्ट देता है कि पेज की परफ़ॉर्मेंस कैसी रही. रिपोर्ट हर मेट्रिक के लिए एक स्कोर और ऑपर्च्यूनिटी की एक सूची देती है, अगर इन्हें लागू किया जाता है, तो पेज तेज़ी से लोड होता है.

आपका मिशन है, समय के साथ मेट्रिक के स्कोर को बेहतर बनाना या कम से कम पक्का करना कि वे खराब न हों. हालांकि, मेट्रिक पर सीधे काम करने का कोई तरीका नहीं है. इसके बजाय, आप लाइटहाउस से मिलने वाले अवसरों का इस्तेमाल करते हैं. इन अवसरों पर काम करने से आपकी मेट्रिक का स्कोर बेहतर होता है.

अपने प्रोफ़ाइल पेज से लाइटहाउस चलाएं

अपने web.dev प्रोफ़ाइल पेज से लाइटहाउस चलाएं:

1. कोई भी यूआरएल दें और Lighthouse ऑडिट की एक सीरीज़ जनरेट करता है. इससे एक रिपोर्ट जनरेट होती है कि पेज की परफ़ॉर्मेंस कैसी है.

2. ऑडिट रिपोर्ट की समीक्षा करके पता लगाएं कि आपके पेज को किन हिस्सों में बेहतर बनाया जा सकता है.

3. हर ऑडिट के लिए, आपको सलाह और तुरंत ज़रूरी कदम मिलेंगे. इनका इस्तेमाल करके अपने स्कोर को बेहतर किया जा सकता है.

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

Chrome DevTools, वेब डेवलपर टूल का एक सेट है. इसे सीधे तौर पर Google Chrome ब्राउज़र में बनाया गया है. DevTools इंस्टॉल करने के लिए, आपको कुछ भी डाउनलोड करने की ज़रूरत नहीं है. अगर आपके पास Chrome है, तो आपके पास DevTools है.

1. Chrome में, उस पेज पर जाएं जिसे आपको ऑडिट करना है.
2. DevTools खोलने के लिए, `Control+Shift+J` (या Mac पर `Command+Option+J`) दबाएं.

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

1. पक्का करें कि मोबाइल रेडियो बटन चुना गया हो. जब लाइटहाउस आपके पेज को ऑडिट करता है, तो यह मोबाइल डिवाइस के व्यूपोर्ट और उपयोगकर्ता एजेंट स्ट्रिंग को सिम्युलेट करेगा.
2. पक्का करें कि परफ़ॉर्मेंस चेकबॉक्स चालू है. ऑडिट सेक्शन में जाकर, बाकी चेकबॉक्स को चालू या बंद किया जा सकता है. अगर उन्हें चालू किया जाता है, तो आपको अपने पेज के उन दूसरे पहलुओं को बेहतर बनाने के कई तरीके दिखेंगे.
3. पक्का करें कि सिम्युलेटेड फ़ास्ट 3G, 4x सीपीयू स्लोडाउन रेडियो बटन चुना गया हो. जब पेज लोड होता है, तब लाइटहाउस आपके नेटवर्क या सीपीयू को थ्रॉटल नहीं करता. इसके बजाय, यह देखता है कि सामान्य स्थितियों में पेज को लोड होने में कितना समय लगा. इसके बाद, यह अनुमान लगाता है कि आपकी मशीन के मुकाबले चार गुना कम पावर वाले सीपीयू वाले सीपीयू की मदद से, तेज़ 3G नेटवर्क पर लोड होने में कितना समय लगता.
4. पक्का करें कि स्टोरेज खाली करें चेकबॉक्स चालू हो. यह विकल्प, Lighthouse को हर पेज रिसॉर्स के लिए नेटवर्क पर जाने के लिए मजबूर करता है. इससे पता चलता है कि पेज पर पहली बार आने वाले लोगों का अनुभव कैसा रहा.
5. ऑडिट चलाएं पर क्लिक करें. 5 से 10 सेकंड के बाद, लाइटहाउस आपको एक रिपोर्ट दिखाता है.

ध्यान दें: कॉन्फ़िगरेशन के विकल्पों को अपनी ज़रूरत के हिसाब से सेट किया जा सकता है. अगर आपको यह समझ नहीं आता है, तो यहां बताए गए विकल्प अच्छे डिफ़ॉल्ट हैं. अगर इन विकल्पों की मदद से आपका पेज तेज़ी से लोड हो पाता है, तो आपका पेज सभी के लिए तेज़ी से लोड होगा. अहम बात यह है कि ऑडिट में दिए गए विकल्पों में कोई बदलाव न करें.

उदाहरण के लिए, अगर सिम्युलेटेड फ़ास्ट 3G, 4x सीपीयू स्लोडाउन थ्रॉटलिंग चालू की मदद से कुछ ऑडिट चलाए जाते हैं और फिर अन्य बार थ्रॉटलिंग बंद होने पर ऑडिट चलाए जाते हैं, तो थ्रॉटलिंग चालू करने पर आपके मेट्रिक स्कोर काफ़ी कम हो जाएंगे. आपको यह जानने में काफ़ी समय लग सकता है कि आपका पेज अब इतना धीमा क्यों है, जबकि असल में सिर्फ़ आपका कॉन्फ़िगरेशन ही बदला है.

अपनी रिपोर्ट को समझना

रिपोर्ट के सबसे ऊपर दाईं ओर, आपका कुल परफ़ॉर्मेंस स्कोर दिखता है. 100 एक बेहतरीन स्कोर है. कुल स्कोर के नीचे, मेट्रिक के स्कोर मौजूद होते हैं. Lighthouse v3 स्कोरिंग गाइड की मदद से पता चलता है कि पूरे स्कोर में हर मेट्रिक स्कोर का क्या योगदान होता है.

किसी मेट्रिक के बारे में ज़्यादा जानने के लिए, उस पर कर्सर घुमाएं. इसके बारे में दस्तावेज़ पढ़ने के लिए, ज़्यादा जानें पर क्लिक करें.

मेट्रिक के स्कोर के नीचे, आपको स्क्रीनशॉट दिखते हैं कि पेज लोड होने के दौरान कैसा दिखा.

स्क्रीनशॉट के नीचे आपको पेज की परफ़ॉर्मेंस को बेहतर बनाने के अवसर दिखते हैं.

किसी अवसर के बारे में ज़्यादा जानने के लिए, उस पर क्लिक करें.

अगले चरण

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

लाइटहाउस का इस्तेमाल करके, स्पॉट की जांच करने में मदद मिल सकती है. हालांकि, ऐसा करते समय आपको लगातार निगरानी करने की सुविधा को सेटअप करना होगा, ताकि आपकी साइट ठीक तरह से काम कर सके. समय के साथ अपने लाइटहाउस की प्रोग्रेस को ट्रैक करने के लिए, अपनी साइट को अपनी प्रोफ़ाइल में जोड़ें.