Google I/O के बाद से, हम लाइटहाउस को शानदार प्रोग्रेसिव वेब ऐप्लिकेशन बनाने का एक शानदार साथी बनाने के लिए कड़ी मेहनत कर रहे हैं:
- प्रोजेक्ट में 50 नए contributors का स्वागत किया गया
- 15 रिलीज़ शिप की गईं
- ~20 अतिरिक्त ऑडिट टेस्ट जोड़े गए (~50 कुल)
आज हमें लाइटहाउस के 1.3 वर्शन की रिलीज़ का एलान करते हुए खुशी हो रही है. लाइटहाउस 1.3
में कई बड़ी नई सुविधाएं, ऑडिट, और आम तौर पर होने वाली गड़बड़ियां ठीक करना शामिल है. इसे npm (npm i -g lighthouse) से इंस्टॉल किया जा सकता है या Chrome Web Store से एक्सटेंशन डाउनलोड किया जा सकता है.
तो नया क्या है?
नया लुक और अनुभव
अगर आपने Lighthouse के पुराने वर्शन का इस्तेमाल किया है, तो शायद आपको पता चला होगा कि लोगो नया है! एचटीएमएल रिपोर्ट और Chrome एक्सटेंशन को भी पूरी तरह से रीफ़्रेश किया गया है. इसमें स्कोरिंग को साफ़ तौर पर दिखाया गया है और ऑडिट के नतीजों को एक जैसा बनाया गया है. हमने टेस्ट में फ़ेल होने पर काम की डीबग की जानकारी भी जोड़ी है. साथ ही, सुझाए गए तरीकों के बारे में पॉइंटर भी शामिल किए हैं.
सबसे सही नए तरीके
अब तक, Lighthouse ने परफ़ॉर्मेंस मेट्रिक और PWA की क्वालिटी पर फ़ोकस किया है. हालांकि, इस प्रोजेक्ट का मुख्य लक्ष्य एक गाइडबुक उपलब्ध कराना है, जिसे सभी वेब डेवलपमेंट के लिए इस्तेमाल किया जा सकता है. इसमें, सबसे सही तरीकों के बारे में दिशा-निर्देश, परफ़ॉर्मेंस और सुलभता के बारे में सलाह, और क्वालिटी वाले ऐप्लिकेशन बनाने के लिए शुरू से लेकर अंत तक मदद शामिल है.
"Do Better Web" लाइटहाउस प्रोजेक्ट की एक कोशिश है. इससे डेवलपर
वेब पर बेहतर काम कर पाते हैं. दूसरे शब्दों में, अपने वेब ऐप्लिकेशन को आधुनिक और ऑप्टिमाइज़
करने में उनकी मदद करें. अक्सर, वेब डेवलपर पुराने तरीकों और एंटी-पैटर्न का इस्तेमाल करते हैं. इसके अलावा, वे परफ़ॉर्मेंस से जुड़ी समस्याओं
के बारे में जाने-अनजाने में उनका इस्तेमाल करते हैं. उदाहरण के लिए, यह पूरी जानकारी है कि JS पर आधारित ऐनिमेशन, setInterval() के बजाय requestAnimationFrame() का इस्तेमाल करके किए जाने चाहिए. हालांकि, अगर डेवलपर को नए एपीआई के बारे में जानकारी नहीं है, तो उसके वेब ऐप्लिकेशन को नुकसान पहुंचना होगा.
लाइटहाउस 1.3 में 20 से ज़्यादा सबसे सही तरीकों के सुझाव शामिल हैं. इनमें सीएसएस और JavaScript की सुविधाओं को मॉडर्न बनाने की सलाह से लेकर परफ़ॉर्मेंस को बेहतर बनाने के सुझाव शामिल हैं. जैसे: "रेंडर ब्लॉक करने वाली ऐसेट की संख्या कम करें", "स्क्रोल करने की परफ़ॉर्मेंस को बेहतर बनाने के लिए पैसिव इवेंट लिसनर का इस्तेमाल करें".
हम समय के साथ और सुझाव जोड़ते रहेंगे. अगर आपके पास सबसे सही तरीकों के बारे में सुझाव हैं या ऑडिट लिखने में हमारी मदद करना है, तो GitHub पर समस्या दर्ज करें.
रिपोर्ट व्यूअर
आख़िर में, लाइटहाउस के नतीजों के लिए नए वेब व्यूअर का एलान करते हुए हमें बहुत खुशी हो रही है. googlechrome.github.io/lighthouse/viewer पर जाएं. इसके बाद, लाइटहाउस रन (या अपनी फ़ाइल अपलोड करने के लिए क्लिक करें) और वॉइला के आउटपुट को खींचें और छोड़ें. "Insta" लाइटहाउस एचटीएमएल रिपोर्ट.
लाइटहाउस व्यूअर की मदद से भी, दूसरों के साथ रिपोर्ट शेयर की जा सकती हैं. शेयर आइकॉन पर क्लिक करने से, GitHub में साइन इन हो जाएगा. हम रिपोर्ट को आपके खाते में गुप्त तरीके के रूप में छिपा देते हैं, ताकि आप किसी शेयर की गई रिपोर्ट को आसानी से हटा सकें या बाद में उसे अपडेट कर सकें. डेटा स्टोरेज के लिए GitHub का इस्तेमाल करने का मतलब यह भी है कि आपको वर्शन कंट्रोल मुफ़्त में मिलेगा!
यूआरएल में ?gist=GIST_ID जोड़कर, मौजूदा रिपोर्ट को Lighthouse Viewer के ज़रिए फिर से लोड किया जा सकता है:
लाइटहाउस की नई जानकारी के बारे में ज़्यादा जानने के लिए, GitHub पर पूरे प्रॉडक्ट की जानकारी देखें. हमेशा की तरह, गड़बड़ी की शिकायत करने, सुविधा के लिए अनुरोध करने या सुविधाओं के बारे में सोच-विचार करने के लिए, हमें बताएं. इसके अलावा, उन आइडिया पर सोच-विचार करें कि आपको आगे क्या देखना है.