Lighthouse 10 में नया क्या है

Brendan Kenny
Brendan Kenny

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

लाइटहाउस 10, कमांड लाइन से npm तक और Chrome कैनरी में तुरंत उपलब्ध है. आने वाले हफ़्तों में, यह सुविधा Chrome 112 में और PageSpeed Insights के हिसाब से मिलेगी.

स्कोर में हुए बदलाव

लाइटहाउस 10 में, भरोसेमंद टाइम टू इंटरैक्टिव (टीटीआई) मेट्रिक को हटाया जा रहा है. इससे लाइटहाउस 8 में शुरू होने वाली, बंद करने की प्रोसेस खत्म हो जाएगी. टीटीआई के 10% स्कोर का वेट अब कुल लेआउट शिफ़्ट (सीएलएस) में बदल जाएगा. यह परफ़ॉर्मेंस के कुल स्कोर का 25% होगा.

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

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

हम उम्मीद करते हैं कि इससे ज़्यादातर पेजों में ज़्यादातर पेजों को टीटीआई के मुकाबले सीएलएस पर बेहतर स्कोर मिलता है. हाल ही में, एचटीटीपी संग्रह का इस्तेमाल करके 1.3 करोड़ पेजों का विश्लेषण किया गया. इसमें पाया गया कि उनमें से 90% पेजों के लाइटहाउस की परफ़ॉर्मेंस स्कोर बेहतर हुआ. इनमें से 50% पेजों की परफ़ॉर्मेंस में पांच पॉइंट से ज़्यादा की बढ़ोतरी देखने को मिली.

लाइटहाउस स्कोर गेज, जिसे कुल स्कोर के मेट्रिक (एफ़सीपी, एसआई, एलसीपी, टीबीटी, और सीएलएस) के हिसाब से बांटा जाता है

अगर आपको किसी वजह से अब भी लाइटहाउस टीटीआई वैल्यू की ज़रूरत है (उदाहरण के लिए, किसी सीआई दावे में), तो यह लाइटहाउस JSON आउटपुट में अब भी उपलब्ध रहेगी. इसका मतलब है कि इसका स्कोर 0 है और एचटीएमएल रिपोर्ट में इसे छिपाया भी जा सकता है. JSON वैल्यू का कोई भी स्क्रिप्ट किया गया ऐक्सेस बिना किसी बदलाव के काम करना जारी रखना चाहिए.

नए ऑडिट

लाइटहाउस 10 में, परफ़ॉर्मेंस का नया ऑडिट जोड़ा गया है. साथ ही, दूसरे में अहम बदलाव किए गए हैं.

बैक/फ़ॉरवर्ड कैश मेमोरी

बैक/फ़ॉरवर्ड कैश मेमोरी (bfcache) की सुविधा, पेज की परफ़ॉर्मेंस को बेहतर बनाने में मदद करने वाले सबसे असरदार टूल में से एक है. इसका इस्तेमाल, असल उपयोगकर्ताओं के लिए किया जाता है. ब्राउज़र की सामान्य कैश मेमोरी के अलावा, कैश मेमोरी से लोड किया गया पेज, पेज के लेआउट और उसके एक्ज़ीक्यूशन की स्थिति को तुरंत पहले जैसा कर देगा. इसमें, पेज लोड होने में लगने वाली सभी गतिविधियां शामिल नहीं होंगी. साथ ही, उपयोगकर्ताओं के इतिहास में पीछे और आगे जाने पर, उन्हें तुरंत आपका पेज दिखने लगेगा.

हालांकि, कुछ ऐसे तरीके भी हैं जो ब्राउज़र को बैक-कैश मेमोरी से पेज को वापस लाने से रोक सकते हैं. यह नया लाइटहाउस ऑडिट, जांच वाले पेज से किसी दूसरी जगह पर वापस जाता है और फिर से यह जांच करता है कि इस पेज को कैश मेमोरी में सेव किया जा सकता है या नहीं. साथ ही, यह जांच न हो पाने की वजहों की जानकारी भी देता है.

bfcache ऑडिट के नतीजे का उदाहरण, खुले हुए IndexDB कनेक्शन की वजह से लिस्टिंग के काम न करने और पेज में अनलोड हैंडलर

ज़्यादा जानकारी के लिए bfcache ऑडिट के दस्तावेज़ देखें.

चिपकाने से रोकने वाले इनपुट

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

नया ऑडिट अब "उपयोगकर्ताओं को इनपुट फ़ील्ड में चिपकाने की अनुमति देता है" होगा (paste-preventing-inputs).

नोड के उपयोगकर्ता

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

लाइटहाउस 10 में आपको टाइपस्क्रिप्ट टाइप की पूरी जानकारी भी मिलेगी! lighthouse से इंपोर्ट की गई सभी चीज़ों को अब टाइप किया जाना चाहिए. यह खास तौर पर तब मददगार होगी, जब Lighthouse यूज़र फ़्लो को स्क्रिप्ट किया जा रहा हो.

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

इन टाइप को आज़माएं. अगर इन्हें इस्तेमाल करने में आपको कोई समस्या आती है, तो हमें बताएं.

रनिंग लाइटहाउस

लाइटहाउस Chrome DevTools, npm (नोड मॉड्यूल और सीएलआई टूल के तौर पर), और Chrome और Firefox में ब्राउज़र एक्सटेंशन के तौर पर उपलब्ध है. इससे PageSpeed Insights के साथ-साथ, Google की कई सेवाएं काम करती हैं.

लाइटहाउस नोड सीएलआई को आज़माने के लिए, इन निर्देशों का इस्तेमाल करें:

npm install -g lighthouse
lighthouse https://www.example.com --view

लाइटहाउस टीम से संपर्क करें

नई सुविधाओं, Lighthouse 10 की रिलीज़ में हुए बदलावों या लाइटहाउस से जुड़ी दूसरी सुविधाओं पर चर्चा करने के लिए: