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

Yuriko Hirota
Yuriko Hirota

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

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

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

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

बैक-फ़ॉरवर्ड कैश मेमोरी की सुविधा से, ब्लॉक करने वाले यूआरएल हटाना

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

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

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

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

इस वीडियो में वेबसाइट को बैक-फ़ॉरवर्ड कैश मेमोरी और बैक-फ़ॉरवर्ड कैश मेमोरी की सुविधा के बिना दिखाया गया है. यह देखा जा सकता है कि बैक या फ़ॉरवर्ड नेविगेशन के दौरान, बैक-फ़ॉरवर्ड कैश मेमोरी की सुविधा वाली वेबसाइट तेज़ी से लोड होती है.

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

Yahoo! पर इसका क्या असर हुआ, इस बारे में जानकारी यहां दी गई है JAPAN News के बीएफ़कैशे A/B टेस्ट की जानकारी. (ज़्यादा जानकारी उनके केस स्टडी लेख में देखी जा सकती है).

मेट्रिक प्रमोशनल कॉन्टेंट की परफ़ॉर्मेंस में हुई बढ़ोतरी का प्रतिशत (मोबाइल) प्रमोशनल कॉन्टेंट की परफ़ॉर्मेंस में हुई बढ़ोतरी का प्रतिशत (डेस्कटॉप)
Bfcache हिट दर +54.03 पॉइंट (0.04% → 54.07%) +47.28 पॉइंट (0.02% → 47.30%)
पेज व्यू 2.26%से ज़्यादा 0.65% से ज़्यादा
विज्ञापनों से होने वाली आय 9%से ज़्यादा 0.6% से ज़्यादा

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

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

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

Yahoo! में JAPAN News, उपयोगकर्ता के सफ़र की एक अहम जानकारी इस तरह है:

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

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

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

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

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

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

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

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

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

नतीजा

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

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