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

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

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

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

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

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

ब्राउज़र टूल

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 की मदद से ग्लोबल प्रॉक्सी की सुविधा देता है. साथ ही, इसके कस्टम नियमों का इस्तेमाल करके, मॉडेम की स्पीड को सिम्युलेट किया जा सकता है:

फ़िडलर प्रॉक्सी

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

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

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}),
);

जेफ़ पॉसनिक के Chrome डेवलपर सम्मेलन में Workbox के बारे में ज़्यादा जानकारी दी गई, Workbox: सुविधाजनक PWA लाइब्रेरी.

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

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