Lighthouse अब परफ़ॉर्मेंस बजट के साथ काम करता है. LightWallet के नाम से मशहूर इस सुविधा को पांच मिनट के अंदर सेट अप किया जा सकता है. इससे परफ़ॉर्मेंस मेट्रिक के साथ-साथ, पेज पर मौजूद संसाधनों के साइज़ और संख्या के बारे में सुझाव, राय या शिकायत मिलती है.
लाइटहाउस इंस्टॉल करें
LightWallet, लाइटहाउस v5+ के कमांड-लाइन वर्शन में उपलब्ध है.
शुरू करने के लिए, लाइटहाउस इंस्टॉल करें:
npm install -g lighthouse
एक बजट बनाएँ
budget.json नाम की फ़ाइल बनाएं. इस फ़ाइल में, यह JSON जोड़ें:
[
{
"path": "/*",
"timings": [
{
"metric": "interactive",
"budget": 3000
},
{
"metric": "first-meaningful-paint",
"budget": 1000
}
],
"resourceSizes": [
{
"resourceType": "script",
"budget": 125
},
{
"resourceType": "total",
"budget": 300
}
],
"resourceCounts": [
{
"resourceType": "third-party",
"budget": 10
}
]
}
]
इस उदाहरण budget.json फ़ाइल में पांच अलग-अलग बजट सेट किए गए हैं:
- टाइम टू इंटरैक्टिव के लिए 3000ms का बजट.
- फ़र्स्ट मीनिंगफ़ुल पेंट के लिए 1,000 मि॰से॰ का बजट
- पेज पर JavaScript की कुल मात्रा के लिए बजट 125 केबी.
- पेज के कुल साइज़ के लिए बजट 300 केबी.
- तीसरे पक्ष से मिले अनुरोधों की संख्या के लिए 10 अनुरोधों का बजट.
इस्तेमाल की जा सकने वाली परफ़ॉर्मेंस मेट्रिक और अलग-अलग तरह के संसाधनों की पूरी सूची देखने के लिए, लाइटहाउस दस्तावेज़ में मौजूद परफ़ॉर्मेंस बजट सेक्शन देखें.
रन लाइटहाउस
--budget-path फ़्लैग का इस्तेमाल करके लाइटहाउस को चलाएं. यह फ़्लैग, लाइटहाउस को आपकी बजट फ़ाइल की जगह के बारे में बताता है.
lighthouse https://example.com --budget-path=./budget.json
नतीजे देखें
अगर लाइटहाउस को सही तरीके से कॉन्फ़िगर किया गया है, तो लाइटहाउस रिपोर्ट में परफ़ॉर्मेंस कैटगरी में बजट सेक्शन शामिल होगा.
लाइटहाउस रिपोर्ट के JSON वर्शन में, Lightwallet के नतीजे performance-budget ऑडिट के लिए ऑडिट के नतीजों में देखे जा सकते हैं.