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

Brendan Kenny
Brendan Kenny

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

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

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

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

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

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

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

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

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

नए ऑडिट

लाइटहाउस 10 एक बिलकुल नया परफ़ॉर्मेंस ऑडिट और दूसरे में एक अहम बदलाव लेकर आता है.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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