अडैप्टिव लोडिंग: धीमे डिवाइसों पर वेब की परफ़ॉर्मेंस को बेहतर बनाना

किसी खास हार्डवेयर और नेटवर्क की समस्याओं के लिए अपनी साइटों को ऑप्टिमाइज़ करके, यह पक्का करने का तरीका जानें कि हर उपयोगकर्ता को बेहतरीन अनुभव मिले.

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

Chrome डेवलपर समिट के दौरान, Google के ऐडी ओस्मानी और Facebook के नेट शलॉस ने इस समस्या का समाधान ढूंढा. वे पेजों को डिलीवर करने का ऐसा पैटर्न ढूंढ रहे हैं जो उपयोगकर्ता की अलग-अलग सीमाओं को बेहतर तरीके से पूरा कर सके. इसे अडैप्टिव लोडिंग कहा जाता है.

अडैप्टिव लोडिंग क्या है?

अडैप्टिव लोडिंग में, अलग-अलग उपयोगकर्ताओं को उनके नेटवर्क और हार्डवेयर की सीमाओं के आधार पर अलग-अलग अनुभव देने की सुविधा मिलती है. खास तौर पर:

• सभी उपयोगकर्ताओं (इनमें लो-एंड डिवाइस भी शामिल हैं) के लिए तेज़ कोर अनुभव.

• अगर उपयोगकर्ता का नेटवर्क और हार्डवेयर, बेहतर सुविधाओं को हैंडल कर सकता है, तो धीरे-धीरे सिर्फ़ बेहतर सुविधाएं जोड़ना.

किसी खास हार्डवेयर और नेटवर्क की समस्याओं के लिए ऑप्टिमाइज़ करके, हर उपयोगकर्ता को अपने डिवाइस पर बेहतरीन अनुभव दिया जा सकता है. उपयोगकर्ताओं की सीमाओं के हिसाब से अनुभव को बेहतर बनाने के लिए, ये काम किए जा सकते हैं:

• धीमे नेटवर्क पर, कम क्वालिटी वाली इमेज और वीडियो दिखाना.

• कम कीमत वाले डिवाइसों पर ऐनिमेशन के फ़्रेम-रेट को थ्रॉटल करना.

• कम कीमत वाले डिवाइसों पर कंप्यूटर के महंगे काम करने से बचना.

• धीमे डिवाइसों पर तीसरे पक्ष की स्क्रिप्ट ब्लॉक करने के लिए.

• सिर्फ़ तेज़ सीपीयू वाले सीपीयू पर काम करने के लिए, ग़ैर-ज़रूरी JavaScript लोड हो रही है.

ब्राउज़र के साथ काम करने की सुविधा और अडैप्टिव लोडिंग को लागू करने का तरीका

अडैप्टिव लोडिंग के लिए इस्तेमाल किए जा सकने वाले सिग्नल यहां दिए गए हैं. हर सिग्नल के लिए, ब्राउज़र के साथ काम करने की सुविधा भी शामिल होती है:

Navigator.deviceMemory

navigator.deviceMemory प्रॉपर्टी का इस्तेमाल, लो-एंड डिवाइसों पर मेमोरी खर्च को कम करने के लिए किया जाता है.

Navigator.hardwareConcurrency

navigator.hardwareConcurrency प्रॉपर्टी, सीपीयू कोर की संख्या होती है. इसका इस्तेमाल, ज़्यादा समय लेने वाले JavaScript को सीमित करने और सीपीयू पर ज़्यादा लोड डालने वाले लॉजिक को कम करने के लिए किया जाता है. ऐसा तब किया जाता है, जब कोई डिवाइस इसे ठीक से हैंडल नहीं कर पाता.

NetworkInformation.effectiveType

navigator.connection.effectiveType प्रॉपर्टी का इस्तेमाल, डेटा ट्रांसफ़र को बेहतर बनाने के लिए किया जाता है, ताकि कम बैंडविथ का इस्तेमाल किया जा सके.

NetworkInformation.saveData

