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 की परफ़ॉर्मेंस में काफ़ी बढ़ोतरी हुई. उनका लाइटहाउस स्कोर 23 से बढ़कर 82 हो गया. इंटरैक्टिव होने में लगने वाला समय 14 सेकंड कम हो गया. ऑर्गैनिक ट्रैफ़िक, स्पीड, कन्वर्ज़न रेट, और हर दिन के सक्रिय उपयोगकर्ताओं की संख्या में भी बढ़ोतरी हुई.
PWA एक मल्टी-पेज ऐप्लिकेशन (एमपीए) है, जो फ़्रंट-एंड की जटिलता को कम करता है. इसे वैनिला JavaScript के साथ बनाया गया है. इस परफ़ॉर्मेंस को हासिल करने के लिए, पांच मुख्य फ़्रंट-एंड इंजीनियर ने एक साल तक काम किया.
Nikkei के फ़्रंट-एंड इंजीनियरों ने यह साबित किया है कि बेहतर UX से कारोबार की परफ़ॉर्मेंस अच्छी होती है. हम वेब पर अच्छी क्वालिटी का कॉन्टेंट उपलब्ध कराने के लिए, लगातार काम कर रहे हैं.
हिरोयुकी हिगाशी. प्रॉडक्ट मैनेजर, Nikkei
समाधान
Nikkei ने रिस्पॉन्सिव डिज़ाइन, वनिला JavaScript, और कई पेज वाले आर्किटेक्चर का इस्तेमाल करके एक प्रोग्रेसिव वेब ऐप्लिकेशन बनाया और लॉन्च किया. उसका फ़ोकस उपयोगकर्ता को बेहतर अनुभव देने पर था. सर्विस वर्कर जोड़ने के बाद, वे किसी भी नेटवर्क पर बेहतर परफ़ॉर्मेंस दे पाए. इससे यह भी पक्का होता है कि सबसे लोकप्रिय लेख हमेशा उपलब्ध हैं और तुरंत लोड हो जाते हैं. ऐसा इसलिए, क्योंकि उन्हें कैश मेमोरी का इस्तेमाल करके स्टोर किया जाता है. उन्होंने वेब ऐप्लिकेशन का मेनिफ़ेस्ट जोड़ा है. साथ ही, अपने सर्विस वर्कर की मदद से, उपयोगकर्ताओं को PWA इंस्टॉल करने की सुविधा दी है, ताकि इसे आसानी से ऐक्सेस किया जा सके. यह पक्का करने के लिए कि परफ़ॉर्मेंस पूरी तरह से उनके कंट्रोल में रहे, उन्होंने अपने तीसरे पक्ष की JavaScript को ऑप्टिमाइज़ किया.
सबसे सही तरीके
- आधुनिक वेब एपीआई, कंप्रेशन, और कोड ऑप्टिमाइज़ेशन के तरीकों का इस्तेमाल करके, कॉन्टेंट लोड होने की स्पीड और इंटरैक्टिविटी को बेहतर बनाएं.
- ऑफ़लाइन सहायता और होम स्क्रीन पर जोड़ें जैसी PWA की सुविधाएं जोड़कर, उपयोगकर्ता अनुभव को बेहतर बनाएं.
- परफ़ॉर्मेंस की रणनीति में परफ़ॉर्मेंस बजट बनाएं.
तकनीकी जानकारी
हम जानते हैं कि आपका समय बहुत कीमती है
स्पीड अब पहले से ज़्यादा ज़रूरी है. स्मार्टफ़ोन, कई उपयोगकर्ताओं के लिए ब्राउज़ करने का मुख्य डिवाइस बन गया है. इस वजह से, Nikkei को अपनी सेवा पर मोबाइल ट्रैफ़िक में तेज़ी से बढ़ोतरी दिखी. हालांकि, Lighthouse का इस्तेमाल करने पर, उन्हें पता चला कि उनकी लेगसी वेबसाइट मोबाइल के लिए पूरी तरह से ऑप्टिमाइज़ नहीं की गई है. इसकी स्पीड इंडेक्स औसतन 10 सेकंड थी. साथ ही, शुरुआती लोड बहुत धीमा था और JavaScript बंडल का साइज़ बहुत बड़ा था. अब Nikkei को अपनी वेबसाइट को फिर से बनाना था और वेब की परफ़ॉर्मेंस को बेहतर बनाने के सबसे सही तरीकों को अपनाना था. यहां नए PWA में परफ़ॉर्मेंस के नतीजे और मुख्य ऑप्टिमाइज़ेशन के बारे में बताया गया है.
वेब एपीआई और सबसे सही तरीकों का इस्तेमाल करके, लोडिंग की स्पीड बढ़ाना
मुख्य अनुरोधों को पहले से लोड करना
क्रिटिकल पाथ को लोड करने को प्राथमिकता देना ज़रूरी है. एचटीटीपी/2 सर्वर पुश का इस्तेमाल करके, वे उन ज़रूरी JavaScript और CSS बंडल को प्राथमिकता दे सकते हैं जिनकी उपयोगकर्ता को ज़रूरत होगी.
किसी भी ऑरिजिन के लिए, एक से ज़्यादा बार और ज़्यादा किराये के लिए, राउंड ट्रिप से बचें
वेबसाइट को ट्रैकिंग, विज्ञापनों, और कई अन्य कामों के लिए तीसरे पक्ष के रिसॉर्स लोड करने की ज़रूरत थी. उन्होंने तीसरे पक्ष के इन मुख्य ऑरिजिन के लिए, डीएनएस/टीसीपी/एसएसएल हैंडशेक और बातचीत को पहले से हल करने के लिए, <link rel=preconnect> का इस्तेमाल किया.
अगले पेज को डाइनैमिक तौर पर पहले से लोड करना
जब उन्हें भरोसा था कि उपयोगकर्ता किसी पेज पर जाएगा, तो वे नेविगेशन के होने का इंतज़ार नहीं करते थे. Nikkei, <head> में डाइनैमिक तौर पर <link rel=prefetch> जोड़ता है. साथ ही, उपयोगकर्ता के लिंक पर क्लिक करने से पहले अगले पेज को पहले से फ़ेच करता है. यह झटपट पेज नेविगेशन को चालू करता है.
इनलाइन क्रिटिकल पाथ सीएसएस
पेज को तेज़ी से लोड करने के सबसे सही तरीकों में से एक है, रेंडर ब्लॉक करने वाली सीएसएस को कम करना. वेबसाइट सभी ज़रूरी सीएसएस को रेंडर ब्लॉक करने वाली स्टाइलशीट के साथ इनलाइन करती है. इस ऑप्टिमाइज़ेशन से, फ़र्स्ट मीनिंगफ़ुल पेंट में एक सेकंड से ज़्यादा की कमी आई.
JavaScript बंडल ऑप्टिमाइज़ करना
पहले, Nikkei के JavaScript बंडल का साइज़ बहुत ज़्यादा था और उनका कुल साइज़ 300 केबी से ज़्यादा था. वेनिला JavaScript को फिर से लिखने और आधुनिक बंडलिंग ऑप्टिमाइज़ेशन की मदद से, जैसे कि रूट-आधारित चंकिंग और ट्री-शैकिंग, वे इस ब्लोट को कम कर पाए. उन्होंने अपने JavaScript बंडल का साइज़ 80% तक कम कर दिया, ताकि RollUp की मदद से, इसे 60 केबी का कर दिया जाए.
लागू किए गए अन्य सबसे सही तरीके
- कंप्रेसन: Fastly CDN का इस्तेमाल करके, Gzip/Brotli की मदद से सभी संकुचित किए जा सकने वाले संसाधन
- कैश मेमोरी में सेव करना: एचटीटीपी कैश मेमोरी में सेव करने की सुविधा, एज साइड कैश मेमोरी में सेव करने की सुविधा चालू करना
- इमेज ऑप्टिमाइज़ेशन: ऑप्टिमाइज़ेशन और इमेज फ़ॉर्मैट का पता लगाने के लिए, imgix का इस्तेमाल करें
- ग़ैर-ज़रूरी रिसॉर्स को लेज़ी लोड करें: सबसे नीचे वाले फ़्रैगमेंट को लोड करने के लिए, इंटरसेक्शन ऑब्ज़र्वर एपीआई का इस्तेमाल करें
- वेब फ़ॉन्ट लोड करने की रणनीति बनाएं: सिस्टम फ़ॉन्ट के इस्तेमाल को प्राथमिकता दें
- फ़र्स्ट मीनिंगफ़ुल पेंट को ऑप्टिमाइज़ करना: कॉन्टेंट को सर्वर साइड पर रेंडर करें
- परफ़ॉर्मेंस बजट का इस्तेमाल करना: JavaScript ट्रांसमिशन और पार्स/कंपाइल करने में लगने वाले समय को कम रखना
तीसरे पक्ष के JavaScript को ऑप्टिमाइज़ करना
हालांकि, आपकी स्क्रिप्ट के मुकाबले तीसरे पक्ष के JavaScript को ऑप्टिमाइज़ करना उतना आसान नहीं है, लेकिन Nikkei ने विज्ञापन से जुड़ी सभी स्क्रिप्ट को छोटा करके बंडल कर दिया, जो अब उनके कॉन्टेंट डिलीवरी नेटवर्क (सीडीएन) से मिलती हैं. विज्ञापन से जुड़े टैग में आम तौर पर, अन्य ज़रूरी स्क्रिप्ट को शुरू करने और लोड करने के लिए स्निपेट होता है. यह स्निपेट अक्सर पेज रेंडरिंग को ब्लॉक करता है. साथ ही, डाउनलोड की गई हर स्क्रिप्ट के लिए, नेटवर्क के ज़्यादा समय की ज़रूरत होती है. Nikkei ने इस तरीका का इस्तेमाल किया और शुरुआती समय को 100 मिलीसेकंड तक बेहतर किया. साथ ही, JS के साइज़ को 30% तक कम किया:
- JS बंडलर का इस्तेमाल करके, सभी ज़रूरी स्क्रिप्ट बंडल करें. उदाहरण के लिए, Webpack)
- बंडल की गई स्क्रिप्ट को एसिंक्रोनस तरीके से लोड करें, ताकि यह पेज रेंडरिंग को ब्लॉक न करे
- कैलकुलेट किए गए विज्ञापन बैनर को शैडो डीओएम (vs iframe) से अटैच करना
- Intersection Observer API का इस्तेमाल करके, उपयोगकर्ता के स्क्रोल करने पर विज्ञापनों को धीरे-धीरे लोड करना
वेबसाइट को लगातार बेहतर बनाना
इन बुनियादी ऑप्टिमाइज़ेशन के अलावा, निक्की ने वेब ऐप्लिकेशन मेनिफ़ेस्ट और सेवा देने वाले लोगों की मदद ली, ताकि वे अपनी वेबसाइट को इंस्टॉल कर सकें और ऑफ़लाइन भी काम कर सकें. अपनी सेवा वर्कर में कैश-फ़र्स्ट रणनीति का इस्तेमाल करके, सभी मुख्य संसाधन और टॉप लेख कैश स्टोरेज में सेव किए जाते हैं. साथ ही, इन्हें खराब या ऑफ़लाइन नेटवर्क जैसी आपातकालीन स्थितियों में भी फिर से इस्तेमाल किया जाता है. इससे, लगातार और ऑप्टिमाइज़ की गई परफ़ॉर्मेंस मिलती है.
Hack the Nikkei
यह एक ऐसी पारंपरिक दैनिक अखबार कंपनी है जिसका इतिहास 140 से ज़्यादा साल पुराना है. इसने वेब और PWA की मदद से, डिजिटल प्लैटफ़ॉर्म पर अपनी पहुंच को तेज़ी से बढ़ाया है. Nikkei के फ़्रंट-एंड इंजीनियरों ने साबित किया है कि बेहतर यूज़र एक्सपीरियंस से कारोबार की परफ़ॉर्मेंस बेहतर होती है. वेब पर क्वालिटी का एक नया लेवल लाने की अपनी यात्रा को कंपनी जारी रखेगी.