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

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

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

'Chrome डेवलपर समिट' बातचीत में, Google के ऐडी उस्मानी और Facebook के नेट श्लॉस ने इस समस्या का हल निकाला है. ऐसे पेज को डिलीवर करने का एक पैटर्न जो उपयोगकर्ता को आने वाली मुश्किलों को बेहतर तरीके से पूरा करता है. इसे अडैप्टिव लोडिंग कहते हैं.

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

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

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

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

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

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

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

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

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

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

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

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

Navigator.deviceMemory

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

Navigator.hardwareConcurrency

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

NetworkInformation.effectiveType

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

NetworkInformation.saveData

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

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

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

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

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

• उपयोगकर्ता की डेटा बचाने की सेटिंग की प्राथमिकताओं के आधार पर बदलाव करने के लिए, useSaveData() हुक.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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