Ele.me, चीन की सबसे बड़ी फ़ूड ऑर्डर और डिलीवरी कंपनी है. यह चीन के 200 से ज़्यादा शहरों में रहने वाले 26 करोड़ रजिस्टर्ड उपयोगकर्ताओं को सेवा देता है और इसमें 13 लाख से भी ज़्यादा रेस्टोरेंट लिस्टिंग हैं. मोबाइल पर खाना ऑर्डर करने वाले 99% उपयोगकर्ताओं के साथ, Ele.me ने मोबाइल वेब के अनुभव को बेहतर बनाने के लिए शुरुआत की है. इससे इंटरनेट कनेक्शन कमज़ोर होने पर, यह प्रक्रिया तेज़ी से और ज़्यादा भरोसेमंद हो जाती है. साथ ही, कई पेज वाले ऐप्लिकेशन के मुख्य तकनीकी मॉडल पर निर्भर है, जो अपनी कामकाज की ज़रूरतों को पूरा करता है.
- पहले से कैश मेमोरी में सेव किए गए सभी पेजों को लोड होने में 11.6% कम समय लगता है
- सभी पेजों पर, कॉन्टेंट लोड होने में औसतन 6.35% की कमी आई है.
- पहली बार लोड होने पर 3G नेटवर्क पर नियमित रूप से-इंटरैक्टिव टाइम-टू-इंटरैक्टिव की संख्या घटकर 4.93 सेकंड हो गई
ele.me PWA रिलीज़ करने के बाद, कॉन्टेंट लोड होने में लगने वाला समय काफ़ी कम हो गया है. इससे हमारा मोबाइल वेब अनुभव, चीन में खाने-पीने की चीज़ों की बुकिंग करने की सबसे तेज़ साइटों में से एक बन गया है.
स्पेंसर यांग, Ele.me PWA की प्रॉडक्ट मैनेजर
कई पेज वाले ऐप्लिकेशन और एक पेज के ऐप्लिकेशन के बीच चुनना
कई पेज वाले ऐप्लिकेशन (MPA) में, उपयोगकर्ता के नेविगेट किए जाने वाले हर रूट से सर्वर को पेज का पूरा अनुरोध ट्रिगर होता है. इसमें, पेज से जुड़ी ज़रूरी स्क्रिप्ट और स्टाइल भी शामिल होती हैं. यह सिंगल-पेज ऐप्लिकेशन (एसपीए) मॉडल से उलट होता है. इसमें हर रूट नेविगेशन, सिर्फ़ उस रूट से जुड़े कॉन्टेंट और डेटा के लिए फ़ेच ट्रिगर करता है. इसके बाद, यूज़र इंटरफ़ेस (यूआई) को क्लाइंट ऐप्लिकेशन पर चल रहे JavaScript कोड से बनाया जाता है.
हाल ही के सालों में, Ele.me में काफ़ी तेज़ी से तरक्की हुई है. इसकी वजह से कंपनी में अलग-अलग कारोबार की इकाइयां बढ़ी हैं. इन इकाइयों में, मुख्य https://ele.me डोमेन के तहत माइक्रो-सर्विस की ज़िम्मेदारी थी. Ele.me टीम ने इस नतीजे पर बताया कि इन अलग-अलग सेवाओं को अलग-अलग करने की सुविधा, मल्टी-पेज ऐप्लिकेशन (एमपीए) मॉडल के ज़रिए सबसे अच्छी तरह से काम करती है. इस मॉडल में हर टीम काम कर रही है और अपनी सेवा बनाए रखती है.
MPA में PRPL लागू करना
पीआरपीएल पैटर्न (प्रीलोड
अहम संसाधन, रेंडर शुरुआती रूट, प्री-कैश बाकी रूट, लेज़ी-लोड बाकी रूट), वेब डेवलपर को रेल का एक सेट उपलब्ध कराता है, जिससे PWA का स्ट्रक्चर गाइड किया जा सकता है. हालांकि, एसपीए पर पीआरपीएल की
अच्छी तरह से जाँच की गई है, लेकिन यह साफ़ नहीं था कि इसे
एमपीए पर कैसे लागू किया जाएगा. Ele.me ने अपने MPA को PWA के तौर पर बनाने के बारे में सोचते समय, PRPL की मानसिकता को अपनाने का फ़ैसला किया. ऐसा करने के लिए, वे पक्का करते हैं कि जब कोई उपयोगकर्ता किसी पेज पर जाता है, तो वह उस पेज के लिए ज़रूरी रिसॉर्स को पहले से लोड कर रहा है. इसके लिए, ज़रूरत के हिसाब से <link rel="preload"> को शामिल किया जाता है या उन स्क्रिप्ट को काफ़ी उथले लेवल पर दिखाया जाता है, ताकि ब्राउज़र के प्रीलोडर को ज़्यादा संकेतों की ज़रूरत न हो. जब भी ब्राउज़र पर सर्विस वर्कर काम करता है, तब वे सर्विस वर्कर को इंस्टॉल करके अपने PWA को धीरे-धीरे बेहतर बनाते हैं. इसके बाद, वे इसका इस्तेमाल अन्य टॉप-लेवल नेविगेशन रूट को फ़ेच और प्री-कैश करने के लिए करते हैं. इससे उपयोगकर्ताओं को PWA पर क्लिक करते ही, तेज़ी से लोड और रेंडरिंग का अनुभव मिलता है. एमपीए में मौजूद हर पेज का अपना रूट होता है. इसलिए, शुरुआती रूट को रेंडर करने की रफ़्तार को बढ़ाना, हर रूट के लिए ज़रूरी रेंडरिंग पाथ को ऑप्टिमाइज़ करने के सबसे सही तरीकों के बराबर है. इन बदलावों के साथ, सभी पेजों की लोड होने में लगने वाला कुल समय औसतन 6.35% कम हो गया है.
ट्रांज़िशन स्केलिंग स्क्रीन को जल्द से जल्द मुहैया कराएं
Ele.me, UX में कंकाल स्क्रीन के आइडिया को लागू करना चाहता था, जिससे यह पक्का होता है कि जब भी उपयोगकर्ता किसी भी बटन या लिंक पर टैप करता है, तो पेज तुरंत उपयोगकर्ता को उस नए पेज पर ले जाता है. इसके बाद, कॉन्टेंट उपलब्ध होते ही उस पेज पर कॉन्टेंट लोड हो जाता है. यह PWA की अनुमानित परफ़ॉर्मेंस को बेहतर बनाने के लिए भी ज़रूरी है. हालांकि, MPA में हर पेज का अपना शुरुआती रूट होता है, इसलिए हर नेविगेशन के लिए, लोड करने, पार्स करने, और आकलन करने से जुड़े सभी ज़रूरी काम को हर बार फिर से करना पड़ता है.
इससे बचने के लिए, Ele.me ने आधारभूत स्क्रीन को एक वास्तविक यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट के रूप में बनाया और फिर Vue.js के सर्वर साइड रेंडरिंग स्टैक का इस्तेमाल करके उसे बनाया और फिर HTML टेंप्लेट में डालने से पहले, Vue कॉम्पोनेंट को स्ट्रिंग में प्री-रेंडर किया. इससे उन्हें आधारभूत स्क्रीन को सीधे रेंडर करने और पेजों के बीच नेविगेट करते समय ज़्यादा फ़्लूइड ट्रांज़िशन हासिल करने की सुविधा मिलती है.
|
|
सर्विस वर्कर के साथ शेयर किए गए संसाधनों को कैश मेमोरी में सेव करना
जब कोई उपयोगकर्ता PWA को ब्राउज़ करता है, तो उसके लिए अलग-अलग रूट लोड होते हैं. ऐसे में, नेटवर्क से इन रूट को बार-बार लोड करने में काफ़ी नुकसान हो सकता है. इससे निपटने के लिए, Ele.me ने उन अहम रूट का विश्लेषण किया जो उपयोगकर्ताओं के लिए सबसे ज़्यादा अहम हैं, इन अहम रूट की डिपेंडेंसी इकट्ठा करने के लिए एक वेबपैक प्लगिन बनाया गया और फिर उपयोगकर्ता के क्लाइंट ब्राउज़र पर सर्विस वर्कर इंस्टॉल करते समय इन रूट को प्री-कैश किया गया. इन अहम रूट में JavaScript, सीएसएस, और वे इमेज शामिल हैं जो PWA का सामान्य यूज़र इंटरफ़ेस (यूआई) शेल बनाती हैं.
जो रूट अहम माने जाते हैं, लेकिन अहम नहीं होते उन्हें सर्विस वर्कर रनटाइम के दौरान कैश मेमोरी में सेव करता है, क्योंकि उपयोगकर्ता PWA में नेविगेट करना जारी रखता है. इसकी मदद से, Ele.me सभी नेटवर्क स्थितियों में उपयोगकर्ताओं को सीधे कैश मेमोरी से PWA उपलब्ध करा पाता है. नतीजे: पहले से कैश मेमोरी में सेव किए गए सभी पेजों का कॉन्टेंट लोड होने में 11.6% की कमी आई.