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

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

Lighthouse 8.4, कमांड लाइन और Chrome कैनरी में तुरंत उपलब्ध हो जाता है. यह, Chrome 95 में Chrome स्टेबल वर्शन में उपलब्ध होगा और एक हफ़्ते के अंदर, PageSpeed Insights में उपलब्ध हो जाएगा.

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

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

8.4 बदलाव लॉग में, बदलावों की पूरी सूची देखें.

नए ऑडिट

सबसे बड़े कॉन्टेंटफ़ुल पेंट वाली इमेज को लेज़ी-लोड न करें

लेज़ी लोड होने वाली इमेज, ऑफ़स्क्रीन इमेज को कुछ समय के लिए रोकने का असरदार तरीका हो सकती है. इससे, पेज के ऊपरी हिस्से में मौजूद कॉन्टेंट को लोड होने में कोई रुकावट नहीं आएगी.

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

लाइटहाउस रिपोर्ट में लेज़ी-लोडेड एलसीपी ऑडिट

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

ज़्यादा जानकारी के लिए, शुरुआती प्रस्ताव और लागू करने का अनुरोध देखें.

फ़र्स्ट इनपुट डिले को बेहतर बनाने के लिए, मोबाइल व्यूपोर्ट सेट करें

viewport ऑडिट सालों से, सबसे सही तरीकों की कैटगरी का हिस्सा रहा है. हालांकि, परफ़ॉर्मेंस कैटगरी में भी इस सलाह को 8.4 में शामिल किया गया है.

कई मोबाइल ब्राउज़र "ज़ूम करने के लिए दो बार टैप करें" की सुविधा देते हैं. इससे उपयोगकर्ता, उस कॉन्टेंट को आसानी से बड़ा कर सकते हैं जिसे मोबाइल स्क्रीन के लिए डिज़ाइन नहीं किया गया है. इसका मतलब है कि बिना किसी साफ़ मोबाइल <meta name="viewport"> वाले कॉन्टेंट को बड़ा करके देखा जा सकता है. इसका मतलब है कि ब्राउज़र को उपयोगकर्ता के टैप करने के बाद, 300 मि॰से॰ तक इंतज़ार करना होगा. इससे, यह पता चल जाएगा कि दूसरा टैप करने के बाद दूसरा टैप होगा या नहीं. साथ ही, इस दौरान पेज शुरुआती टैप का जवाब नहीं दे सकता. इसका मतलब है, कई सौ मिलीसेकंड के फ़ेल हुए एफ़आईडी.

लाइटहाउस रिपोर्ट में मोबाइल-व्यूपोर्ट ऑडिट

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

<meta name="viewport" content="width=device-width">

ज़्यादा जानकारी के लिए, प्रपोज़ल समस्या और पुल का अनुरोध लागू करने का अनुरोध देखें.

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

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

  • किसी समस्या की शिकायत करें या Lighthouse GitHub रेपो का इस्तेमाल करके, सुझाव, शिकायत या राय सबमिट करें.
  • Twitter पर लाइटहाउस टीम से संपर्क करें @____lighthouse.