Lighthouse, अब परफ़ॉर्मेंस बजट के साथ काम करता है. LightWallet के नाम से जानी जाने वाली इस सुविधा को सेट अप करने में पांच मिनट से कम समय लगता है. साथ ही, इससे परफ़ॉर्मेंस मेट्रिक के साथ-साथ पेज रिसॉर्स के साइज़ और संख्या के बारे में सुझाव, शिकायत या राय मिलती है.
लाइटहाउस इंस्टॉल करें
LightWallet की सुविधा, Lighthouse 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 फ़ाइल पांच अलग-अलग बजट सेट करती है:
- टाइम टू इंटरैक्टिव के लिए 3,000 मिलीसेकंड का बजट.
- पहले मायने रखने वाले पेंट के लिए 1,000 मिलीसेकंड का बजट
- पेज पर JavaScript की कुल मात्रा के लिए 125 KB का बजट.
- पेज का कुल साइज़ 300 केबी का बजट.
- तीसरे पक्ष के ऑरिजिन को किए गए अनुरोधों की संख्या के लिए, 10 अनुरोधों का बजट.
इस्तेमाल की जा सकने वाली परफ़ॉर्मेंस मेट्रिक और रिसॉर्स टाइप की पूरी सूची देखने के लिए, Lighthouse दस्तावेज़ों के परफ़ॉर्मेंस बजट सेक्शन पर जाएं.
लाइटहाउस चलाएं
--budget-path फ़्लैग का इस्तेमाल करके लाइटहाउस चलाएं. यह फ़्लैग, लाइटहाउस को आपकी बजट फ़ाइल की जगह के बारे में बताता है.
lighthouse https://example.com --budget-path=./budget.json
नतीजे देखें
अगर LightWallet को सही तरीके से कॉन्फ़िगर किया गया है, तो लाइटहाउस रिपोर्ट में परफ़ॉर्मेंस कैटगरी में मौजूद बजट सेक्शन शामिल होगा.
Lighthouse रिपोर्ट के JSON वर्शन में, Lightwallet के नतीजे, performance-budget ऑडिट के ऑडिट के नतीजों में मिल सकते हैं.