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

Yuriko Hirota
Yuriko Hirota

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

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

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 एपीआई का इस्तेमाल करके, फ़ील्ड में असल इस्तेमाल के आधार पर ब्लॉक करने वाले टूल के बारे में ज़्यादा जानकारी देखी जा सकती है.

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 की सुविधा के साथ और उसके बिना वेबसाइट की परफ़ॉर्मेंस की तुलना की गई है. इससे पता चलता है कि 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 की मदद से काम करती है: स्क्रोल की पोज़िशन तुरंत और सही तरीके से वापस आ जाती है.

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

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

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

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

खास तौर पर, Yahoo! के लिए bfcache के फ़ायदे JAPAN News में ये शामिल हैं:

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

bfcache को अभी लागू करना

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

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