लाइटहाउस जनवरी 2017 का अपडेट

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

लाइटहाउस का लोगो
लाइटहाउस का लोगो

आज हमें यह बताते हुए खुशी हो रही है कि Lighthouse एक 1.5 रिलीज़ वाली बड़ी रिलीज़ है और इसमें 128 से ज़्यादा पीआर शामिल हैं. लाइटहाउस 1.5 में कई बड़ी नई सुविधाएं, ऑडिट और सामान्य गड़बड़ियां ठीक की गई हैं. इसे npm (npm i -g lighthouse) से इंस्टॉल किया जा सकता है या Chrome Web Store से एक्सटेंशन डाउनलोड किया जा सकता है.

नए ऑडिट

सीएसएस के इस्तेमाल का ऑडिट आपके पेज पर इस्तेमाल नहीं किए गए स्टाइल नियमों की संख्या और उन्हें हटाने में होने वाले खर्च/समय की बचत की रिपोर्ट करता है:

सीएसएस के इस्तेमाल का ऑडिट

ऑप्टिमाइज़ की गई इमेज ऑडिट, ऐसी इमेज की रिपोर्ट करता है जिन्हें ऑप्टिमाइज़ नहीं किया गया है. साथ ही, उन्हें ऑप्टिमाइज़ करने में लगने वाले पैसे/समय की बचत भी होती है:

ऑप्टिमाइज़ की गई इमेज AudiT

रिस्पॉन्सिव इमेज ऑडिट बहुत बड़ी इमेज की रिपोर्ट करता है. साथ ही, डिवाइस के लिए उन इमेज का सही साइज़ बदलने से होने वाली संभावित लागत/समय की बचत करता है:

ऑप्टिमाइज़ की गई इमेज AudiT

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

डेप्रेशन और इंटरवेंशन ऑडिट

बदलावों की जानकारी दें

जैसा कि आपने देखा है, हमने टेबल के रूप में डेटा जोड़कर, बाहरी सहायता टेक्स्ट को छिपाकर, और डेटा को नेविगेट करना आसान बनाने के लिए नई सुविधाएं जोड़कर, रिपोर्ट को विज़ुअल तौर पर कम व्यवस्थित करने पर ध्यान दिया है.

एम्युलेशन सेटिंग

यह भूल जाना आसान है कि किसी खास लाइटहाउस को चलाने के लिए, थ्रॉटलिंग और एम्युलेशन सेटिंग का इस्तेमाल किस तरह किया गया. लाइटहाउस रिपोर्ट में अब रनटाइम एम्युलेशन सेटिंग शामिल हैं, जिनका इस्तेमाल रिपोर्ट बनाने के लिए किया गया था; लंबे समय से एक सुविधा का अनुरोध:

एम्युलेशन सेटिंग

ज़्यादा काम का ट्रेस डेटा

"फ़र्स्ट मीनिंगफ़ुल पेंट", "टाइम टू इंटरैक्टिव" वगैरह जैसी लाइटहाउस मेट्रिक को User Timing माप के तौर पर पेश किया जाता है. साथ ही, इन्हें --save-assets फ़्लैग के साथ सेव किए गए ट्रेस डेटा में फिर से इंजेक्ट कर दिया जाता है.

अगर --save-assets फ़्लैग का इस्तेमाल किया जा रहा है, तो अब ट्रेस को DevTools में छोड़ा जा सकता है या DevTools टाइमलाइन व्यूअर में खोला जा सकता है. आपके पास पेज लोड के पूरे ट्रेस के साथ-साथ, अपनी मुख्य मेट्रिक देखने का विकल्प भी होगा.

डेटा ट्रेस करें

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

एचटीएमएल रिपोर्ट में, आपको एक नया बटन दिखेगा, जिसमें रिपोर्ट को अलग-अलग फ़ॉर्मैट में एक्सपोर्ट करने के विकल्प होंगे. इनमें से एक विकल्प "व्यूअर में खोलें" है. इस बटन पर क्लिक करने से रिपोर्ट, ऑनलाइन व्यूअर को भेजी जाएगी. यहां से GitHub उपयोगकर्ताओं के साथ रिपोर्ट शेयर की जा सकती है.

'व्यूअर में खोलें' बटन
दर्शक के नतीजे में खोलें

पर्दे के पीछे, दर्शक को OAuth के ज़रिए GitHub सीक्रेट गाइड बनाने के लिए आपकी अनुमति मिलती है और वह रिपोर्ट को वहां सेव करता है. यह आपके Gist के तौर पर काम करता है, इसलिए रिपोर्ट को शेयर करने पर आपका पूरा कंट्रोल होता है और आप इसे किसी भी समय मिटा सकते हैं. GitHub सेटिंग में जाकर, दर्शक को नोट बनाने की अनुमति वापस ली जा सकती है.

परफ़ॉर्मेंस के लिए प्रयोग

परफ़ॉर्मेंस एक्सपेरिमेंट प्रोजेक्ट का पहला वर्शन 1.5.0 पर उपलब्ध है. इसकी मदद से, डेवलपमेंट के दौरान अपने पेज लोड की परफ़ॉर्मेंस की जांच की जा सकती है. साथ ही, अपने अहम पाथ में एसेट को ब्लॉक करने या उनमें देरी होने के असर की जांच की जा सकती है.

जब लाइटहाउस को --interactive फ़्लैग के साथ चलाया जाता है, तो एक खास रिपोर्ट जनरेट होती है. इससे महंगे पेज रिसॉर्स को इंटरैक्टिव तरीके से चुना जा सकता है. इसके बाद, प्रयोग वाला सर्वर ब्लॉक किए गए रिसॉर्स के साथ, उस पेज पर Lighthouse को फिर से चलाता है.

रनटाइम सेटिंग टॉगल करें

लाइटहाउस में परफ़ॉर्मेंस एक्सपेरिमेंट के बारे में ज़्यादा जानें.

नए दस्तावेज़

सिर्फ़ इतना ही नहीं, हमने developers.google.com/web/tools/lighthouse/ पर मौजूद दस्तावेज़ को आधुनिक बना दिया है. साथ ही, ऑडिट के लिए नए रेफ़रंस जोड़े हैं.

नया दस्तावेज़

अभी के लिए बस इतना ही!

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