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

नई मेट्रिक, परफ़ॉर्मेंस स्कोर के बारे में अपडेट, नए ऑडिट वगैरह.

Connor Clark

आज हम लाइटहाउस 6.0 रिलीज़ कर रहे हैं!

Lighthouse अपने-आप काम करने वाला वेबसाइट ऑडिट करने वाला टूल है, जो डेवलपर को अपनी साइटों पर उपयोगकर्ता अनुभव को बेहतर बनाने के अवसर और गड़बड़ी की जानकारी पाने में मदद करता है. यह Chrome DevTools, npm (नोड मॉड्यूल और सीएलआई) या ब्राउज़र एक्सटेंशन के तौर पर (Chrome और Firefox में) उपलब्ध है. इससे Google की कई सेवाएं काम करती हैं. जैसे, web.dev/measure और PageSpeed Insights.

Lighthouse 6.0, एनपीएम और Chrome कैनरी में तुरंत उपलब्ध है. Lighthouse का इस्तेमाल करने वाली अन्य Google सेवाओं को महीने के आखिर तक अपडेट मिल जाएगा. यह Chrome 84 में (जुलाई के आस-पास) Chrome स्टेबल वर्शन में उपलब्ध होगा.

लाइटहाउस नोड सीएलआई को आज़माने के लिए, नीचे दिए गए निर्देशों का इस्तेमाल करें: bash npm install -g lighthouse lighthouse https://www.example.com --view

Lighthouse के इस वर्शन में कई बदलाव किए जाते हैं, जिन्हें 6.0 चेंजलॉग में शामिल किया गया है. हम इस लेख में हाइलाइट के बारे में बताएंगे.

• नई मेट्रिक
• परफ़ॉर्मेंस स्कोर से जुड़ा अपडेट
• नए ऑडिट
• लाइटहाउस सीआई
• Chrome DevTools पैनल का नाम बदला गया
• मोबाइल एम्युलेशन
• ब्राउज़र एक्सटेंशन
• बजट
• सोर्स लोकेशन के लिंक
• उम्मीद के मुताबिक
• धन्यवाद!

नई मेट्रिक

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

सबसे बड़ा कॉन्टेंटफ़ुल पेंट (एलसीपी)

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

ज़्यादा जानकारी के लिए, पॉल आयरिश के एलसीपी पर यह खास जानकारी देखें.

कुल लेआउट शिफ़्ट (सीएलएस)

कुल लेआउट शिफ़्ट (सीएलएस) से, विज़ुअल स्टैबिलिटी का पता चलता है. इससे यह पता चलता है कि किसी पेज का कॉन्टेंट, विज़ुअल तौर पर कितना बदल गया है. सीएलएस स्कोर कम होने से डेवलपर को पता चलता है कि उनके उपयोगकर्ताओं को कॉन्टेंट में गलत बदलावों का सामना नहीं करना पड़ रहा है. वहीं, 0.10 से कम होने पर डेवलपर के लिए सीएलएस स्कोर को 'अच्छा' माना जाता है.

लैब एनवायरमेंट में सीएलएस को पेज लोड के आखिर में मेज़र किया जाता है. फ़ील्ड में, सीएलएस को पहले उपयोगकर्ता के इंटरैक्शन तक या सभी उपयोगकर्ताओं के इनपुट को शामिल किया जा सकता है.

ज़्यादा जानकारी के लिए, ऐनी सुलिवन की सीएलएस पर यह गहन जानकारी देखें.

टोटल ब्लॉकिंग टाइम (टीबीटी)

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

इसके अलावा, TBT, फ़र्स्ट इनपुट डिले (एफ़आईडी) फ़ील्ड मेट्रिक के साथ मिलकर काम करता है. यह वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देता है.

परफ़ॉर्मेंस स्कोर का अपडेट

