बैक/फ़ॉरवर्ड कैश मेमोरी की मदद से, Yahoo! JAPAN News ने मोबाइल पर रेवेन्यू में 9% की बढ़ोतरी की

Yuriko Hirota
Yuriko Hirota

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

bfcache के बारे में web.dev लेख

Yahoo! जापान के सबसे लोकप्रिय न्यूज़ प्लैटफ़ॉर्म में से एक, Yahoo! Japan News ने bfcache के हिट रेट को बेहतर बनाने के लिए लगातार काम किया. इस वजह से, उसे उपयोगकर्ता अनुभव और कारोबार में काफ़ी सुधार देखने को मिला. खास तौर पर, उन्होंने जो A/B टेस्ट किया था उसके नतीजों से पता चला कि bfcache का इस्तेमाल करने वाले पेजों के विज्ञापन रेवेन्यू में 9% की बढ़ोतरी हुई है.

इस केस स्टडी में बताया गया है कि Yahoo! JAPAN News ने bfcache के लिए ब्लॉकर हटा दिए. साथ ही, bfcache ने उपयोगकर्ता अनुभव को कैसे बेहतर बनाया.

bfcache के लिए ब्लॉक करने वाली कुकी हटाना

bfcache, Chrome 86 से उपलब्ध है. यह सभी मॉडर्न ब्राउज़र पर भी उपलब्ध है. हालांकि, bfcache का पूरा फ़ायदा पाने के लिए, वेबसाइट पर संभावित ब्लॉकर हटाने ज़रूरी हैं. Yahoo! JAPAN News को ये समस्याएं आईं:

  1. unload हैंडलर का इस्तेमाल.
  2. Cache-control हेडर पर no-store डायरेक्टिव का इस्तेमाल करना.

Chrome DevTools > ऐप्लिकेशन > बैक/फ़ॉरवर्ड कैश मेमोरी पर जाकर, अपनी वेबसाइट पर मौजूद मुख्य ब्लॉकर की जांच की जा सकती है. इसके अलावा, फ़ील्ड में ऐप्लिकेशन के असल इस्तेमाल के आधार पर, ब्लॉकर के बारे में ज़्यादा जानकारी पाने के लिए, notRestoredReasons API का इस्तेमाल किया जा सकता है.

यहां बताया गया है कि Yahoo! JAPAN News ने अपने ब्लॉकर हटा दिए हैं:

CCNS का इस्तेमाल उन पेजों के लिए किया जाता है जिन्हें किसी भी स्थिति में कैश मेमोरी में सेव नहीं किया जाना चाहिए. हालांकि, इसमें यह चेतावनी दी गई है कि CCNS वाले पेजों को किसी भी कैश मेमोरी टेक्नोलॉजी का फ़ायदा नहीं मिलता. इसमें सीडीएन एज सर्वर और लोकल कैश मेमोरी भी शामिल हैं.

अगर आपके पास CCNS हेडर है, तो यह इस बारे में चर्चा करने का एक बेहतरीन मौका है कि आपकी वेबसाइट के लिए सही Cache-control रणनीतियां क्या हैं. no-store और no-cache के बीच मुख्य अंतर यहां दिए गए हैं.

Cache-control: no-store Cache-control: no-cache
  • जवाब को कैश मेमोरी में सेव करने की अनुमति नहीं है.
  • इसलिए, हर अनुरोध पर पूरा जवाब फ़ेच किया जाता है.
  • इसका इस्तेमाल निजी जवाबों के लिए किया जाना चाहिए.
  • जवाब को कैश मेमोरी में तब तक सेव किया जा सकता है, जब तक हर बार इस्तेमाल करने से पहले सर्वर से इसकी पुष्टि न कर ली जाए.
  • यह ऐसी सार्वजनिक प्रतिक्रियाएं होनी चाहिए जिनकी पुष्टि आपको हर बार फिर से करनी हो. उदाहरण के लिए, किसी समाचार वेबसाइट का होम पेज. हालांकि, ऐसे में भी कैश मेमोरी में सेव करने का समय बहुत कम होने से परफ़ॉर्मेंस बेहतर हो सकती है और मुख्य सर्वर पर काम का बोझ कम हो सकता है.

cache-control विकल्पों के बारे में ज़्यादा जानने के लिए, cache-control फ़्लोचार्ट देखें.

असर दिखाने के लिए A/B टेस्टिंग

bfcache के असर का आकलन करने के लिए, Yahoo! JAPAN News ने दो हफ़्तों तक A/B टेस्ट किया. उन्होंने अपने पेजों के एक ग्रुप में, बैक-फ़ॉरवर्ड कैश मेमोरी से जुड़ी समस्याओं को ठीक करने वाला वर्शन दिखाया. वहीं, दूसरे ग्रुप में ऐसे पेजों का वर्शन दिखाया जो बैक-फ़ॉरवर्ड कैश मेमोरी की सुविधा के लिए ज़रूरी शर्तें पूरी नहीं करते. उन्होंने ऐसे यूआरएल पाथ की जांच की जिन पर काफ़ी ट्रैफ़िक आता है, ताकि यह पक्का किया जा सके कि टेस्ट से काम के नतीजे मिले. पेजों के विज़ुअल या फ़ंक्शन में कोई और अंतर नहीं था.

