निकेई को पब्लिशिंग का 140 साल से ज़्यादा का इतिहास रहा है. यह जापान के सबसे भरोसेमंद मीडिया कारोबारों में से एक है. प्रिंट न्यूज़पेपर के साथ-साथ, उनकी डिजिटल प्रॉपर्टी पर हर महीने 45 करोड़ से ज़्यादा लोग आते हैं. बेहतर उपयोगकर्ता अनुभव देने और वेब पर अपने कारोबार को बढ़ाने के लिए, निकी ने नवंबर 2017 में प्रोग्रेसिव वेब ऐप्लिकेशन (PWA) को लॉन्च किया.https://r.nikkei.com उन्हें अब नए प्लैटफ़ॉर्म से शानदार नतीजे मिल रहे हैं.
परफ़ॉर्मेंस में बढ़ोतरी - स्पीड इंडेक्स दो गुना बेहतर है - इंटरैक्टिव में लगने वाला समय 14 सेकंड तेज़ है - प्रीफ़ेच के साथ 75% ज़्यादा तेज़ लोडिंग
कारोबार पर असर - ऑर्गैनिक ट्रैफ़िक 2.3 गुना - 58% ज़्यादा कन्वर्ज़न (सदस्यताएं) - हर दिन के सक्रिय उपयोगकर्ताओं की संख्या 49% ज़्यादा - हर सेशन में दो गुना पेज व्यू
व्यवसाय अवलोकन
चैलेंज
निकी ने अपनी लेगसी वेबसाइट पर मोबाइल ट्रैफ़िक में तेज़ी से बढ़ोतरी देखी, क्योंकि कई लोगों के लिए स्मार्टफ़ोन वेब का मुख्य ज़रिया बन गए थे. हालांकि, Lighthouse, एक ऑडिटिंग टूल जो किसी वेब पेज को स्कैन करता है और अलग-अलग कैटगरी में सुधार करने के सुझाव देता है, तो उसे पता चला कि उनकी साइट कई क्षेत्रों में मोबाइल के लिए पूरी तरह से ऑप्टिमाइज़ नहीं है. साथ ही, उस पर लोड होने की रफ़्तार बहुत धीमी थी.
उनकी वेबसाइट को लगातार इंटरैक्टिव बनने में ~20 सेकंड लग रहे थे. साथ ही, स्पीड इंडेक्स पर औसतन 10 सेकंड का समय लग रहा था. यह जानते हुए कि अगर किसी अनुभव को लोड होने में 3 सेकंड से ज़्यादा समय लगता है, तो 53% मोबाइल उपयोगकर्ता उस अनुभव को छोड़ देंगे. इसलिए, वह बेहतर अनुभव देने और वेब पर अपने कारोबार को बढ़ाने के लिए, लोड होने में लगने वाले समय को कम करना चाहता था.
स्पीड की वैल्यू को साफ़ तौर पर नहीं देखा जा सकता, खास तौर पर वित्तीय मामलों से जुड़ी खबरों के लिए. हमने स्पीड को अपनी मुख्य मेट्रिक में से एक बनाया है. हमारे ग्राहकों ने इस बदलाव की सराहना की है.
थाई शिजेमोरी, मैनेजर, डिजिटल स्ट्रेटजी
नतीजे
निकी ने शानदार परफ़ॉर्मेंस हासिल की. उनका लाइटहाउस स्कोर 23 से बढ़कर 82 हो गया. उनके इंटरैक्टिव होने में लगने वाले समय में 14 सेकंड का सुधार हुआ है. ऑर्गैनिक ट्रैफ़िक, स्पीड, कन्वर्ज़न रेट, और हर दिन के सक्रिय उपयोगकर्ताओं में भी बढ़ोतरी हुई.
PWA कई पेजों वाला ऐप्लिकेशन (MPA) है, जो वनिला JavaScript की मदद से फ़्रंट-एंड जटिलता को कम करता है. इस परफ़ॉर्मेंस को हासिल करने के लिए, पांच मुख्य फ़्रंट-एंड इंजीनियर ने साल भर तक काम किया.
Nikkei के फ़्रंट-एंड इंजीनियर ने साबित किया है कि UX की मदद से, कारोबार की परफ़ॉर्मेंस बेहतर होती है. हम वेब को बेहतर बनाने के अपने सफ़र को जारी रखने में पूरी तरह से लगे हुए हैं.
हिरोयुकी हिगाशी. प्रॉडक्ट मैनेजर, निक्की
समस्या का हल
निकी ने रिस्पॉन्सिव डिज़ाइन, वनीला JavaScript, और कई पेजों वाले आर्किटेक्चर का इस्तेमाल करके, एक प्रोग्रेसिव वेब ऐप्लिकेशन बनाया और लॉन्च किया. साथ ही, उन्होंने उपयोगकर्ताओं को बेहतर अनुभव देने पर ध्यान दिया. एक सर्विस वर्कर जोड़ने से, वे नेटवर्क पर ध्यान दिए बिना अनुमानित प्रदर्शन दे पाए. इससे यह भी पक्का हो जाता है कि लोकप्रिय लेख हमेशा उपलब्ध हैं और तुरंत लोड हो जाते हैं, क्योंकि उन्हें कैश मेमोरी का इस्तेमाल करके स्टोर किया जाता है. उन्होंने एक वेब ऐप्लिकेशन मेनिफ़ेस्ट जोड़ा. साथ ही, अपने सर्विस वर्कर के साथ मिलकर, उपयोगकर्ताओं को PWA इंस्टॉल करने की अनुमति मिलती है, ताकि इसे आसानी से ऐक्सेस किया जा सके. परफ़ॉर्मेंस पूरी तरह से उनके कंट्रोल में रहे, यह पक्का करने के लिए उन्होंने अपने तीसरे पक्ष के JavaScript को ऑप्टिमाइज़ किया.
सबसे सही तरीके
- मॉडर्न वेब एपीआई, कंप्रेस करने, और कोड ऑप्टिमाइज़ेशन के तरीकों का इस्तेमाल करके, कॉन्टेंट लोड होने की स्पीड और इंटरैक्टिविटी को बेहतर बनाएं.
- ऑफ़लाइन सहायता और होम स्क्रीन पर जोड़ें जैसी PWA की सुविधाएं जोड़कर, UX को तेज़ी से बेहतर बनाएं.
- परफ़ॉर्मेंस रणनीति में परफ़ॉर्मेंस बजट बनाएं.
तकनीकी जानकारी
गति से जुड़ी जानकारी होना ज़रूरी है
गति पहले से कहीं ज़्यादा ज़रूरी हो गई है. जैसे-जैसे स्मार्टफ़ोन कई लोगों का मुख्य ब्राउज़िंग डिवाइस बन गया, वैसे-वैसे निकी को अपनी सेवाओं पर मोबाइल ट्रैफ़िक में तेज़ी से बढ़ोतरी देखने को मिली. हालांकि, Lighthouse का इस्तेमाल करके उन्होंने महसूस किया कि उनकी पुरानी वेबसाइट मोबाइल के लिए पूरी तरह ऑप्टिमाइज़ नहीं है. स्पीड इंडेक्स की वजह से औसतन 10 सेकंड का डेटा लोड होता है. शुरुआत में बहुत धीमा लोड होता है और JavaScript का एक बड़ा बंडल होता है. अब निकी को अपनी वेबसाइट फिर से बनाने और वेब परफ़ॉर्मेंस के सबसे सही तरीकों को अपनाने का समय आ गया है. यहां नए PWA में नतीजे और परफ़ॉर्मेंस के मुख्य ऑप्टिमाइज़ेशन की जानकारी दी गई है.
तेज़ी से लोड करने के लिए, वेब एपीआई और सबसे सही तरीकों का इस्तेमाल करना
मुख्य अनुरोधों को पहले से लोड करें
क्रिटिकल पाथ को लोड करने को प्राथमिकता देना ज़रूरी है. एचटीटीपी/2 सर्वर पुश का इस्तेमाल करके, वे उन ज़रूरी JavaScript और सीएसएस बंडल को प्राथमिकता दे सकते हैं जिनके बारे में उन्हें पता है कि किसी उपयोगकर्ता को उनकी ज़रूरत होगी.
किसी भी मूल की यात्रा करने के लिए एक से ज़्यादा, महंगी दोतरफ़ा यात्रा से बचें
वेबसाइट को ट्रैकिंग, विज्ञापन और कई अन्य इस्तेमाल के उदाहरणों के लिए तीसरे पक्ष के संसाधन लोड करने पड़ते थे. उन्होंने
<link rel=preconnect>
का इस्तेमाल, डीएनएस/टीसीपी/एसएसएल के हैंडशेक को पहले से हल करने और तीसरे पक्ष के इन मुख्य ऑरिजिन के लिए नेगोशिएशन
के लिए किया.
अगले पेज को डाइनैमिक तौर पर प्रीफ़ेच करें
जब उन्हें लगता था कि उपयोगकर्ता किसी खास पेज पर जाएगा, तब उन्होंने
नेविगेशन के चालू होने का इंतज़ार नहीं किया. निकी, <link rel=prefetch> को डाइनैमिक तौर पर <head> में जोड़ता है और लिंक पर क्लिक करने से पहले ही अगले पेज को प्रीफ़ेच कर देता है. इससे झटपट पेज नेविगेशन चालू हो जाता है.
इनलाइन क्रिटिकल-पाथ सीएसएस
रेंडर होने से रोकने वाले सीएसएस को कम करना, स्पीड लोड करने के सबसे सही तरीकों में से एक है. वेबसाइट, सभी ज़रूरी सीएसएस को ब्लॉक करने वाली स्टाइलशीट को रेंडर करने के लिए, एक भी लाइनलाइन करती है. इस ऑप्टिमाइज़ेशन ने पहले काम के पेंट में एक सेकंड से ज़्यादा की कटौती की.
JavaScript बंडल को ऑप्टिमाइज़ करें
उनके पिछले अनुभव में, Nikkei के JavaScript बंडल शानदार थे, जिनका कुल वज़न 300 केबी से था. वनीला JavaScript को दोबारा लिखकर और रूट के आधार पर छोटे-छोटे हिस्सों में बांटने और पेड़ों को हिलाने-डुलाने जैसे मॉडर्न बंडलिंग ऑप्टिमाइज़ेशन से, उन्होंने इस ट्रैफ़िक के दिनों को कम किया. उन्होंने अपने JavaScript बंडल का साइज़ 80% कम कर दिया. रोलअप के साथ उनका साइज़ 60 केबी हो गया.
लागू किए गए अन्य सबसे सही तरीके
- कंप्रेस करना: Gzip/Brotli, फ़ास्टली सीडीएन का इस्तेमाल करके कंप्रेस किए जा सकने वाले सभी रिसॉर्स
- कैशिंग: एचटीटीपी कैश मेमोरी, एज साइड कैशिंग चालू करें
- इमेज ऑप्टिमाइज़ेशन: ऑप्टिमाइज़ेशन और इमेज फ़ॉर्मैट की पहचान के लिए, imgix का इस्तेमाल करें
- लेज़ी लोड के लिए गैर-ज़रूरी संसाधन: पेज के निचले हिस्से के फ़्रैगमेंट लोड करने के लिए, इंटरसेक्शन ऑब्ज़र्वर एपीआई का इस्तेमाल करें
- वेब फ़ॉन्ट लोड करने की रणनीति अपनानी: सिस्टम फ़ॉन्ट के इस्तेमाल को प्राथमिकता दें
- पहले काम के पेंट को ऑप्टिमाइज़ करें: कॉन्टेंट सर्वर साइड को रेंडर करें
- परफ़ॉर्मेंस बजट का इस्तेमाल करना: JavaScript ट्रांसमिशन और पार्स/कंपाइल समय को कम रखना
तीसरे पक्ष की JavaScript को ऑप्टिमाइज़ करना
हालांकि, अपनी स्क्रिप्ट की तुलना में तीसरे पक्ष के JavaScript को ऑप्टिमाइज़ करना आसान नहीं है, फिर भी निकी ने विज्ञापन से जुड़ी सभी स्क्रिप्ट को छोटा और बंडल किया है. ये स्क्रिप्ट अब अपने कॉन्टेंट डिलीवरी नेटवर्क (सीडीएन) से इस्तेमाल की जाती हैं. विज्ञापन से जुड़े टैग आम तौर पर दूसरी ज़रूरी स्क्रिप्ट को शुरू करने और लोड करने के लिए एक स्निपेट देते हैं. ये स्क्रिप्ट अक्सर पेज की रेंडरिंग को ब्लॉक कर देती हैं. साथ ही, डाउनलोड की गई हर स्क्रिप्ट के लिए नेटवर्क टर्नअराउंड समय की भी ज़रूरत होती है. निक्की ने नीचे दिए गए तरीके को अपनाया और उन्हें शुरू करने में 100 मि॰से॰ की सुधार किया. साथ ही, JS साइज़ में 30% की कमी आई:
- JS बंडलर का इस्तेमाल करके, सभी ज़रूरी स्क्रिप्ट को बंडल करें (उदाहरण के लिए, वेबपैक)
- एक साथ काम नहीं करने वाली प्रोसेस, बंडल की गई स्क्रिप्ट को लोड करती है, ताकि यह पेज रेंडरिंग को ब्लॉक न करे
- कैलकुलेटेड विज्ञापन बैनर को शैडो डीओएम (बनाम iframe) से अटैच करें
- इंटरसेक्शन ऑब्ज़र्वर एपीआई की मदद से, उपयोगकर्ता स्क्रोल पर विज्ञापनों को प्रोग्रेस के साथ लोड करें
वेबसाइट को लगातार बेहतर बनाना
इन बुनियादी ऑप्टिमाइज़ेशन के अलावा, निकी ने वेब ऐप्लिकेशन मेनिफ़ेस्ट और सर्विस वर्कर की मदद से, अपनी वेबसाइट को इंस्टॉल करने और ऑफ़लाइन काम करने लायक बनाया. अपने सर्विस वर्कर में कैश-फ़र्स्ट रणनीति का इस्तेमाल करने से, सभी मुख्य संसाधन और मुख्य लेख कैश मेमोरी में सेव किए जाते हैं और अस्थिर या ऑफ़लाइन नेटवर्क जैसी आपातकालीन स्थितियों में भी फिर से इस्तेमाल किया जाता है. इससे, लगातार बेहतर परफ़ॉर्मेंस मिलती है.
निक्के को हैक करो
पिछले 140 से ज़्यादा साल से काम कर रही एक पारंपरिक समाचार समाचार कंपनी ने वेब और PWA की मदद से, अपने डिजिटल प्लैटफ़ॉर्म को तेज़ी से आगे बढ़ाया है. निकी के फ़्रंट-एंड इंजीनियरों ने साबित किया कि बेहतरीन UX से कारोबार की परफ़ॉर्मेंस शानदार होती है. कंपनी वेब पर क्वालिटी का एक नया लेवल लाने की अपनी यात्रा को जारी रखेगी.