लाइटहाउस में परफ़ॉर्मेंस स्कोर का हिसाब लगाने के लिए, कई मेट्रिक के वेट ब्लेंड का इस्तेमाल किया जाता है. इस ब्लेंड में, किसी पेज की स्पीड के बारे में खास जानकारी दी जाती है. 6.0 प्रदर्शन स्कोर फ़ॉर्मूला इस तरह तैयार किया जाता है.

चरण	मेट्रिक का नाम	मेट्रिक का वज़न
तय समय से पहले (15%)	First Contentful Paint (FCP)	15%
मध्यम (40%)	स्पीड इंडेक्स (SI)	15%
	सबसे बड़ा कॉन्टेंटफ़ुल पेंट (एलसीपी)	25%
देरी से (15%)	टाइम टू इंटरैक्टिव (टीटीआई)	15%
मुख्य थ्रेड (25%)	टोटल ब्लॉकिंग टाइम (टीबीटी)	25%
अनुमान लगाने की क्षमता (5%)	कुल लेआउट शिफ़्ट (सीएलएस)	5%

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

तुलना के लिए, यहां वर्शन 5 की स्कोरिंग दी गई है:

चरण	मेट्रिक का नाम	वज़न
तय समय से पहले (23%)	First Contentful Paint (FCP)	23%
मध्यम (34%)	स्पीड इंडेक्स (SI)	27%
	फ़र्स्ट मीनिंगफ़ुल पेंट (एफ़एमपी)	7%
पूरा हो गया (46%)	टाइम टू इंटरैक्टिव (टीटीआई)	33%
	पहला सीपीयू (CPU) इस्तेमाल नहीं किया जा रहा (एफ़सीआई)	13% से ज़्यादा हुई
मुख्य थ्रेड	ज़्यादा से ज़्यादा संभावित एफ़आईडी	0%

लाइटहाउस वर्शन 5 और 6 के बीच स्कोर में होने वाले बदलावों के कुछ हाइलाइट:

• टीटीआई का वज़न 33% से घटाकर 15%कर दिया गया है. यह, टीटीआई में उतार-चढ़ाव के बारे में उपयोगकर्ता से मिले सुझाव, शिकायत या राय के सीधे तौर पर जवाब देने के लिए था. साथ ही, मेट्रिक ऑप्टिमाइज़ेशन में अंतर की वजह से, उपयोगकर्ता अनुभव को बेहतर बनाया गया. अगर कोई पेज पूरी तरह से इंटरैक्टिव है, तो टीटीआई उसकी मदद से काम करता है. हालांकि, इसके पूरक के तौर पर TBT का बदलाव कम हो जाता है. हमें उम्मीद है कि स्कोर में हुए इस बदलाव के बाद, डेवलपर को उपयोगकर्ता से इंटरैक्शन को ऑप्टिमाइज़ करने के लिए ज़्यादा बढ़ावा मिलेगा.
• एफ़सीपी को 23% से घटाकर 15% किया गया. सिर्फ़ पहले पिक्सल को पेंट (एफ़सीपी) किए जाने के बाद ही मापने से हमें पूरी जानकारी नहीं मिलती. इसे मापने के साथ एक बार, लोड होने के अनुभव को बेहतर तरीके से समझा जा सकता है. इससे, उपयोगकर्ता यह देख पाते हैं कि वे किस चीज़ में दिलचस्पी रखते हैं (एलसीपी).
• ज़्यादा से ज़्यादा संभावित एफ़आईडी को बंद कर दिया गया है. यह अब रिपोर्ट में नहीं दिखता, लेकिन जेएसओएन में अब भी उपलब्ध है. हमारा सुझाव है कि आप mpFID के बजाय अपनी इंटरैक्टिविटी को मापने के लिए, TBT को देखें.
• फ़र्स्ट मीनिंगफ़ुल पेंट को हटा दिया गया है. यह मेट्रिक बहुत ज़्यादा वैरिएंट थी और इसमें स्टैंडर्ड तय करने का कोई कारगर तरीका नहीं था, क्योंकि इसे Chrome रेंडरिंग इंटरनल के लिए लागू किया जाता है. कुछ टीमों को उनकी साइट पर एफ़एमपी टाइमिंग सही लगती है, लेकिन मेट्रिक में कोई और सुधार नहीं होगा.
• इस्तेमाल न किए जा रहे पहले सीपीयू की सुविधा अब काम नहीं करती, क्योंकि यह टीटीआई से काफ़ी अलग नहीं है. TBT और TTI अब इंटरैक्टिविटी के लिए सबसे पसंदीदा मेट्रिक हैं.
• सीएलएस का वज़न तुलनात्मक रूप से कम है. हालांकि, हमें उम्मीद है कि आने वाले समय के मुख्य वर्शन में इसमें बढ़ोतरी होगी.

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

