Lighthouse एक ऐसा ऑटोमेटेड टूल है जो ओपन-सोर्स है. इसका इस्तेमाल, वेब ऐप्लिकेशन की क्वालिटी को बेहतर बनाने के लिए किया जाता है. इसे Chrome एक्सटेंशन के तौर पर इंस्टॉल किया जा सकता है या Node कमांड-लाइन टूल के तौर पर चलाया जा सकता है. जब Lighthouse को कोई यूआरएल दिया जाता है, तो वह पेज के लिए कई तरह की जांच करता है. इसके बाद, एक रिपोर्ट जनरेट करता है. इसमें यह बताया जाता है कि पेज की परफ़ॉर्मेंस कैसी रही और उसे कहां सुधारने की ज़रूरत है.
आज हमें यह बताते हुए खुशी हो रही है कि Lighthouse का 1.5 वर्शन रिलीज़ हो गया है. इसमें 128 से ज़्यादा पीआर शामिल हैं. Lighthouse 1.5 में कई नई सुविधाएं, ऑडिट, और गड़बड़ियों को ठीक करने की सुविधाएं शामिल हैं. इसे npm (npm i -g lighthouse) से इंस्टॉल किया जा सकता है या Chrome वेब स्टोर से एक्सटेंशन डाउनलोड किया जा सकता है.
नए ऑडिट
सीएसएस के इस्तेमाल से जुड़े ऑडिट से, आपके पेज में इस्तेमाल नहीं किए गए स्टाइल नियमों की संख्या और उन्हें हटाने से होने वाली बचत के बारे में पता चलता है:
ऑप्टिमाइज़ की गई इमेज का ऑडिट, उन इमेज की रिपोर्ट करता है जिन्हें ऑप्टिमाइज़ नहीं किया गया है. साथ ही, इन्हें ऑप्टिमाइज़ करने से होने वाले खर्च/समय की बचत के बारे में बताता है:
रिस्पॉन्सिव इमेज ऑडिट, बहुत बड़ी इमेज की रिपोर्ट करता है. साथ ही, यह बताता है कि किसी डिवाइस के लिए इमेज का साइज़ सही करने पर, लागत/समय में कितनी बचत हो सकती है:
अब काम न करने वाले एपीआई और इंटरवेंशन ऑडिट में, Chrome के Console से मिली चेतावनियों की सूची दी जाती है. ऐसा तब होता है, जब आपका पेज अब काम न करने वाले एपीआई या ऐसी सुविधाओं का इस्तेमाल करता है जिनमें इंटरवेंशन हैं:
बदलावों की जानकारी दें
जैसा कि आपने देखा है, हमने टेबल वाला डेटा जोड़कर, ज़रूरत से ज़्यादा सहायता टेक्स्ट छिपाकर, और नई सुविधाएं जोड़कर, रिपोर्ट को विज़ुअल तौर पर कम अव्यवस्थित बनाने पर फ़ोकस किया है. इससे डेटा को आसानी से नेविगेट किया जा सकता है.
एम्युलेटर की सेटिंग
यह आसानी से भूल जाता है कि किसी खास Lighthouse रन के लिए, ट्रॉथलिंग और इम्यूलेशन की कौनसी सेटिंग इस्तेमाल की गई थीं. Lighthouse रिपोर्ट में अब रनटाइम इम्यूलेशन सेटिंग शामिल हैं. इनका इस्तेमाल रिपोर्ट बनाने के लिए किया जाता है. यह लंबे समय से मांगी जा रही सुविधा है:
ज़्यादा काम का ट्रैक डेटा
"पहला काम का पेंट", "इंटरैक्टिव होने में लगने वाला समय" वगैरह जैसी Lighthouse मेट्रिक को उपयोगकर्ता के समय के मेज़र के तौर पर मॉक किया जाता है और --save-assets फ़्लैग के साथ सेव किए गए ट्रेस डेटा में फिर से इंजेक्ट किया जाता है.
--save-assets फ़्लैग का इस्तेमाल करने पर, अब ट्रेस को DevTools में छोड़ा जा सकता है या DevTools टाइमलाइन व्यूअर में खोला जा सकता है.
आपको पेज लोड होने के पूरे ट्रेस के संदर्भ में, अपनी मुख्य मेट्रिक दिखेंगी.
Lighthouse Viewer
एचटीएमएल रिपोर्ट में, आपको एक नया बटन दिखेगा. इसमें रिपोर्ट को अलग-अलग फ़ॉर्मैट में एक्सपोर्ट करने के विकल्प होंगे. इनमें से एक विकल्प "व्यूअर में खोलें" है. इस बटन पर क्लिक करने से, रिपोर्ट ऑनलाइन दर्शक पर भेज दी जाएगी. यहां से, GitHub के उपयोगकर्ताओं के साथ रिपोर्ट शेयर की जा सकती है.
दर्शक, OAuth के ज़रिए आपकी अनुमति लेकर GitHub पर गुप्त gist बनाता है और उसमें रिपोर्ट सेव करता है. यह आपके Gist के तौर पर सेव होता है. इसलिए, रिपोर्ट को शेयर करने पर आपके पास पूरा कंट्रोल होता है. साथ ही, आपके पास इसे किसी भी समय मिटाने का विकल्प होता है. GitHub की सेटिंग में जाकर, दर्शक को गिस्ट बनाने की अनुमति रद्द की जा सकती है.
परफ़ॉर्मेंस एक्सपेरिमेंट
परफ़ॉर्मेंस एक्सपेरिमेंट प्रोजेक्ट का पहला वर्शन, 1.5.0 में लॉन्च हो गया है. इससे, पेज लोड होने की परफ़ॉर्मेंस के साथ प्रयोग किया जा सकता है. साथ ही, डेवलपमेंट के दौरान, अपने क्रिटिकल पाथ में एसेट को ब्लॉक करने या देरी करने के असर की इंटरैक्टिव तरीके से जांच की जा सकती है.
जब Lighthouse को --interactive फ़्लैग के साथ चलाया जाता है, तो एक खास रिपोर्ट जनरेट होती है. इससे, पेज के उन संसाधनों को इंटरैक्टिव तरीके से चुना जा सकता है जिनकी लागत ज़्यादा होती है. इसके बाद, एक्सपेरिमेंट सर्वर उस पेज पर Lighthouse को फिर से चलाता है और उस पर ब्लॉक किए गए संसाधनों का इस्तेमाल करता है.
Lighthouse में परफ़ॉर्मेंस एक्सपेरिमेंट के बारे में ज़्यादा जानें.
नया दस्तावेज़
आखिर में, हमने developers.google.com/web/tools/lighthouse/ पर मौजूद दस्तावेज़ को आधुनिक बनाया है और ऑडिट के नए रेफ़रंस जोड़े हैं.
अभी के लिए बस इतना ही!
Lighthouse के नए वर्शन के बारे में पूरी जानकारी के लिए, GitHub पर रिलीज़ के बारे में पूरी जानकारी देखें. हमेशा की तरह, गड़बड़ियों की शिकायत करने, सुविधाओं के लिए अनुरोध करने या आगे क्या देखना है, इस बारे में आइडिया देने के लिए, हमसे संपर्क करें.