navigator.connection.saveData प्रॉपर्टी का इस्तेमाल, उपयोगकर्ता की डेटा सेवर सेटिंग का फ़ायदा पाने के लिए किया जाता है.

उपयोगकर्ताओं को क्या दिखाना है, यह तय करने के लिए दो जगहें हैं: क्लाइंट और सर्वर. क्लाइंट पर, आपके पास ऊपर बताए गए JavaScript एपीआई होते हैं. सर्वर पर, क्लाइंट के संकेत का इस्तेमाल करके, उपयोगकर्ता के डिवाइस की क्षमताओं और उस नेटवर्क के बारे में अहम जानकारी हासिल की जा सकती है जिससे वह कनेक्ट है.

React में अडैप्टिव लोडिंग

React अडैप्टिव लोडिंग हुक और उपयोगिता, React नेटवर्क के लिए एक सुइट है. इसकी मदद से, अपनी साइटों को कम सुविधा वाले डिवाइसों के हिसाब से आसानी से अडजस्ट किया जा सकता है. इसमें ये चीज़ें शामिल हैं:

• नेटवर्क की स्थिति (slow-2g, 2g, 3g या 4g) के आधार पर अडैप्ट करने के लिए useNetworkStatus() हुक.

• उपयोगकर्ता की डेटा सेवर सेटिंग के आधार पर, useSaveData() हुक को अडैप्ट करने के लिए.

• उपयोगकर्ता के डिवाइस पर मौजूद लॉजिकल सीपीयू प्रोसेसर कोर की संख्या के आधार पर, useHardwareConcurrency() हुक को अडैप्ट करने के लिए.

• उपयोगकर्ता के डिवाइस की मेमोरी (रैम) के हिसाब से अडैप्ट करने के लिए useMemoryStatus() हुक.

हर हुक, शुरुआती वैल्यू को सेट करने के लिए वैकल्पिक आर्ग्युमेंट को स्वीकार करता है. यह विकल्प दो स्थितियों में काम आता है: जब उपयोगकर्ता का ब्राउज़र, काम के एपीआई के साथ काम नहीं करता और सर्वर साइड रेंडरिंग के लिए, जहां सर्वर पर शुरुआती वैल्यू सेट करने के लिए क्लाइंट हिंट डेटा का इस्तेमाल किया जा सकता है. उदाहरण के लिए, useNetworkStatus() हुक, सर्वर-साइड रेंडरिंग के लिए क्लाइंट संकेत से पास की गई शुरुआती वैल्यू का इस्तेमाल कर सकता है. क्लाइंट पर लागू किए जाने पर, अगर नेटवर्क असरदार टाइप में बदलाव होता है, तो वह खुद को अपडेट कर सकता है.

React के अडैप्टिव लोडिंग हुक और यूटिलिटी, वेब प्लैटफ़ॉर्म एपीआई का इस्तेमाल करके लागू की जाती हैं. जैसे, नेटवर्क की जानकारी, डिवाइस की मेमोरी, और हार्डवेयर के साथ एक साथ कई काम करना. इन एपीआई का इस्तेमाल करके, अन्य फ़्रेमवर्क और लाइब्रेरी पर भी, अडैप्टिव लोडिंग के कॉन्सेप्ट लागू किए जा सकते हैं. जैसे, Angular, Vue वगैरह.

अडैप्टिव लोडिंग की सुविधा के काम करने का तरीका

इस सेक्शन में, Facebook, eBay, Tinder वगैरह जैसी साइटों पर उपलब्ध अडैप्टिव लोडिंग और रीयल-वर्ल्ड के उदाहरणों का इस्तेमाल करने के डेमो दिए गए हैं.

React Movie के डेमो में, नेटवर्क की स्थिति के आधार पर मीडिया दिखाने के तरीके के बारे में बताया गया है. यह मूवी ब्राउज़ करने का एक ऐसा ऐप्लिकेशन है जो पोस्टर, जवाब, और कलाकारों की सूची दिखाता है. उपयोगकर्ता के असरदार कनेक्शन टाइप के आधार पर, यह तेज़ कनेक्शन पर अच्छी क्वालिटी के पोस्टर दिखाता है. वहीं, धीमे कनेक्शन वाले पोस्टर खराब क्वालिटी के पोस्टर दिखाता है.