ये बदलाव, असल साइटों के स्कोर पर कैसे असर डालते हैं? हमने दो डेटासेट का इस्तेमाल करके, स्कोर में हुए बदलावों का एक विश्लेषण पब्लिश किया है: साइटों का सामान्य सेट और Eleventy की मदद से बनाई गई स्टैटिक साइटों का सेट. सारांश में, ~20% साइटों को काफ़ी ज़्यादा स्कोर मिले हैं, ~30% में शायद ही कोई बदलाव हुआ है, और करीब 50% साइटों को कम से कम पांच पॉइंट की कमी मिली है.

स्कोर में हुए बदलावों को तीन मुख्य कॉम्पोनेंट में बांटा जा सकता है:

• स्कोर के वज़न में हुए बदलाव
• मेट्रिक को लागू करने के तरीके की गड़बड़ियां ठीक की गईं
• व्यक्तिगत स्कोर कर्व में बदलाव

स्कोर के वज़न में बदलाव और तीन नई मेट्रिक के आने से, स्कोर में ज़्यादातर बदलाव हुए. ऐसी नई मेट्रिक जिन्हें डेवलपर ने अभी तक वर्शन 6 के परफ़ॉर्मेंस स्कोर में शामिल करने के लिए ऑप्टिमाइज़ नहीं किया है. वर्शन 5 में टेस्ट कॉर्पस का औसत परफ़ॉर्मेंस स्कोर करीब 50 था, लेकिन नए टोटल ब्लॉकिंग टाइम और सबसे बड़े एलिमेंट को रेंडर करने में लगने वाले समय की मेट्रिक का औसत स्कोर 30 के करीब था. इन दो मेट्रिक को मिलाकर, लाइटहाउस वर्शन 6 के परफ़ॉर्मेंस स्कोर में 50% वेट दर्ज होता है. इसलिए, स्वाभाविक रूप से, साइटों के एक बड़े प्रतिशत में गिरावट आई है.

मौजूदा मेट्रिक की गिनती में गड़बड़ियों को ठीक करने से, अलग-अलग स्कोर मिल सकते हैं. इसका असर कुछ ही साइटों पर पड़ता है, लेकिन कुछ मामलों में इसका बड़ा असर हो सकता है. मेट्रिक लागू करने में बदलाव की वजह से करीब 8% साइटों के स्कोर में सुधार हुआ और मेट्रिक लागू करने के बदलावों की वजह से, करीब 4% साइटों के स्कोर में कमी आई. करीब 88% साइटों पर, इन सुधारों का कोई असर नहीं पड़ा.

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

स्कोरिंग कैलकुलेटर

हमने एक स्कोरिंग कैलकुलेटर पब्लिश किया है, ताकि आप परफ़ॉर्मेंस स्कोरिंग के बारे में ज़्यादा जान सकें. इस कैलकुलेटर से आपको Lighthouse के वर्शन 5 और 6 के स्कोर के बीच तुलना भी मिलती है. जब लाइटहाउस 6.0 का इस्तेमाल करके ऑडिट किया जाता है, तो रिपोर्ट में कैलकुलेटर का एक लिंक दिखता है. इससे नतीजे में अपने-आप जानकारी भर जाती है.

