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