सबसे तेज़ और सबसे बेहतर ऑप्टिमाइज़ किया गया संसाधन वह संसाधन होता है जिसे नहीं भेजा गया है. आपको अपने ऐप्लिकेशन से गैर-ज़रूरी संसाधनों को हटा देना चाहिए. अपनी टीम के साथ अस्पष्ट और स्पष्ट मान्यताओं के बारे में सवाल करना और समय-समय पर उन पर फिर से विचार करना अच्छी आदत है. डेटा इस्तेमाल करने के कुछ उदाहरण यहाँ दिए गए हैं:
- आपने अपने पेजों पर हमेशा संसाधन X को शामिल किया है, लेकिन क्या इसे डाउनलोड करने और दिखाने में आने वाली लागत, उपयोगकर्ता को डिलीवर की जाने वाली वैल्यू को ऑफ़सेट करती है? क्या इसकी वैल्यू को मापा और साबित किया जा सकता है?
- क्या संसाधन (खास तौर पर, अगर यह तीसरे पक्ष का कोई संसाधन है) की परफ़ॉर्मेंस एक जैसी है? क्या यह संसाधन महत्वपूर्ण पथ में है या इसे होना चाहिए? अगर संसाधन अहम पाथ में है, तो क्या साइट के लिए किसी एक गड़बड़ी की वजह से ऐसा हो सकता है? इसका मतलब है कि अगर संसाधन उपलब्ध नहीं है, तो क्या उससे आपके पेजों की परफ़ॉर्मेंस और उपयोगकर्ता अनुभव पर असर पड़ता है?
- क्या इस संसाधन को सेवा स्तर समझौता (एसएलए) की ज़रूरत है या उपलब्ध है? क्या यह संसाधन, परफ़ॉर्मेंस के सबसे सही तरीकों का पालन करता है: कंप्रेस करना, कैश मेमोरी में सेव करना वगैरह?
कई बार, पेजों में ऐसे संसाधन होते हैं जो ज़रूरी नहीं हैं या खराब होते हैं. ये ऐसे पेज होते हैं जो वेबसाइट पर आने वाले लोगों या उस साइट को ज़्यादा फ़ायदा न पहुंचाने के बावजूद पेज की परफ़ॉर्मेंस को खराब करते हैं जिस पर उन्हें होस्ट किया गया है. यह पहले और तीसरे पक्ष के संसाधनों और विजेट पर समान रूप से लागू होता है:
- साइट A ने अपने होम पेज पर फ़ोटो कैरसेल दिखाने का फ़ैसला लिया है, ताकि लोग तुरंत क्लिक करके कई फ़ोटो की झलक देख सकें. पेज लोड होने पर सभी फ़ोटो लोड हो जाती हैं और उपयोगकर्ता अगले फ़ोटो पर चला जाता है.
- सवाल: क्या आपने मेज़र किया है कि कितने उपयोगकर्ताओं ने कैरसेल में एक से ज़्यादा फ़ोटो देखी हैं? ऐसा हो सकता है कि आप ऐसे संसाधन डाउनलोड करके ज़्यादा ओवरहेड बढ़ा रहे हों जिन्हें वेबसाइट पर आने वाले ज़्यादातर लोग कभी नहीं देखते.
- साइट B ने मिलता-जुलता कॉन्टेंट दिखाने, लोगों की सामाजिक दिलचस्पी बढ़ाने या कोई दूसरी सेवा देने के लिए, तीसरे पक्ष का विजेट इंस्टॉल करने का फ़ैसला लिया है.
- सवाल: क्या आपने ट्रैक किया है कि विजेट से मिले कॉन्टेंट पर कितने लोग विजेट या क्लिक-थ्रू का इस्तेमाल करते हैं? यह विजेट जो जुड़ाव जनरेट करता है, क्या वह इसके ओवरहेड को सही साबित करने के लिए काफ़ी है? इसके अलावा, क्या आपके लिए लोडिंग रणनीति का इस्तेमाल करके यह पक्का किया जा सकता है कि स्क्रिप्ट तब तक लोड न हो, जब तक ज़रूरी न हो?
गै़र-ज़रूरी डाउनलोड को खत्म करना है या नहीं, यह तय करने के लिए अक्सर बहुत सावधानी से सोचने और आकलन करने की ज़रूरत होती है. सबसे अच्छे नतीजे पाने के लिए, अपने पेजों पर मौजूद हर ऐसेट के लिए, समय-समय पर इन्वेंट्री की मदद लें और इन सवालों को फिर से देखें.
वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी पर असर
वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली रिपोर्ट, Google ने मेट्रिक का एक सेट उपलब्ध कराने के लिए लॉन्च की थी. इससे यह पता चलता है कि वेब इस्तेमाल करने वाले लोगों को कैसा अनुभव मिल रहा है. वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक के लिए, ऑप्टिमाइज़ेशन की कई रणनीतियां होती हैं. हालांकि, यह सवाल होना चाहिए कि किसी पेज पर कोई खास संसाधन लोड किया जाए या नहीं. इससे, इन मेट्रिक को अपनी वेबसाइट पर बेहतर बनाने में मदद मिल सकती है. वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली हर मेट्रिक के हिसाब से, यहां कुछ उदाहरण दिए गए हैं. इन पर ध्यान दिया जा सकता है. हालांकि, यह उदाहरणों की पूरी सूची नहीं है (और ऐसे कई उदाहरण हैं!), लेकिन उन्हें पढ़ने से आपकी सोचने की क्षमता बढ़ जाएगी.
सबसे बड़ा कॉन्टेंटफ़ुल पेंट (एलसीपी)
सबसे बड़े कॉन्टेंटफ़ुल पेंट (एलसीपी) का इस्तेमाल करके, यह पता लगाया जाता है कि सबसे ज़्यादा कॉन्टेंट (जैसे, हीरो इमेज या हेडलाइन) कब लोड हुआ. इसे एक अहम काल्पनिक मेट्रिक माना जाता है, जिससे उपयोगकर्ता को ऐसा लगता है कि साइट तेज़ी से लोड हो रही है.
आम तौर पर, कम संसाधन डाउनलोड करने का मतलब है कि उपयोगकर्ता के पास मौजूद बैंडविड्थ, कम संसाधनों के बीच बांटी जाएगी. इससे एलसीपी में सुधार हो सकता है. इसका एक क्लासिक उदाहरण लेज़ी लोडिंग है. इसमें पेज लोड होने के दौरान, व्यूपोर्ट के बाहर की इमेज को तब तक डाउनलोड नहीं किया जाएगा, जब तक ब्राउज़र यह तय नहीं कर लेता कि इमेज उपयोगकर्ता को दिखेगी. अगर आपके पास 50 इमेज, जैसे कि सभी इमेज को लेज़ी लोड करने की बड़ी थंबनेल गैलरी है, तो टॉप 10 इमेज का मतलब है कि ब्राउज़र इसके लिए उपलब्ध बैंडविथ का ज़्यादा बेहतर तरीके से इस्तेमाल कर सकता है. साथ ही, उपयोगकर्ता को पहली इमेज ज़्यादा तेज़ी से लोड होगी.
हालांकि, ज़रूरी है कि यह कम इमेज लोड करने की बात ही न हो. ब्राउज़र में एक आंतरिक प्राथमिकता स्कीम है, जो तय करती है कि हर संसाधन को कितना बैंडविड्थ मिलना चाहिए. हालांकि, इस सभी रिसॉर्स के बावजूद, किसी संभावित एलसीपी एलिमेंट के डिपेंडेंट रिसॉर्स का इस्तेमाल बंद किया जा सकता है. खास तौर पर, ऐसे संसाधन जिन्हें ज़्यादा प्राथमिकता पर डाउनलोड किया गया है. खास तौर पर, धीमे इंटरनेट कनेक्शन पर ऐसा होता है. यह डिपेंडेंट रिसॉर्स, पेज के एलसीपी एलिमेंट को दिखाने वाली कोई इमेज फ़ाइल हो सकती है. हालांकि, यह एक वेब फ़ॉन्ट रिसॉर्स भी हो सकता है जिसकी ज़रूरत ब्राउज़र को एक ऐसे टेक्स्ट नोड को रेंडर करने की होती है जिसे पेज के एलसीपी एलिमेंट के तौर पर तय किया जा सकता है.
अगर आपकी वेबसाइट पर टेक्स्ट काफ़ी ज़्यादा है, तो हो सकता है कि किसी पेज का एलसीपी एलिमेंट, टेक्स्ट नोड हो. फ़ॉन्ट ऑप्टिमाइज़ेशन और लोड करने की बेहतर रणनीतियां उपलब्ध हैं. हालांकि, आपकी वेबसाइट की ज़रूरतों के हिसाब से सिस्टम फ़ॉन्ट काफ़ी है या नहीं. इससे, टेक्स्ट नोड वाले एलसीपी एलिमेंट, वेब फ़ॉन्ट रिसॉर्स पर निर्भर हुए बिना लोड हो सकते हैं और सीएसएस और एचटीएमएल के सर्वर से आते ही तुरंत पेंट हो जाते हैं.
कुल लेआउट शिफ़्ट (सीएलएस)
आपके लोड किए जाने वाले हर संसाधन, पेज के कुल लेआउट शिफ़्ट (सीएलएस) को बढ़ावा दे सकते हैं. खास तौर पर तब, जब शुरुआती पेंट होने के समय तक उनका डाउनलोड पूरा न हुआ हो. इमेज के लिए, सीएलएस से बचें. इसमें साफ़ तौर पर डाइमेंशन सेट करने जैसे तरीके शामिल हैं. फ़ॉन्ट के लिए, फ़ॉन्ट लोडिंग और संभावित रूप से फ़ॉलबैक फ़ॉन्ट मैचिंग को मैनेज करने से वेब फ़ॉन्ट बदलने की अवधि के दौरान शिफ़्ट कम हो सकती है. JavaScript के लिए यह मैनेज किया जा सकता है कि वह स्क्रिप्ट डीओएम में कैसे बदलाव करती है, ताकि लेआउट शिफ़्ट की वैल्यू को एक तय सीमा तक कम कर दिया जाए.
किसी पेज के सीएलएस में योगदान देने वाले हर संसाधन को कुछ काम करने की ज़रूरत होती है, ताकि यह पक्का किया जा सके कि पेज का लेआउट ज़रूरत के मुताबिक स्थिर है. आपको किसी खास संसाधन की ज़रूरत है या नहीं, इस बारे में सवाल करने से न सिर्फ़ पेज लोड होते हैं, बल्कि जानकारी को समझने में भी कम समय लगता है. इससे लेआउट को सही बनाए रखने में मदद मिलती है. इससे न सिर्फ़ उपयोगकर्ताओं को परेशानी होगी, बल्कि डेवलपर को भी निराशा होगी, क्योंकि आपको अपने प्रोजेक्ट से जुड़े दूसरे लक्ष्यों को पूरा करने के लिए ज़्यादा समय मिलेगा.
इंटरैक्शन टू नेक्स्ट पेंट (आईएनपी)
इंटरैक्शन टू नेक्स्ट पेंट (आईएनपी) यह आकलन करता है कि किसी पेज की पूरी अवधि के दौरान, उपयोगकर्ता के इनपुट का जवाब सही है या नहीं. किसी पेज के आईएनपी पर लोड होने वाले JavaScript का असर पड़ सकता है. इसकी वजह यह है कि JavaScript की मदद से ही, वेब पर मौजूद ज़्यादातर इंटरैक्टिविटी को बढ़ावा मिलता है. खास तौर पर, पेज लोड के दौरान डाउनलोड किए जाने वाले स्क्रिप्ट रिसॉर्स की संख्या से, स्क्रिप्ट आकलन और कंपाइलेशन का काम काफ़ी महंगा पड़ सकता है. ब्राउज़र को शुरू करने के दौरान, JavaScript की ज़रूरत जितनी कम लोड होती है उतना ही कम काम ब्राउज़र को पेज की परफ़ॉर्मेंस के दौरान ऐसा करना पड़ता है. ऐसा इसलिए, क्योंकि पेज पर उपयोगकर्ता इससे इंटरैक्ट करने की कोशिश कर सकते हैं.
हालांकि, शुरुआत करने के दौरान डाउनलोड किए गए JavaScript संसाधनों के साइज़ को कम करने की रणनीतियां होती हैं. जैसे- कोड को बांटना और ट्री शेकिंग. हालांकि, अपने प्रोजेक्ट में इस्तेमाल किए जाने वाले पैकेज को ऑडिट करके यह पता लगाया जा सकता है कि वे ज़रूरी हैं या नहीं. उदाहरण के लिए, lodash में ऐसे कई तरीके हैं जो आज भी काम के हैं. हालांकि, इनमें कुछ ऐसे तरीके इस्तेमाल किए जाते हैं जो ब्राउज़र के ज़रिए उपलब्ध कराए जाते हैं. जैसे, मैपिंग, कम करने, फ़िल्टर करने के साथ-साथ कई अन्य फ़ंक्शन के लिए Array
के खास फ़ंक्शन.
प्रोग्रेसिव एन्हैंसमेंट की सुविधा भी JavaScript का एक मददगार तरीका है. इसकी मदद से, उपयोगकर्ताओं को बुनियादी (हालांकि, काम करते रहने वाला) अनुभव दिया जा सकता है. इससे, ज़्यादा बेहतर डिवाइसों और तेज़ इंटरनेट कनेक्शन वाले उपयोगकर्ताओं को जोड़ा जा सकता है. भले ही आप प्रोग्रेसिव एन्हैंसमेंट के सिद्धांत का पालन करें या न करें, बात सिर्फ़ यह है कि: हर उस JavaScript संसाधन को डाउनलोड करने से रोका जा सकता है जिसे डाउनलोड करने से रोका जा सकता है. इससे लोगों के इंटरैक्शन पर तुरंत कार्रवाई होती है, जो वेब की परफ़ॉर्मेंस का एक अहम पहलू है.
नतीजा
ग़ैर-ज़रूरी डाउनलोड के लिए अपनी वेबसाइट का ऑडिट करना, उपयोगकर्ता को तेज़ी से बेहतर अनुभव देने का सिर्फ़ एक पहलू हो सकता है, लेकिन इस अपडेट से बहुत ज़्यादा असर पड़ सकता है. ज़रूरी बातों पर फिर से एक नज़र:
- अपने पेजों पर, अपनी ऐसेट और तीसरे पक्ष की ऐसेट इन्वेंट्री बनाएं.
- हर ऐसेट की परफ़ॉर्मेंस को मेज़र करें: उसकी वैल्यू और तकनीकी परफ़ॉर्मेंस.
- यह तय करें कि संसाधन पर्याप्त मूल्य दे रहे हैं या नहीं.
- वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी और इससे जुड़ी मेट्रिक के गैर-ज़रूरी डाउनलोड के असर को समझना.
इस तरह से कॉन्टेंट की परफ़ॉर्मेंस को ऑप्टिमाइज़ करने से, न सिर्फ़ आपकी परफ़ॉर्मेंस बेहतर होती है, बल्कि उपयोगकर्ता का बैंडविथ कम खर्च होता है. साथ ही, इससे उपयोगकर्ता पर आधारित मेट्रिक को बेहतर बनाया जा सकता है और बेहतर उपयोगकर्ता अनुभव मिल सकता है.