गेज अपग्रेड करने के लिए, Ana Tudor को धन्यवाद!

नए ऑडिट

इस्तेमाल नहीं किया गया JavaScript

हम एक नए ऑडिट में DevTool कोड कवरेज का इस्तेमाल कर रहे हैं: Unused JavaScript.

यह ऑडिट पूरी तरह से नया नहीं है: इसे 2017 के मध्य में जोड़ा गया था. हालांकि, परफ़ॉर्मेंस ओवरहेड की वजह से इसे डिफ़ॉल्ट रूप से बंद कर दिया गया था, ताकि लाइटहाउस को जितना हो सके उतना तेज़ी से रखा जा सके. इस कवरेज डेटा को इकट्ठा करना अब पहले से ज़्यादा बेहतर हो गया है, इसलिए हमें इसे डिफ़ॉल्ट रूप से चालू करने में कोई परेशानी नहीं है.

सुलभता ऑडिट

सुलभता कैटगरी को बेहतर बनाने के लिए लाइटहाउस, शानदार ऐक्सिस-कोर लाइब्रेरी का इस्तेमाल करता है. लाइटहाउस 6.0 में, हमने ये ऑडिट जोड़े हैं:

• aria-hidden-body
• aria-छिपा हुआ फ़ोकस
• aria-input-field-name
• aria-toggle-field-name
• form-field-multiple-labels
• heading-order
• डुप्लीकेट आईडी चालू
• डुप्लीकेट आईडी आरिया

मास्क किए जा सकने वाले आइकॉन का आइकॉन

मास्केबल आइकॉन, आइकॉन का एक नया फ़ॉर्मैट है. इससे आपके PWA के आइकॉन, सभी तरह के डिवाइसों पर शानदार दिखते हैं. आपके PWA को ज़्यादा से ज़्यादा बेहतर बनाने में मदद करने के लिए, हमने एक नया ऑडिट शुरू किया है. इससे यह पता चलेगा कि आपका Manifest.json, इस नए फ़ॉर्मैट के साथ काम करता है या नहीं.

वर्णसेट का एलान

मेटा वर्णसेट एलिमेंट यह बताता है कि किसी एचटीएमएल दस्तावेज़ को समझने के लिए, किस कैरेक्टर एन्कोडिंग का इस्तेमाल किया जाना चाहिए. अगर यह एलिमेंट मौजूद नहीं है या अगर दस्तावेज़ में इसके बारे में देर से बताया गया है, तो ब्राउज़र कई तरीकों से यह अनुमान लगाते हैं कि किस एन्कोडिंग का इस्तेमाल किया जाना चाहिए. अगर कोई ब्राउज़र गलत अनुमान लगाता है और देर से काम करने वाला मेटा वर्णसेट एलिमेंट मिलता है, तो पार्सर आम तौर पर अब तक किया गया पूरा काम अलग से करके फिर से शुरू कर देता है. इससे उपयोगकर्ता को खराब अनुभव मिलता है. यह नया ऑडिट इस बात की पुष्टि करता है कि पेज में कैरेक्टर को कोड में बदलने का मान्य तरीका है या नहीं और इसे पहले और ऊपर की ओर दिखाया गया है.

लाइटहाउस सीआई

पिछले नवंबर में सीडीएस में हमने Lighthouse CI लॉन्च किया था. यह ओपन सोर्स नोड सीएलआई और सर्वर है, जो लगातार इंटिग्रेशन वाले पाइपलाइन में हर प्रतिबद्धता पर लाइटहाउस नतीजों को ट्रैक करता है. ऐल्फ़ा वर्शन के रिलीज़ होने के बाद से अब तक हमने इसमें काफ़ी बदलाव किए हैं. Lighthouse CI, अब कई सीआई की सेवा देने वाली कंपनियों की मदद ले सकता है. जैसे, Travis, Circle, GitLab, और GitHub Actions. डिप्लॉय करने के लिए तैयार डॉकर इमेज, सेटअप को बेहद आसान बना देती हैं. डैशबोर्ड के डिज़ाइन को बेहतर तरीके से डिज़ाइन करने से, अब लाइटहाउस में हर कैटगरी और मेट्रिक के ट्रेंड दिखते हैं, ताकि उनका बेहतर विश्लेषण किया जा सके.

