निजी, कारोबार या परिवार के लिए बजट सेट करने का मतलब है कि आप अपने खर्च की सीमा तय कर रहे हैं. साथ ही, पक्का कर रहे हैं कि आप उसके दायरे में रहें. परफ़ॉर्मेंस बजट भी इसी तरह से काम करते हैं. हालांकि, उन मेट्रिक के लिए जो वेबसाइट की परफ़ॉर्मेंस पर असर डालती हैं.
परफ़ॉर्मेंस बजट तय और लागू करके, यह पक्का किया जा सकता है कि आपकी साइट जल्द से जल्द रेंडर हो जाएगी. इससे आपकी वेबसाइट पर आने वाले लोगों को बेहतर अनुभव मिलेगा. साथ ही, कारोबार की मेट्रिक पर भी बेहतर असर पड़ेगा.
यहां कुछ आसान चरणों में, अपना पहला परफ़ॉर्मेंस बजट तय करने का तरीका बताया गया है.
शुरुआती विश्लेषण
अगर आपको किसी मौजूदा साइट की परफ़ॉर्मेंस को बेहतर बनाने की कोशिश करनी है, तो सबसे पहले सबसे अहम पेजों की पहचान करें. उदाहरण के लिए, इन पेजों पर सबसे ज़्यादा उपयोगकर्ता ट्रैफ़िक या प्रॉडक्ट का लैंडिंग पेज हो सकता है.
अपने मुख्य पेजों की पहचान करने के बाद, अब उनका विश्लेषण करें. सबसे पहले, हम टाइमिंग माइलस्टोन पर फ़ोकस करेंगे. इनसे उपयोगकर्ता अनुभव को बेहतर तरीके से मेज़र किया जा सकता है.
Chrome DevTools के ऑडिट पैनल में आपको Lighthouse दिखेगा. इन्हें दो बार रिकॉर्ड करने के लिए, मेहमान विंडो में हर पेज पर ऑडिट चलाएं:
आइए, एक बेहद खास सर्च इंजन, Doggos.com का उदाहरण लेते हैं. Doggos.com का मकसद इंटरनेट पर, कुत्तों से जुड़ी सभी चीज़ों को इंडेक्स करना है. इसके सबसे अहम पेज, होम और नतीजे दिखाने वाले पेज हैं. यहां साइट के लिए डेस्कटॉप और मोबाइल पर मापे गए एफ़सीपी और टीटीआई नंबर दिए गए हैं.
| डेस्कटॉप | एफ़सीपी | टीटीआई |
|---|---|---|
| होम पेज | 1,680 मि॰से॰ | 5,550 मि॰से॰ |
| नतीजों का पेज | 2,060 मि॰से॰ | 6,690 मि॰से॰ |
| मोबाइल | एफ़सीपी | टीटीआई |
|---|---|---|
| होम पेज | 1,800 मि॰से॰ | 6,150 मि॰से॰ |
| नतीजों का पेज | 1,100 मि॰से॰ | 7,870 मि॰से॰ |
प्रतिस्पर्धी विश्लेषण
अपनी साइट का विश्लेषण करने के बाद, अपने प्रतिस्पर्धियों की साइटों का विश्लेषण करें. अपनी वेबसाइट से मिलती-जुलती वेबसाइटों के नतीजों की तुलना करना, परफ़ॉर्मेंस बजट का पता लगाने का एक बेहतरीन तरीका है. यह एक ज़रूरी चरण है, फिर चाहे आप पहले से मौजूद किसी प्रोजेक्ट पर काम कर रहे हों या नए सिरे से शुरुआत कर रहे हों. जब आप अपने प्रतिस्पर्धियों से तेज़ होते हैं, तो आपको मुकाबले में फ़ायदा मिलता है.
अगर आपको नहीं पता कि किन साइटों को देखना है, तो यहां दिए गए टूल का इस्तेमाल करें:
- Google Search का "related:" कीवर्ड
- Alexa से मिलती-जुलती साइटें सुविधा
- SimilarWeb
एक वास्तविक तस्वीर के लिए, 10 या उससे ज़्यादा प्रतिस्पर्धियों को ढूंढने की कोशिश करें.
टाइमिंग माइलस्टोन के लिए बजट
इस उदाहरण में, खास तरह के सर्च इंजन से जुड़ी कुछ कंपनियों की मदद ली गई है. हम मोबाइल डिवाइसों के लिए होम पेज को ऑप्टिमाइज़ करने पर फ़ोकस करेंगे. आज आधा से ज़्यादा इंटरनेट ट्रैफ़िक मोबाइल नेटवर्क पर आता है और डिफ़ॉल्ट रूप से मोबाइल नंबर का इस्तेमाल करने से न सिर्फ़ आपके मोबाइल उपयोगकर्ताओं को, बल्कि आपके डेस्कटॉप उपयोगकर्ताओं को भी फ़ायदा होगा.
एक जैसी सभी वेबसाइटों के लिए, एफ़सीपी और टीटीआई समय का इस्तेमाल करके एक चार्ट बनाएं और सबसे ज़्यादा तेज़ी से काम करने वाली वेबसाइटों को हाइलाइट करें. इस तरह के चार्ट से आपको पता चलता है कि मुकाबले की तुलना में आपकी वेबसाइट कैसा परफ़ॉर्म कर रही है.
| साइट/होम पेज | एफ़सीपी | टीटीआई |
|---|---|---|
| goggles.com | 880 मि॰से॰ | 3,150 मि॰से॰ |
| Doggos.com | 1,800 मि॰से॰ | 6,500 मि॰से॰ |
| quackquackgo.com | 2,680 मि॰से॰ | 4,740 मि॰से॰ |
| ding.xyz | 2,420 मि॰से॰ | 7,040 मि॰से॰ |
सुधार की गुंजाइश है और इसके लिए 20% नियम एक अच्छा दिशा-निर्देश है. रिसर्च के मुताबिक, जवाब देने के समय में 20% से ज़्यादा होने पर उपयोगकर्ता, फ़र्क़ को समझते हैं. इसका मतलब है कि अगर आपको तुलना की जा सकने वाली साइट से काफ़ी बेहतर बनना है, तो आपको कम से कम 20% तेज़ होना होगा.
| दूरी मापें | वर्तमान समय | बजट (प्रतिस्पर्धी की तुलना में 20% तेज़) |
|---|---|---|
| एफ़सीपी | 1,800 मि॰से॰ | 704 मि॰से॰ |
| टीटीआई | 6,500 मि॰से॰ | 2,520 मि॰से॰ |
अगर किसी मौजूदा साइट को ऑप्टिमाइज़ करने की कोशिश की जा रही है, तो उस लक्ष्य तक पहुंचना नामुमकिन हो सकता है. इसका मतलब यह नहीं है कि आप हार मान लें. छोटे चरणों से शुरुआत करें और अपनी मौजूदा रफ़्तार से 20% तेज़ बजट पर सेट करें. इसके बाद, ऑप्टिमाइज़ करते रहें.
Doggos.com के लिए, बदला गया बजट कुछ ऐसा दिख सकता है.
| दूरी मापें | वर्तमान समय | शुरुआती बजट (मौजूदा समय की तुलना में 20% तेज़) | लंबे समय के लिए लक्ष्य (प्रतिस्पर्धी की तुलना में 20% तेज़) |
|---|---|---|---|
| एफ़सीपी | 1,800 मि॰से॰ | 1,440 मि॰से॰ | 704 मि॰से॰ |
| टीटीआई | 6,500 मि॰से॰ | 5,200 मि॰से॰ | 2,520 मि॰से॰ |
अलग-अलग मेट्रिक जोड़ना
एक अच्छे परफ़ॉर्मेंस बजट में अलग-अलग तरह की मेट्रिक शामिल होती हैं. माइलस्टोन के समय के लिए हमने पहले ही बजट तय कर दिया है. अब इस मिक्स में दो और इवेंट जोड़े जाएंगे:
- संख्या पर आधारित मेट्रिक
- नियम-आधारित मेट्रिक
संख्या पर आधारित मेट्रिक के लिए बजट
आपको जो भी पेज वेट नंबर आता है, उसे 170 KB संसाधन (कंप्रेस्ड/मिनिफ़ाइड) में डिलीवर करने की कोशिश करें. इससे यह गारंटी मिलती है कि आपकी वेबसाइट कम कीमत वाले डिवाइसों और धीमे 3G पर भी तेज़ी से काम करेगी.
डेस्कटॉप के लिए ज़्यादा बजट बनाया जा सकता है, लेकिन ज़्यादा मेहनत न करें. एचटीटीपी संग्रह के पिछले साल के डेटा के हिसाब से, डेस्कटॉप और मोबाइल, दोनों पर पेज का मीडियन लोड 1 एमबी से ज़्यादा है. बेहतर परफ़ॉर्मेंस देने वाली वेबसाइट पाने के लिए, आपको इन मीडियन संख्याओं के ठीक नीचे निशान लगाने होंगे.
यहां टीटीआई बजट के आधार पर कुछ उदाहरण दिए गए हैं:
| नेटवर्क | डिवाइस | JS | इमेज | सीएसएस | एचटीएमएल | फ़ॉन्ट | कुल | इंटरैक्टिव बजट में लगने वाला समय |
|---|---|---|---|---|---|---|---|---|
| धीमा 3G | Moto G4 | 100 | 30 | 10 | 10 | 20 | ~170 केबी | 5 सेकंड |
| धीमा 4G | Moto G4 | 200 | 50 | 35 | 30 | 30 | ~345 केबी | 3 सेकंड |
| WiFi | डेस्कटॉप | 300 | 250 | 50 | 50 | 100 | ~750 केबी | 2 सेकंड |
संख्या मेट्रिक के आधार पर बजट तय करना मुश्किल कारोबार होता है. एक ई-कॉमर्स वेबसाइट, जिस पर प्रॉडक्ट की कई फ़ोटो मौजूद हैं. यह वेबसाइट, न्यूज़ पोर्टल से बहुत अलग है जिसमें ज़्यादातर टेक्स्ट मौजूद हैं. अगर आपकी साइट पर विज्ञापन या आंकड़े हैं, तो शिपिंग के लिए भेजे जाने वाले JavaScript की संख्या बढ़ जाती है.
ऊपर दी गई टेबल का इस्तेमाल शुरुआत करने के लिए करें. साथ ही, आपको जिस तरह के कॉन्टेंट पर काम करना है उसके हिसाब से बदलाव करें. तय करें कि आपके पेजों में क्या शामिल होगा, अपनी रिसर्च की समीक्षा करें, और हर एसेट साइज़ के लिए सही अनुमान लगाएं. उदाहरण के लिए, अगर ऐसी वेबसाइट बनाई जा रही है जिसमें बहुत सारी इमेज हैं, तो JS साइज़ की सीमा ज़्यादा सख्त रखें.
जब आपकी वेबसाइट काम कर रही हो, तो देखें कि उपयोगकर्ता के हिसाब से बनाई गई परफ़ॉर्मेंस मेट्रिक के हिसाब से आपकी परफ़ॉर्मेंस कैसी है. इसके बाद, अपने बजट में बदलाव करें.
नियम-आधारित मेट्रिक के लिए बजट
Lighthouse स्कोर, सबसे असरदार नियम-आधारित मेट्रिक होते हैं. लाइटहाउस आपके ऐप्लिकेशन को पांच कैटगरी में ग्रेड करता है और उनमें से एक कैटगरी की परफ़ॉर्मेंस होती है. परफ़ॉर्मेंस स्कोर का हिसाब पांच अलग-अलग मेट्रिक के आधार पर लगाया जाता है. इनमें, फ़र्स्ट कॉन्टेंटफ़ुल पेंट और इंटरैक्टिव में लगने वाला समय शामिल है.
अच्छी साइट बनाने की कोशिश करते समय, लाइटहाउस परफ़ॉर्मेंस स्कोर का बजट कम से कम 85 (100 में से) पर सेट करें. पुल-अनुरोधों पर इसे लागू करने के लिए, Lighthouse CI का इस्तेमाल करें.
प्राथमिकता दें
खुद से पूछें कि आप अपनी साइट पर किस स्तर के इंटरैक्शन की उम्मीद करते हैं. अगर यह कोई न्यूज़ वेबसाइट है, तो लोगों का मुख्य मकसद कॉन्टेंट को पढ़ना होता है. इसलिए, आपको तेज़ी से रेंडरिंग और एफ़सीपी को कम रखने पर फ़ोकस करना चाहिए. Doggos.com पर आने वाले लोग, सबसे पहले काम के लिंक पर क्लिक करना चाहते हैं. इसलिए, पहली प्राथमिकता कम TTI है.
यह पता लगाएं कि आपकी ऑडियंस का कौनसा हिस्सा डेस्कटॉप और मोबाइल डिवाइस पर ब्राउज़ करना है और उसके हिसाब से प्राथमिकता तय करें. इसका पता लगाने का एक तरीका यह है कि Chrome उपयोगकर्ता अनुभव रिपोर्ट डैशबोर्ड के ज़रिए यह पता लगाया जा सकता है कि आपके दर्शक प्रतिस्पर्धी की वेबसाइटों पर क्या कर रहे हैं.
अगले चरण
पक्का करें कि पूरे प्रोजेक्ट के दौरान आपका परफ़ॉर्मेंस बजट लागू हो और उसे अपनी बिल्ड प्रोसेस में शामिल करें.