परफ़ॉर्मेंस, उपयोगकर्ता अनुभव का एक अहम हिस्सा है. इससे कारोबार की मेट्रिक पर असर पड़ता है. यह सोचने पर मन लगता है कि अगर आप एक अच्छे डेवलपर हैं, तो आपको एक परफ़ॉर्म करने वाली साइट मिल जाएगी, लेकिन सच यह है कि अच्छा प्रदर्शन शायद ही किसी बुरे असर का खराब असर डाल सकता है. अन्य चीज़ों की तरह ही, किसी लक्ष्य तक पहुंचने के लिए आपको उसे साफ़ तौर पर तय करना होता है. परफ़ॉर्मेंस बजट सेट करके शुरुआत करें.
परिभाषा
परफ़ॉर्मेंस बजट, मेट्रिक पर लगाई गई सीमाओं का एक सेट है जो साइट की परफ़ॉर्मेंस पर असर डालती है. ये किसी पेज का कुल साइज़, किसी मोबाइल नेटवर्क पर लोड होने में लगने वाला समय या भेजे गए एचटीटीपी अनुरोधों की संख्या भी हो सकती है. बजट तय करने से, वेब परफ़ॉर्मेंस के बारे में बातचीत शुरू करने में मदद मिलती है. यह डिज़ाइन, टेक्नोलॉजी, और सुविधाएं जोड़ने के बारे में फ़ैसले लेने के लिए रेफ़रंस के तौर पर काम करता है.
बजट की मदद से, डिज़ाइनर हाई रिज़ॉल्यूशन वाली इमेज के असर और चुने गए वेब फ़ॉन्ट की संख्या के बारे में सोच सकते हैं. इससे डेवलपर को समस्या को हल करने के लिए अलग-अलग तरीकों की तुलना करने में भी मदद मिलती है. साथ ही, इससे फ़्रेमवर्क और लाइब्रेरी का आकलन करने में भी मदद मिलती है. यह आकलन, साइज़ और पार्स करने में लगने वाले खर्च के हिसाब से किया जाता है.
मेट्रिक चुनें
संख्या पर आधारित मेट्रिक ⚖️
ये मेट्रिक डेवलपमेंट के शुरुआती चरणों में काम की होती हैं. इसकी वजह यह है कि इनमें बहुत ज़्यादा इमेज और स्क्रिप्ट शामिल करने के असर को हाइलाइट किया जाता है. डिज़ाइनर और डेवलपर, दोनों के लिए इन विज्ञापनों के बारे में बात करना भी आसान होता है.
हम पहले ही परफ़ॉर्मेंस बजट में शामिल की जा सकने वाली कुछ बातों के बारे में बता चुके हैं. जैसे, पेज का वेट और एचटीटीपी अनुरोधों की संख्या. हालांकि, आपके पास इन्हें अलग-अलग सीमाओं में बांटने का विकल्प है. जैसे:
- इमेज का ज़्यादा से ज़्यादा साइज़
- वेब फ़ॉन्ट की ज़्यादा से ज़्यादा संख्या
- फ़्रेमवर्क के साथ, स्क्रिप्ट का ज़्यादा से ज़्यादा साइज़
- बाहरी संसाधनों की कुल संख्या, जैसे कि तीसरे पक्ष की स्क्रिप्ट
हालांकि, ये आंकड़े आपको उपयोगकर्ता अनुभव के बारे में ज़्यादा जानकारी नहीं देते. अनुरोधों की समान संख्या या समान वज़न वाले दो पेज अलग-अलग तरह से रेंडर हो सकते हैं. यह इस बात पर निर्भर करता है कि रिसॉर्स के लिए अनुरोध किस क्रम में किया गया है. अगर किसी पेज पर हीरो इमेज या स्टाइलशीट जैसा अहम रिसॉर्स, प्रोसेस के दौरान देर से लोड होता है, तो लोगों को पेज लोड होने में ज़्यादा समय लगेगा. इससे, उपयोगकर्ताओं को पेज लोड होने में ज़्यादा समय लग सकता है. अगर दूसरे पेज पर सबसे ज़रूरी हिस्से तेज़ी से लोड होते हैं, तो हो सकता है कि उन्होंने ध्यान ही न दिया हो कि पेज का बाकी हिस्सा लोड नहीं होता.
इसलिए, दूसरी तरह की मेट्रिक को ट्रैक करना ज़रूरी है.
माइलस्टोन का समय ⏱️
माइलस्टोन टाइमिंग से, पेज लोड होने के दौरान होने वाले इवेंट मार्क किए जाते हैं. जैसे, DOMContentLoaded या load इवेंट. सबसे काम का समय उपयोगकर्ता को ध्यान में रखकर बनाई गई परफ़ॉर्मेंस मेट्रिक होते हैं, जो पेज लोड होने के अनुभव के बारे में आपको कुछ जानकारी देते हैं. ये मेट्रिक ब्राउज़र एपीआई के ज़रिए और Lighthouse रिपोर्ट के हिस्से के तौर पर उपलब्ध हैं.
फ़र्स्ट कॉन्टेंटफ़ुल पेंट (एफ़सीपी) यह मेज़र करता है कि ब्राउज़र, डीओएम से टेक्स्ट या इमेज जैसा पहला बिट कॉन्टेंट कब दिखाता है.
टाइम टू इंटरैक्टिव (टीटीआई) से पता चलता है कि किसी पेज को पूरी तरह से इंटरैक्टिव होने और उपयोगकर्ता के इनपुट का सही जवाब देने में कितना समय लगता है. अगर आपको पेज पर किसी भी तरह के उपयोगकर्ता इंटरैक्शन की उम्मीद है, जैसे कि लिंक पर क्लिक करना, बटन पर क्लिक करना, टाइप करना या फ़ॉर्म एलिमेंट का इस्तेमाल करना, तो इसे ट्रैक करना बहुत ज़रूरी मेट्रिक है.
नियम पर आधारित मेट्रिक 💯
Lighthouse और WebPageTest, सबसे सही तरीके के सामान्य नियमों के आधार पर परफ़ॉर्मेंस स्कोर का हिसाब लगाते हैं. इनका इस्तेमाल दिशा-निर्देशों के तौर पर किया जा सकता है. बोनस के तौर पर, लाइटहाउस आपको आसान ऑप्टिमाइज़ेशन के लिए हिंट भी देता है.
संख्या पर आधारित और उपयोगकर्ता पर आधारित परफ़ॉर्मेंस मेट्रिक के कॉम्बिनेशन को ट्रैक करने पर, आपको सबसे अच्छे नतीजे मिलेंगे. प्रोजेक्ट के शुरुआती चरणों में ऐसेट के साइज़ पर ध्यान दें और जल्द से जल्द एफ़सीपी और टीटीआई को ट्रैक करना शुरू करें.
बेसलाइन तय करें
आपकी साइट के लिए सबसे कारगर क्या होगा, यह जानने का बस एक ही तरीका है. आप उसे आज़माकर देखें—फिर उसमें रिसर्च करें और नतीजों को परखें. तुलना का विश्लेषण करके जानें कि आपकी परफ़ॉर्मेंस कैसी है. 🕵️
अगर आपके पास इसके लिए समय नहीं है, तो शुरुआत करने के लिए यहां अच्छे डिफ़ॉल्ट नंबर दिए गए हैं:
- 5 सेकंड से कम में इंटरैक्टिव में लगने वाला समय
- ज़रूरी पाथ वाले संसाधनों के 170 केबी से कम (कंप्रेस किए गए/कम से कम किए गए)
इन नंबर का हिसाब, असल दुनिया के बेसलाइन डिवाइसों और 3G नेटवर्क की स्पीड के आधार पर लगाया जाता है. आज आधे से ज़्यादा इंटरनेट ट्रैफ़िक मोबाइल नेटवर्क पर आता है. इसलिए, आपको शुरुआत की जगह के तौर पर 3G नेटवर्क की स्पीड का इस्तेमाल करना चाहिए.
बजट के उदाहरण
आपको अपनी साइट पर अलग-अलग तरह के पेजों के लिए एक बजट तय करना चाहिए, क्योंकि कॉन्टेंट अलग-अलग होगा. उदाहरण के लिए:
- हमारे प्रॉडक्ट पेज को मोबाइल पर 170 केबी से कम JavaScript की शिपिंग करनी चाहिए
- हमारे खोज पेज में डेस्कटॉप पर 2 एमबी से कम इमेज शामिल होनी चाहिए
- हमारा होम पेज लोड होना चाहिए और Moto G4 फ़ोन पर, धीमे 3G नेटवर्क पर 5 सेकंड से कम समय में इंटरैक्टिव होना चाहिए
- हमारे ब्लॉग को लाइटहाउस के परफ़ॉर्मेंस ऑडिट पर 80 से ज़्यादा स्कोर देना चाहिए
बिल्ड प्रोसेस में परफ़ॉर्मेंस बजट जोड़ना
इसके लिए टूल चुनना, आपके प्रोजेक्ट के साइज़ और उन संसाधनों पर निर्भर करेगा जो इस टास्क के लिए पूरे किए जा सकते हैं. कुछ ऐसे ओपन-सोर्स टूल हैं जो बिल्ड प्रोसेस में बजट जोड़ने में आपकी मदद कर सकते हैं:
अगर कोई चीज़ तय की गई सीमा से ज़्यादा हो जाती है, तो आप इनमें से कोई एक काम कर सकते हैं:
- किसी मौजूदा सुविधा या ऐसेट को ऑप्टिमाइज़ करें 🛠️
- किसी मौजूदा सुविधा या ऐसेट को हटाएं 🗑️
- कोई नई सुविधा या एसेट न जोड़ें ✋⛔
परफ़ॉर्मेंस ट्रैक करना
अपनी साइट की स्पीड को पक्का करने का मतलब है कि आपको शुरुआती लॉन्च के बाद मेज़र करते रहना होगा. समय के साथ इन मेट्रिक पर नज़र रखने और असली उपयोगकर्ताओं से डेटा पाने से आपको पता चलेगा कि परफ़ॉर्मेंस में बदलाव होने से कारोबार की मुख्य मेट्रिक पर क्या असर पड़ता है.
आखिर में खास जानकारी
परफ़ॉर्मेंस बजट का मकसद यह पक्का करना होता है कि पूरे प्रोजेक्ट की परफ़ॉर्मेंस पर फ़ोकस किया जाए. साथ ही, इसे जल्दी सेट करने से, बाद में बैकट्रैकिंग से बचने में मदद मिलती है. इससे आपको यह समझने में मदद मिलेगी कि अपनी वेबसाइट पर क्या शामिल करना है. मुख्य मकसद है, ऐसे लक्ष्य तय करना जिनसे आपके ऐप्लिकेशन की सुविधाओं या लोगों के अनुभव को नुकसान पहुंचाए बिना, परफ़ॉर्मेंस को बेहतर तरीके से संतुलित किया जा सके.
अगली गाइड में, आपको कुछ आसान चरणों में अपना पहला परफ़ॉर्मेंस बजट तय करने का तरीका बताया गया है.