Twitter में डेटा सेवर मोड है. इसका मकसद, इस्तेमाल किए जाने वाले डेटा की मात्रा को कम करना है. इस मोड में, इमेज की झलक कम रिज़ॉल्यूशन में लोड होती है. साथ ही, बड़ी इमेज सिर्फ़ तब लोड होती हैं, जब झलक पर टैप किया जाता है. इस विकल्प को चालू करने पर, iOS और Android डिवाइस इस्तेमाल करने वाले लोगों को इमेज से जुड़े डेटा के इस्तेमाल में 50% की बचत हुई. वहीं, वेब का इस्तेमाल करने वाले लोगों को 80% की बचत हुई. यहां React का एक डेमो दिया गया है, जो Twitter टाइमलाइन को दोहराने के लिए, 'डेटा सेव करें' हुक का इस्तेमाल करता है. DevTools का नेटवर्क पैनल खोलें और डेटा सेव करने की सुविधा बंद होने पर और चालू होने पर, डेटा ट्रांसफ़र होने की दर में अंतर देखें.

जब उपयोगकर्ता के हार्डवेयर या नेटवर्क की स्थिति ठीक न हो, तो eBay ज़ूम करने जैसी सुविधाओं को चालू और बंद करता है. ऐसा करने के लिए, कोड-स्प्लिटिंग और कोड लोड करने की सुविधा का इस्तेमाल किया जा सकता है. इससे, ज़्यादा इंटरैक्टिव कॉम्पोनेंट को शर्तों के हिसाब से लोड किया जा सकता है या बेहतर डिवाइसों पर ज़्यादा कंप्यूटिंग वाले ऑपरेशन चलाए जा सकते हैं. साथ ही, इन स्क्रिप्ट को धीमे डिवाइसों पर उपयोगकर्ताओं को नहीं भेजा जाता. 16 मिनट के इस वीडियो में देखें कि Addy ने eBay के प्रॉडक्ट पेज के डेमो पर, React.lazy() और Suspense का इस्तेमाल करके, इस पैटर्न को कैसे लागू किया है.

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

Facebook पर अडैप्टिव लोडिंग

अडैप्टिव लोडिंग में एक समस्या यह आती है कि उपलब्ध सिग्नल के आधार पर, डिवाइसों को हाई-एंड और लो-एंड क्लास में बांटा जाता है. मोबाइल डिवाइसों पर उपयोगकर्ता-एजेंट (UA) स्ट्रिंग, डिवाइस का नाम देती है. इसकी मदद से Facebook, मोबाइल डिवाइसों को क्लास में ग्रुप करने के लिए, डिवाइस की विशेषताओं के सार्वजनिक डेटा का इस्तेमाल करता है. हालांकि, डेस्कटॉप डिवाइसों पर UA सिर्फ़ डिवाइस के ऑपरेटिंग सिस्टम की जानकारी देता है.

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

24 मिनट का यह वीडियो देखें. इसमें नेट के मुताबिक, Facebook डिवाइस ग्रुपिंग की सुविधा इस्तेमाल करने का तरीका बताता है. साथ ही, ऐनिमेशन और JavaScript लोड करने के लिए, अडैप्टिव लोडिंग का इस्तेमाल भी करता है.

अडैप्टिव लोडिंग के बारे में ज़्यादा जानें

अडैप्टिव लोडिंग का मकसद, सभी के लिए अपनी साइटों को डिज़ाइन करना है. एक ऐसा मुख्य अनुभव बनाएं जो सभी के लिए बेहतरीन हो. इसके बाद, अगर उपयोगकर्ता के पास ज़रूरत के मुताबिक मेमोरी, सीपीयू या तेज़ नेटवर्क हो, तो इसे और भी शानदार बनाने के लिए टॉगल या लेयर की सुविधा करें. अडैप्टिव लोडिंग के बारे में ज़्यादा जानने के लिए, उपलब्ध डेमो देखें और Chrome Dev Summit का टॉक देखें: