कम बैंडविड्थ और ज़्यादा इंतज़ार के समय को समझना

यह समझना ज़रूरी है कि इंटरनेट कनेक्शन खराब या अविश्वसनीय होने पर, आपके ऐप्लिकेशन या साइट का इस्तेमाल करने पर कैसा महसूस होता है. इसके हिसाब से, ऐप्लिकेशन या साइट को बनाएं. कई तरह के टूल से आपको मदद मिल सकती है.

बढ़ते अनुपात में लोग मोबाइल डिवाइसों पर वेब का इस्तेमाल कर रहे हैं. घर पर भी, कई लोग मोबाइल के लिए फ़िक्स्ड ब्रॉडबैंड को छोड़ रहे हैं.

इस संदर्भ में, यह समझना ज़रूरी है कि खराब या अविश्वसनीय इंटरनेट कनेक्शन होने पर, आपके ऐप्लिकेशन या साइट का इस्तेमाल करने पर कैसा महसूस होता है. कई सॉफ़्टवेयर टूल की मदद से, कम बैंडविड्थ और ज़्यादा देरी को इम्यूलेट और सिम्युलेट किया जा सकता है.

नेटवर्क थ्रॉटलिंग को एम्युलेट करना

साइट बनाते या अपडेट करते समय, आपको यह पक्का करना होगा कि अलग-अलग इंटरनेट कनेक्शन की स्थितियों में साइट की परफ़ॉर्मेंस अच्छी हो. कई टूल से मदद मिल सकती है.

ब्राउज़र टूल

Chrome DevTools की मदद से, अपनी साइट की जांच कई तरह की अपलोड/डाउनलोड स्पीड और राउंड-ट्रिप टाइम के साथ की जा सकती है. इसके लिए, नेटवर्क पैनल में मौजूद प्रीसेट या कस्टम सेटिंग का इस्तेमाल करें. बुनियादी बातें जानने के लिए, नेटवर्क परफ़ॉर्मेंस का विश्लेषण करने की सुविधा का इस्तेमाल शुरू करना लेख पढ़ें.

Chrome DevTools की थ्रॉटलिंग

सिस्‍टम टूल

नेटवर्क लिंक कंडीशनर, Mac पर उपलब्ध एक प्राथमिकता पैनल है. यह पैनल, Xcode के लिए हार्डवेयर IO टूल इंस्टॉल करने पर दिखता है:

Mac Network Link Conditioner का कंट्रोल पैनल

Mac के नेटवर्क लिंक कंडीशनर की सेटिंग

Mac के नेटवर्क लिंक कंडीशनर की कस्टम सेटिंग

डिवाइस एम्युलेशन

Android एमुलेटर की मदद से, Android पर ऐप्लिकेशन (इसमें वेब ब्राउज़र और हाइब्रिड वेब ऐप्लिकेशन शामिल हैं) चलाते समय, नेटवर्क की अलग-अलग स्थितियों को सिम्युलेट किया जा सकता है:

Android Emulator

Android Emulator की सेटिंग

iPhone के लिए, नेटवर्क लिंक कंडीशनर का इस्तेमाल, खराब नेटवर्क की स्थिति को सिम्युलेट करने के लिए किया जा सकता है (ऊपर देखें).

अलग-अलग जगहों और नेटवर्क से जांच करना

कनेक्टिविटी की परफ़ॉर्मेंस, सर्वर की जगह और नेटवर्क टाइप पर निर्भर करती है.

WebPagetest एक ऑनलाइन सेवा है. इसकी मदद से, कई नेटवर्क और होस्ट की जगहों का इस्तेमाल करके, आपकी साइट के लिए परफ़ॉर्मेंस की जांच करने वाले कई टेस्ट चलाए जा सकते हैं. उदाहरण के लिए, भारत में 2G नेटवर्क पर किसी सर्वर से या अमेरिका के किसी शहर में केबल से अपनी साइट को आज़माया जा सकता है.

WebPagetest की सेटिंग

कोई जगह चुनें और बेहतर सेटिंग में जाकर, कनेक्शन का टाइप चुनें. स्क्रिप्ट का इस्तेमाल करके, जांच को ऑटोमेट भी किया जा सकता है. उदाहरण के लिए, किसी साइट में लॉग इन करने के लिए. इसके अलावा, RESTful API का इस्तेमाल करके भी ऐसा किया जा सकता है. इससे, आपको बिल्ड प्रोसेस या परफ़ॉर्मेंस को रिकॉर्ड करने की सुविधा में, कनेक्टिविटी की जांच शामिल करने में मदद मिलती है.

Fiddler, GeoEdge की मदद से ग्लोबल प्रॉक्सी की सुविधा देता है. साथ ही, इसके कस्टम नियमों का इस्तेमाल करके, मॉडेम की स्पीड को सिम्युलेट किया जा सकता है:

Fiddler प्रॉक्सी

खराब नेटवर्क पर जांच करना

सॉफ़्टवेयर और हार्डवेयर प्रॉक्सी की मदद से, मोबाइल नेटवर्क की समस्याओं को एमुलेट किया जा सकता है. जैसे, बैंडविड्थ को कम करना, पैकेट में देरी होना, और पैकेट का अचानक से बंद होना. शेयर की गई प्रॉक्सी या खराब नेटवर्क की मदद से, डेवलपर की टीम अपने वर्कफ़्लो में असल नेटवर्क की जांच को शामिल कर सकती है.

