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