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

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

Connor Clark
Connor Clark

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

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

लाइटहाउस 6.0 तुरंत एनपीएम पर और Chrome में उपलब्ध है कैनरी. लाइटहाउस का फ़ायदा उठाने वाली Google की दूसरी सेवाएं महीने के आखिर तक अपडेट मिल जाएं. यह सुविधा Chrome 84 में 'Chrome स्टेबल चैनल' (जुलाई के मध्य में) में उपलब्ध होगी.

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

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

नई मेट्रिक

लाइटहाउस 6.0 मेट्रिक.

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

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

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

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

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

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

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

ज़्यादा जानकारी के लिए, ऐनी सलिवन की सीएलएस के बारे में पूरी जानकारी देखें.

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

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

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

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

Lighthouse में परफ़ॉर्मेंस स्कोर का हिसाब पेज की स्पीड के बारे में खास जानकारी देने के लिए, अलग-अलग मेट्रिक के डेटा को ब्लेंड करने की सुविधा. 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 के बीच बदल गया है.

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

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

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

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

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

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

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

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

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

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

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

लाइटहाउस स्कोर कैलकुलेटर.
गेज अपग्रेड करने के लिए एना ट्यूडर को बहुत-बहुत धन्यवाद!

नए ऑडिट

इस्तेमाल न की गई JavaScript

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

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

सुलभता ऑडिट

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

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

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

चारसेट का एलान

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

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

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

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

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

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

हमने ऑडिट पैनल का नाम बदलकर लाइटहाउस पैनल कर दिया है. बहुत हो गया!

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

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

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

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

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

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

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

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

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

Chrome DevTools डिवाइस के एम्युलेशन की सूची में Moto G4 भी शामिल है.

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

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

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

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

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

बजट

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

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

सोर्स लोकेशन लिंक

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

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

क्षितिज पर

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

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

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

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

धन्यवाद!

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

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

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

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