शुरुआती निर्देश अपनाकर, अपने प्रोजेक्ट पर आज ही Lighthouse CI का इस्तेमाल शुरू करें.

Chrome DevTools पैनल का नाम बदला गया

हमने ऑडिट पैनल का नाम बदलकर लाइटहाउस पैनल कर दिया है. काफ़ी कहा!

आपकी DevTools विंडो के साइज़ के हिसाब से, शायद पैनल » बटन के पीछे है. क्रम बदलने के लिए, टैब को खींचें और छोड़ें.

कमांड मेन्यू की मदद से पैनल को तुरंत दिखाने के लिए:

1. DevTools खोलने के लिए, `Control+Shift+J` (या Mac पर `Command+Option+J`) दबाएं.
2. Command मेन्यू खोलने के लिए Control+Shift+P (या Mac पर Command+Shift+P) दबाएं.
3. "Lighthouse" टाइप करना शुरू करें.
4. Enter दबाएं.

मोबाइल एम्युलेशन

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

• धीमे नेटवर्क और सीपीयू की स्थितियों की नकल (Lantern नाम के सिम्युलेशन इंजन की मदद से).
• डिवाइस स्क्रीन एम्युलेशन (यह Chrome DevTools में मिलता है).

शुरुआत से ही लाइटहाउस ने Nexus 5X को अपने रेफ़रंस डिवाइस के तौर पर इस्तेमाल किया है. हाल के सालों में, ज़्यादातर परफ़ॉर्मेंस इंजीनियर टेस्ट के लिए Moto G4 का इस्तेमाल कर रहे हैं. अब लाइटहाउस आपके जैसा दिख रहा है और इसने अपने रेफ़रंस डिवाइस को Moto G4 में बदल दिया है. व्यावहारिक तौर पर, इस बदलाव का ज़्यादा ध्यान नहीं दिया जाता, लेकिन वे सभी बदलाव बताए गए हैं जिनका पता वेबपेज पर लगाया जा सकता है:

• स्क्रीन का साइज़ 412x660 पिक्सल से बदलकर 360x640 पिक्सल कर दिया गया है.
• उपयोगकर्ता एजेंट स्ट्रिंग में थोड़ा बदलाव किया गया है. डिवाइस का जो हिस्सा पहले Nexus 5 Build/MRA58N था वह अब Moto G (4) हो जाएगा.

Chrome 81 से, Moto G4 Chrome DevTools डिवाइस एम्युलेशन सूची में भी उपलब्ध है.

ब्राउज़र एक्सटेंशन

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

Lighthouse को स्थानीय तौर पर चलाने के बजाय, एक्सटेंशन अब PageSpeed Insights API का इस्तेमाल करता है. हम मानते हैं कि यह हमारे कुछ उपयोगकर्ताओं के लिए काफ़ी नहीं होगा. ये मुख्य अंतर हैं:

