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

Yuriko Hirota
Yuriko Hirota

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

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

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

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

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

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

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

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

Yahoo! JAPAN News ने ब्लॉक करने वाले टूल हटा दिए हैं:

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

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

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

अगर आपको Cache-control के विकल्पों के बारे में ज़्यादा जानना है, तो यह फ़्लोचार्ट देखें.

आंकड़ों में bfcache का असर

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 की मदद से, पेजों के बीच बैक/फ़ॉरवर्ड नेविगेशन तुरंत हो जाते हैं, तो उपयोगकर्ता पेजों पर ज़्यादा समय तक बने रहते हैं. इससे विज्ञापन व्यू बढ़ते हैं और विज्ञापन से होने वाली आय भी बढ़ती है.

bfcache की मदद से, वेबसाइट पर उपयोगकर्ता अनुभव को बेहतर बनाया जा सकता है

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

Yahoo! JAPAN News के उपयोगकर्ताओं की गतिविधि का मुख्य तरीका यह है:

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

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

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

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

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

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

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

कम शब्दों में कहें, तो Yahoo! के लिए bfcache इस्तेमाल करने के फ़ायदे JAPAN News में ये शामिल हैं:

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

नतीजा

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

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