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