• PageSpeed Insights गैर-सार्वजनिक वेबसाइटों को ऑडिट नहीं कर सकता, क्योंकि यह किसी रिमोट सर्वर से चलता है, न कि आपके लोकल Chrome इंस्टेंस से. अगर आपको किसी गैर-सार्वजनिक वेबसाइट को ऑडिट करना है, तो DevTools Lighthouse पैनल या नोड सीएलआई का इस्तेमाल करें.
• इस बात की कोई गारंटी नहीं है कि PageSpeed Insights के नए वर्शन का इस्तेमाल किया जाएगा. अगर आपको नए वर्शन का इस्तेमाल करना है, तो नोड सीएलआई का इस्तेमाल करें. ब्राउज़र एक्सटेंशन को रिलीज़ के ~1-2 हफ़्ते के बाद अपडेट मिलेगा.
• PageSpeed Insights एक Google API है, जिसे इस्तेमाल करने का मतलब है कि इसे Google API की सेवा की शर्तों को स्वीकार करना है. अगर आप सेवा की शर्तों को स्वीकार नहीं करना चाहते या स्वीकार नहीं करना चाहते, तो DevTools Lighthouse पैनल या नोड सीएलआई का इस्तेमाल करें.

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

बजट

Lighthouse 5.0 ने परफ़ॉर्मेंस बजट को पेश किया. इसके तहत, हर टाइप के कितने संसाधन (जैसे कि स्क्रिप्ट, इमेज या सीएसएस) दिखाए जा सकते हैं, इसके लिए थ्रेशोल्ड जोड़े जा सकते हैं.

लाइटहाउस 6.0 में, बजट मेट्रिक के लिए सहायता जोड़ी गई है. इससे, अब एफ़सीपी जैसी खास मेट्रिक के लिए थ्रेशोल्ड सेट किया जा सकता है. फ़िलहाल, बजट सिर्फ़ Node सीएलआई और लाइटहाउस सीआई के लिए उपलब्ध है.

स्रोत स्थान लिंक

लाइटहाउस को किसी पेज के बारे में जो कुछ समस्याएं मिलती हैं, उन्हें सोर्स कोड की एक खास लाइन में वापस ट्रेस किया जा सकता है. रिपोर्ट में ठीक वही फ़ाइल और लाइन बताई जाएगी जो काम की है. DevTools में एक्सप्लोर करना आसान बनाने के लिए, रिपोर्ट में बताई गई जगहों पर क्लिक करने से सोर्स पैनल में काम की फ़ाइलें खुल जाएंगी.

DevTools कोड की वह लाइन दिखाता है जिसकी वजह से यह समस्या हुई है.

क्षितिज पर

लाइटहाउस ने सोर्स मैप इकट्ठा करने के साथ प्रयोग करना शुरू कर दिया है, ताकि इन नई सुविधाओं को बेहतर बनाया जा सके:

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

इस्तेमाल नहीं किया गया JavaScript ऑडिट, जिसमें सोर्स मैप का इस्तेमाल किया गया है, ताकि बंडल किए गए खास मॉड्यूल में, इस्तेमाल न किए गए कोड दिखाए जा सकें.

ये सुविधाएं, लाइटहाउस के आने वाले वर्शन में डिफ़ॉल्ट रूप से चालू रहेंगी. फ़िलहाल, यहां दिए गए सीएलआई फ़्लैग के साथ Lighthouse के एक्सपेरिमेंट वाले ऑडिट देखे जा सकते हैं:

lighthouse https://web.dev --view --preset experimental

धन्यवाद!

लाइटहाउस का इस्तेमाल करने और सुझाव देने के लिए धन्यवाद. आपके सुझावों से हमें Lighthouse को बेहतर बनाने में मदद मिलती है. साथ ही, हमें उम्मीद है कि लाइटहाउस 6.0 आपके लिए अपनी वेबसाइटों की परफ़ॉर्मेंस को बेहतर बनाना आसान बना देगा.

अब आपके पास क्या विकल्प है?

• Chrome कैनरी खोलें और Lighthouse पैनल को आज़माएं.
• नोड सीएलआई का इस्तेमाल करें: npm install -g lighthouse && lighthouse https://yoursite.com --view.
• अपने प्रोजेक्ट के साथ Lighthouse CI चलाएं.
• Lighthouse ऑडिट दस्तावेज़ पढ़ें.
• वेब को बेहतर बनाने का आनंद लें!

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