इस वीडियो में, bfcache वाली और bfcache के बिना वाली वेबसाइट की तुलना की गई है. यहां देखा जा सकता है कि बैक/फ़ॉरवर्ड कैश मेमोरी की सुविधा चालू होने पर, पीछे या आगे के पेज पर नेविगेट करते समय वेबसाइट बहुत तेज़ी से लोड होती है.

सबसे अच्छी बात यह है कि bfcache की सुविधा चालू करने वाले ग्रुप के पेज व्यू और विज्ञापन से मिलने वाले रेवेन्यू में काफ़ी बढ़ोतरी हुई. खास तौर पर, मोबाइल डिवाइसों पर ऐसा हुआ.

Yahoo! को मिले नतीजों के बारे में यहां जानकारी दी गई है JAPAN News ने bfcache के लिए A/B टेस्ट किया. ज़्यादा जानकारी के लिए, उनकी केस स्टडी देखें.

मेट्रिक मोबाइल पर कन्वर्ज़न में बढ़ोतरी (%) उछाल % (डेस्कटॉप)
bfcache हिट रेट +54.03 पॉइंट (0.04% → 54.07%) +47.28 पॉइंट (0.02% → 47.30%)
पेज व्यू +2.26% +0.65%
विज्ञापनों से होने वाली आय +9.0% +0.6%

bfcache की मदद से, पेजों के बीच तुरंत आगे-पीछे नेविगेट किया जा सकता है. इससे उपयोगकर्ता, पेजों पर ज़्यादा समय तक बने रहते हैं. इस वजह से, विज्ञापन व्यू बढ़ते हैं और विज्ञापन से मिलने वाले रेवेन्यू में बढ़ोतरी होती है.

बेहतर उपयोगकर्ता अनुभव

पेज तुरंत लोड होने पर, नेविगेशन ज़्यादा आसान लगता है.

Yahoo! JAPAN News में, उपयोगकर्ताओं की मुख्य गतिविधियों में से एक है कई लेख पढ़ना:

  1. लेखों की सूची पर जाएं.
  2. पढ़ने के लिए किसी लेख पर क्लिक करें.
  3. इसके बाद, लेखों की सूची पर वापस जाएं.
  4. पढ़ने के लिए किसी दूसरे लेख पर क्लिक करें.

bfcache से पहले, जब उपयोगकर्ता किसी लेख को पढ़ लेते थे, तो उन्हें लेखों की सूची वाले पेज के फिर से लोड होने का इंतज़ार करना पड़ता था. यह उन लोगों के लिए समस्या पैदा कर सकता है जो सूची पर वापस जाकर, कोई दूसरा लेख पढ़ना चाहते हैं.

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

बैकवर्ड नेविगेशन के लिए बैक/फ़ॉरवर्ड कैश मेमोरी का इस्तेमाल करने पर, इस समस्या को हल किया जा सकता है. इससे स्क्रोल करने की जगह को तुरंत और सही तरीके से वापस लाया जा सकता है.

पिछले पेज पर जाने के लिए दो फ़िल्मस्ट्रिप. ऊपर वाली फ़िल्मस्ट्रिप को bfcache की मदद से हैंडल किया गया है. इसमें 0.3 सेकंड लगे. वहीं, नीचे वाली फ़िल्मस्ट्रिप को bfcache की मदद के बिना हैंडल किया गया है. इसमें 3.3 सेकंड लगे.

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

जब उपयोगकर्ता सीधे एक लेख से दूसरे लेख पर जाते हैं और फिर वापस आते हैं, तब भी ऐसा ही होता है:

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

संक्षेप में, Yahoo! JAPAN News में ये शामिल हैं:

  • पेज व्यू में बढ़ोतरी: जब पेजों को बैक-फ़ॉरवर्ड कैश मेमोरी में सेव किया जाता है, तब उपयोगकर्ताओं के वेबसाइट पर नेविगेट करने की संभावना बढ़ जाती है.
  • रेवेन्यू में बढ़ोतरी: हर सेशन में पेजव्यू बढ़ने की वजह से, विज्ञापनों के इंप्रेशन में बढ़ोतरी हुई. इससे मोबाइल पर रेवेन्यू में 9% की बढ़ोतरी हुई. यह बढ़ोतरी, bfcache के बिना टेस्ट ग्रुप की तुलना में हुई.

अभी bfcache लागू करें

संक्षेप में कहें, तो bfcache की सुविधा से आपकी वेबसाइट तुरंत खुलती है. साथ ही, इससे उपयोगकर्ता अनुभव को बेहतर बनाने में मदद मिलती है और आपकी वेबसाइट पर लोगों की दिलचस्पी बढ़ती है.

Chrome की टीम, bfcache को ब्लॉक करने वाली समस्याओं पर लगातार नज़र रख रही है. खास तौर पर, यहां दी गई वजहों पर. ऐसा इसलिए, क्योंकि ये ऐसी सामान्य वजहें हैं जिनकी वजह से bfcache का इस्तेमाल नहीं किया जाता. आने वाले समय में, हो सकता है कि ये बैक-फ़ॉरवर्ड कैश मेमोरी के इस्तेमाल को न रोकें. हालांकि, तब तक इंतज़ार करने की कोई ज़रूरत नहीं है. bfcache का फ़ायदा पाने के लिए, bfcache को ब्लॉक करने वाले एलिमेंट देखें. साथ ही, इन सामान्य और अन्य कम सामान्य पैटर्न से बचें.