Facebook का Augmented Traffic Control (ATC) ऐप्लिकेशन, BSD लाइसेंस वाला एक सेट है. इसका इस्तेमाल, ट्रैफ़िक को कंट्रोल करने और नेटवर्क की खराब स्थिति को एमुलेट करने के लिए किया जा सकता है:

Facebook का बेहतर ट्रैफ़िक कंट्रोल

Facebook ने 2G मंगलवार की सुविधा भी शुरू की थी, ताकि यह समझा जा सके कि 2G नेटवर्क का इस्तेमाल करने वाले लोग, उनके प्रॉडक्ट का इस्तेमाल कैसे करते हैं. मंगलवार को, कर्मचारियों को एक पॉप-अप दिखता है. इसमें उन्हें 2G कनेक्शन का अनुकरण करने का विकल्प मिलता है.

Charles एचटीटीपी/एचटीटीपीएस प्रॉक्सी का इस्तेमाल, बैंडविड्थ और इंतज़ार के समय में बदलाव करने के लिए किया जा सकता है. Charles एक कमर्शियल सॉफ़्टवेयर है. हालांकि, इसे मुफ़्त में आज़माया जा सकता है.

Charles प्रॉक्सी की बैंडविड्थ और इंतज़ार की अवधि की सेटिंग

चार्ल्स के बारे में ज़्यादा जानकारी के लिए, codewithchris.com पर जाएं.

अविश्वसनीय कनेक्टिविटी और "लिए-फ़ाई" को मैनेज करना

लाइ-फ़ाई क्या है?

लिये-फ़ाई शब्द का इस्तेमाल कम से कम 2008 से किया जा रहा है. उस समय फ़ोन ऐसे दिखते थे. यह शब्द, ऐसी कनेक्टिविटी के बारे में बताता है जो दिखने में तो अच्छी है, लेकिन असल में काम की नहीं है. आपका ब्राउज़र ऐसे काम करता है जैसे वह कनेक्ट है, जबकि ऐसा नहीं है.

कनेक्टिविटी को गलत तरीके से समझने पर, खराब अनुभव मिल सकता है. ऐसा इसलिए होता है, क्योंकि ब्राउज़र (या JavaScript) संसाधनों को वापस पाने की कोशिश करता रहता है. इसके बजाय, उसे संसाधनों को वापस पाने के लिए कोई बेहतर विकल्प चुनना चाहिए. असल में, लाइ-फ़ाई, ऑफ़लाइन से भी खराब हो सकता है. कम से कम, अगर कोई डिवाइस सचमुच ऑफ़लाइन है, तो आपका JavaScript सही कार्रवाई कर सकता है.

ज़्यादा से ज़्यादा लोग मोबाइल इंटरनेट का इस्तेमाल करने लगे हैं और फ़िक्स्ड ब्रॉडबैंड से दूर हो रहे हैं. ऐसे में, लाइ-फ़ाई की समस्या और भी बढ़ सकती है. अमेरिका की जनगणना के हाल ही के डेटा से पता चलता है कि फ़िक्स्ड ब्रॉडबैंड की जगह मोबाइल ब्रॉडबैंड का इस्तेमाल बढ़ रहा है. इस चार्ट में, साल 2013 की तुलना में साल 2015 में घर पर मोबाइल इंटरनेट के इस्तेमाल की जानकारी दी गई है:

अमेरिका की जनगणना के डेटा से मिला चार्ट, जिसमें खास तौर पर कम आय वाले परिवारों में, फ़िक्स्ड ब्रॉडबैंड से मोबाइल पर स्विच करने की जानकारी दी गई है

कभी-कभी इंटरनेट कनेक्शन टूटने पर, टाइम आउट का इस्तेमाल करना

पहले, इंटरनेट कनेक्शन के बीच-बीच में टूटने की जांच करने के लिए, XHR का इस्तेमाल करने वाले हैक वाले तरीकों का इस्तेमाल किया जाता था. हालांकि, सर्विस वर्कर नेटवर्क टाइम आउट सेट करने के लिए, ज़्यादा भरोसेमंद तरीकों को चालू करता है. ऐसा करने के लिए, Workbox का इस्तेमाल करें. इसके लिए, कोड की सिर्फ़ कुछ पंक्तियां लिखनी होंगी:

workboxSW.router.registerRoute(
 
'/path/to/image',
  workboxSW
.strategies.networkFirst({networkTimeoutSeconds: 3}),
);

Workbox के बारे में ज़्यादा जानने के लिए, जेफ़ पॉस्निक के Chrome Dev Summit के टाक, Workbox: Flexible PWA Libraries को देखें.

Fetch API के लिए भी टाइम आउट की सुविधा को डेवलप किया जा रहा है. साथ ही, Streams API से कॉन्टेंट डिलीवरी को ऑप्टिमाइज़ करने और एक ही तरह के अनुरोधों से बचने में मदद मिलेगी. जैक आर्किबाल्ड ने पेज लोड को बेहतर बनाने में, लेट-फ़्रीक्वेंसी की समस्या को हल करने के बारे में ज़्यादा जानकारी दी है.

सुझाव/राय दें या शिकायत करें