बजट की निगरानी और चेतावनी
अपने निर्धारित प्रदर्शन बजट के भीतर बने रहने के लिए स्वचालित निगरानी और चेतावनी प्रणालियाँ लागू कीजिए।
बजट की निगरानी और चेतावनी, CoddyKit पर वेब प्रदर्शन अनुकूलन और Lighthouse का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह वेब प्रदर्शन अनुकूलन और Lighthouse सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। वेब प्रदर्शन अनुकूलन और Lighthouse पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
प्रदर्शन बजट की निगरानी क्यों करें
आपने प्रदर्शन बजट निर्धारित करना सीख लिया है। लेकिन जैसे-जैसे आपकी वेबसाइट विकसित होती है, आप यह कैसे सुनिश्चित करेंगे कि वह इन सीमाओं के भीतर बनी रहे? यहीं निरंतर निगरानी और अलर्ट काम आते हैं!
निगरानी से आपको मदद मिलती है:
- गिरावट जल्दी पकड़ने में: उपयोगकर्ताओं पर प्रभाव पड़ने से पहले प्रदर्शन में कमी की पहचान करें।
- गुणवत्ता बनाए रखने में: सुनिश्चित करें कि नई सुविधाएँ अनजाने में प्रदर्शन धीमा न करें।
- प्रतिस्पर्धी बने रहने में: उपयोगकर्ताओं की अपेक्षाएँ पूरी करते हुए अपनी साइट को तेज़ और प्रतिक्रियाशील रखें।
हम किसकी निगरानी कर सकते हैं
प्रदर्शन बजट केवल पेज लोड समय तक सीमित नहीं होते। इन्हें आपकी वेबसाइट के विभिन्न पहलुओं पर लागू किया जा सकता है:
- संसाधन आकार: JavaScript, CSS या इमेज बंडल का कुल आकार।
- प्रदर्शन स्कोर: प्रदर्शन, पहुँच-योग्यता आदि के लिए Lighthouse स्कोर।
- मापदंड सीमाएँ: विशिष्ट मुख्य वेब मापदंड, जैसे सबसे बड़ा कंटेंटफुल पेंट (LCP) या संचयी लेआउट शिफ्ट (CLS)।
- अनुरोधों की संख्या: आपके पेज द्वारा किए जाने वाले नेटवर्क अनुरोधों की संख्या।
निरंतर निगरानी से इनकी आपके द्वारा पहले से निर्धारित सीमाओं के साथ तुलना की जा सकती है।
बिल्ड के समय बजट की जाँच
प्रदर्शन बजट की जाँच करने का सबसे शुरुआती अवसर आपके प्रोजेक्ट की बिल्ड प्रक्रिया के दौरान होता है। Webpack जैसे टूल, जो एक लोकप्रिय JavaScript मॉड्यूल बंडलर है, इस तरह कॉन्फ़िगर किए जा सकते हैं कि किसी परिसंपत्ति के आकार का बजट पार होने पर चेतावनी या त्रुटि दिखाई जाए।
इससे बड़ी फाइलें परिनियोजन तक पहुँचने से पहले ही रोक दी जाती हैं और समस्याएँ उपयोगकर्ताओं तक पहुँचने से पहले पकड़ में आ जाती हैं।
Webpack प्रदर्शन संकेत
Webpack आपको अपने कॉन्फ़िगरेशन में performance संकेत निर्धारित करने देता है। यदि आपके बंडल निर्धारित आकार से बड़े हो जाते हैं, तो ये संकेत चेतावनी जारी करेंगे या त्रुटियाँ उत्पन्न करेंगे।
यहाँ webpack.config.js फाइल में एक सरल उदाहरण है:
module.exports = {
// ... other webpack config
performance: {
hints: 'warning', // Can be 'error' or false
maxAssetSize: 200 * 1024, // 200 KiB
maxEntrypointSize: 250 * 1024, // 250 KiB
assetFilter: function(assetFilename) {
return !/(\.map$|^favicon\.ico$)/.test(assetFilename);
}
}
};बजट के लिए निरंतर एकीकरण (CI)
अधिक व्यापक जाँचों के लिए, खासकर Lighthouse स्कोर या मुख्य वेब मापदंडों जैसे मापदंडों के संदर्भ में, आप प्रदर्शन बजट की निगरानी को अपनी निरंतर एकीकरण (CI) पाइपलाइन में एकीकृत कर सकते हैं।
CI पाइपलाइन जब भी बदलाव पुश किए जाते हैं, तब आपके कोड के परीक्षण और बिल्ड अपने-आप चलाती है। प्रदर्शन जाँच जोड़कर आप:
- ऑडिट स्वचालित कर सकते हैं: कोड में हर बदलाव पर Lighthouse या अन्य टूल चलाएँ।
- बिल्ड विफल कर सकते हैं: प्रदर्शन बजट का उल्लंघन होने पर परिनियोजन रोकें।
- तुरंत प्रतिक्रिया पा सकते हैं: डेवलपर अपने पुल अनुरोधों में सीधे प्रदर्शन संबंधी समस्याएँ देख सकते हैं।
Lighthouse CI बजट दावे
Lighthouse CI आपकी CI पाइपलाइन में प्रदर्शन जाँच को एकीकृत करने के लिए एक उत्कृष्ट टूल है। यह आपको विशिष्ट दावे (नियम) निर्धारित करने देता है, जिन्हें आपके Lighthouse ऑडिट परिणामों को पूरा करना आवश्यक होता है।
यदि कोई दावा विफल होता है, तो Lighthouse CI आपके बिल्ड को विफल चिह्नित कर सकता है। इससे सुनिश्चित होता है कि आपका प्रदर्शन आधाररेखा से नीचे न जाए।
यहाँ बताया गया है कि आप .lighthouserc.json फाइल में बजट कैसे निर्धारित कर सकते हैं:
{
"ci": {
"collect": {
"url": "http://localhost:8080"
},
"assert": {
"assertions": {
"performance-score": ["error", {"minScore": 0.90}],
"interactive": ["error", {"maxNumericValue": 3000}],
"total-blocking-time": ["warn", {"maxNumericValue": 200}]
},
"budgets": [{
"resourceSizes": [
{"resourceType": "script", "budget": 170},
{"resourceType": "image", "budget": 250}
],
"resourceCounts": [
{"resourceType": "script", "budget": 10}
]
}]
}
}
}अलर्ट के प्रकार
जब प्रदर्शन बजट पार हो जाए, तो आपको इसकी जानकारी होना आवश्यक है! अलर्ट कई रूपों में हो सकते हैं:
- बिल्ड विफलता: सबसे सीधा अलर्ट, जो समस्या ठीक होने तक परिनियोजन रोक देता है।
- सूचनाएँ: टीम के संचार चैनलों (Slack, Microsoft Teams) पर भेजे गए संदेश।
- ईमेल रिपोर्ट: विशेष व्यक्तियों या मेलिंग सूचियों को भेजे गए विस्तृत सारांश।
- डैशबोर्ड चेतावनियाँ: निगरानी डैशबोर्ड पर दिखने वाले संकेतक।
उद्देश्य यह है कि प्रदर्शन संबंधी समस्याएँ आपकी टीम को स्पष्ट रूप से दिखाई दें और उन पर कार्रवाई की जा सके।
सूचना चैनल सेट अप करना
कई CI/CD प्लेटफ़ॉर्म और निगरानी उपकरण लोकप्रिय संचार सेवाओं के साथ एकीकरण प्रदान करते हैं। उदाहरण के लिए, यदि आपका Lighthouse CI ऑडिट विफल हो जाता है, तो आप अपनी पाइपलाइन को इस प्रकार कॉन्फ़िगर कर सकते हैं:
- Slack चैनल पर संदेश पोस्ट करना।
- विकास टीम को ईमेल भेजना।
- Jira जैसे परियोजना प्रबंधन उपकरण में समस्या बनाना।
ये एकीकरण सुनिश्चित करते हैं कि बजट पार होते ही सही लोगों को तुरंत जानकारी मिल जाए।
वास्तविक उपयोगकर्ता निगरानी (RUM) अलर्ट
बिल्ड-समय और CI जाँचें सक्रिय रूप से समस्याओं को रोकती हैं, जबकि वास्तविक उपयोगकर्ता निगरानी (RUM) वास्तविक उपयोगकर्ता अनुभवों की जानकारी देती है। RUM उपकरण प्रदर्शन संबंधी डेटा सीधे आपके उपयोगकर्ताओं के ब्राउज़र से एकत्र करते हैं।
आप इन स्थितियों के लिए RUM अलर्ट सेट कर सकते हैं:
- मुख्य वेब मेट्रिक्स: यदि उपयोगकर्ताओं के किसी निश्चित प्रतिशत को आपके निर्धारित स्तरों से अधिक LCP या CLS का अनुभव हो, तो अलर्ट पाएँ।
- त्रुटि दर: यदि JavaScript त्रुटियाँ अचानक बढ़ जाएँ और प्रदर्शन प्रभावित होने की आशंका हो, तो सूचना पाएँ।
- भौगोलिक प्रदर्शन: यदि किसी विशेष क्षेत्र के उपयोगकर्ताओं को पृष्ठ लोड होने में अधिक समय लगे, तो अलर्ट पाएँ।
RUM अलर्ट आपको वास्तविक परिस्थितियों में प्रदर्शन में आई गिरावट पर प्रतिक्रिया देने में सहायता करते हैं।
त्वरित जाँच: बजट की निगरानी
प्रदर्शन बजट के उल्लंघनों की निगरानी करने और उनके बारे में अलर्ट पाने के प्रभावी तरीके निम्नलिखित में से कौन-से हैं?
पुनरावलोकन: बजट के भीतर रहना
बहुत अच्छा! आपने सीखा कि वेब प्रदर्शन बनाए रखने के लिए निरंतर निगरानी और अलर्ट कितने महत्वपूर्ण हैं।
- हमने देखा कि Webpack जैसे बिल्ड उपकरण आकार संबंधी बजट कैसे लागू कर सकते हैं।
- हमने देखा कि CI/CD पाइपलाइन, विशेष रूप से Lighthouse CI जैसे उपकरणों के साथ, जाँचों को स्वचालित करती हैं और बजट पार होने पर बिल्ड विफल कर देती हैं।
- हमने बिल्ड विफलताओं से लेकर सूचनाओं तक, विभिन्न अलर्ट तंत्रों पर चर्चा की।
- अंत में, हमने वास्तविक परिस्थितियों में प्रदर्शन संबंधी अलर्ट के लिए वास्तविक उपयोगकर्ता निगरानी (RUM) के बारे में जाना।
इन रणनीतियों को लागू करके आप सुनिश्चित कर सकते हैं कि आपकी वेबसाइट लगातार अपने प्रदर्शन लक्ष्यों को पूरा करे।
एआई शिक्षक के साथ वेब प्रदर्शन अनुकूलन और Lighthouse सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 12
- पाठ
- 48
अक्सर पूछे जाने वाले प्रश्न
क्या “बजट की निगरानी और चेतावनी” पाठ निःशुल्क है?
हाँ—“बजट की निगरानी और चेतावनी” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और वेब प्रदर्शन अनुकूलन और Lighthouse पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। वेब प्रदर्शन अनुकूलन और Lighthouse पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“बजट की निगरानी और चेतावनी” में मैं क्या सीखूँगा?
अपने निर्धारित प्रदर्शन बजट के भीतर बने रहने के लिए स्वचालित निगरानी और चेतावनी प्रणालियाँ लागू कीजिए। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ वेब प्रदर्शन अनुकूलन और Lighthouse का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या वेब प्रदर्शन अनुकूलन और Lighthouse शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर वेब प्रदर्शन अनुकूलन और Lighthouse शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 2वाँ पाठ है।
“बजट की निगरानी और चेतावनी” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस वेब प्रदर्शन अनुकूलन और Lighthouse पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर वेब प्रदर्शन अनुकूलन और Lighthouse पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- प्रदर्शन बजट निर्धारित करना
- बजट की निगरानी और चेतावनी
- उभरती प्रदर्शन तकनीकें
- हितधारकों तक प्रदर्शन की जानकारी पहुँचाना