چگونه Back/Forward Cache به Yahoo! JAPAN News درآمد را 9 درصد در موبایل افزایش داد

یوریکو هیروتا
Yuriko Hirota

کش عقب/ جلو (یا bfcache) یک بهینه سازی مرورگر است که پیمایش فوری به عقب و جلو را امکان پذیر می کند. این به طور قابل توجهی تجربه مرور را برای کاربران بهبود می بخشد، به خصوص برای وب سایت هایی که شامل بسیاری از پیمایش های رفت و برگشتی هستند.

مقاله web.dev در bfcache

یاهو JAPAN News، یکی از محبوب‌ترین پلت‌فرم‌های خبری در ژاپن، تلاش‌های هماهنگی را برای بهبود نرخ بازدید bfcache خود انجام داد و در نتیجه تجربه کاربر و بهبودهای تجاری قابل توجهی را شاهد بود. به طور خاص، نتایج آزمایش A/B که آنها انجام دادند نشان داد که صفحاتی که از bfcache استفاده می‌کنند 9 درصد افزایش درآمد تبلیغات داشتند.

این مطالعه موردی توضیح خواهد داد که چگونه Yahoo! JAPAN News مسدود کننده های bfcache را حذف کرد و چگونه bfcache تجربه کاربر را به شدت بهبود بخشید.

حذف مسدود کننده ها برای bfcache

bfcache از Chrome 86 در دسترس بوده است و همچنین در تمام مرورگرهای مدرن موجود است. با این حال، استفاده کامل از bfcache مستلزم حذف مسدود کننده های بالقوه در وب سایت خود است. برخی از مسدود کننده های اصلی یاهو! اخبار ژاپن که با آنها روبرو شد عبارت بودند از:

  1. استفاده از کنترل کننده های unload
  2. استفاده از دستورالعمل no-store در هدرهای Cache-control

می‌توانید با رفتن به Chrome Dev Tools > Applications > Back/Forward Cache ( جزئیات بیشتر )، یا با استفاده از notRestoredReasons API بررسی کنید که چه مسدودکننده‌های اصلی برای وب‌سایت شما وجود دارد تا نمای جامع‌تری از مسدودکننده‌ها بر اساس استفاده واقعی در این زمینه داشته باشید. .

در اینجا نحوه یاهو! JAPAN News مسدود کننده های خود را حذف کرده است:

CCNS برای صفحاتی در نظر گرفته شده است که هرگز نباید تحت هیچ شرایطی کش شوند. این با این هشدار همراه است که هیچ صفحه‌ای با CCNS نمی‌تواند از هیچ فناوری ذخیره‌سازی، از جمله سرورهای لبه CDN و کش‌های محلی بهره‌مند شود.

اگر هدر CCNS دارید، این یک فرصت عالی برای بحث در مورد استراتژی های مناسب Cache-control برای وب سایت شما است. در اینجا تفاوت های اصلی بین no-store و no-cache وجود دارد.

Cache-control: no-store Cache-control: no-cache
  • پاسخ مجاز نیست در حافظه پنهان ذخیره شود.
  • در نتیجه، پاسخ در هر درخواست به طور کامل واکشی می شود.
  • این باید برای پاسخ های خصوصی استفاده شود.
  • پاسخ مجاز است تا زمانی که قبل از هر بار استفاده مجدداً با سرور تأیید شود در حافظه پنهان ذخیره شود.
  • این باید پاسخ‌های عمومی باشد که می‌خواهید هر بار مجدداً تأیید شوند (به عنوان مثال، صفحه اصلی یک وب‌سایت خبری - اگرچه حتی در آن زمان زمان ذخیره بسیار کوتاه می‌تواند عملکرد را بهبود بخشد و کار را از سرورهای اصلی تخلیه کند).

اگر علاقه مند به کسب اطلاعات بیشتر در مورد گزینه های Cache-control هستید، این فلوچارت کمک بزرگی است.

تاثیر bfcache در اعداد

برای اندازه گیری تأثیر bfcache، Yahoo! JAPAN News یک تست A/B به مدت 2 هفته انجام داد، که در آن نسخه‌ای از صفحات خود را با اصلاحات bfcache خود به یک گروه و نسخه‌ای با صفحاتی که برای bfcache واجد شرایط نبودند به گروهی دیگر ارائه کردند. آنها مسیرهای URL را با حجم قابل توجهی از ترافیک انتخاب کردند تا آزمایش بتواند به نتایج معناداری دست یابد. هیچ تفاوت ظاهری یا عملکردی دیگری بین 2 نسخه وجود نداشت.

در اینجا یک ویدیو مقایسه وب سایت با 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 فوری می شود، کاربران تمایل دارند مدت بیشتری در صفحات بمانند، بنابراین بازدیدهای تبلیغاتی را افزایش می دهند که منجر به افزایش درآمد تبلیغات می شود.

bfcache تجربه کاربری یکپارچه را در وب سایت افزایش می دهد

هنگامی که صفحات فورا بارگیری می شوند، ناوبری یکپارچه تر احساس می شود.

در یاهو ژاپن نیوز، یکی از سفرهای اصلی کاربران به شرح زیر است:

  1. به لیست مقاله بروید
  2. برای مطالعه روی یک مقاله کلیک کنید
  3. به لیست مقاله برگردید
  4. برای مطالعه روی مقاله دیگری کلیک کنید

قبل از bfcache، زمانی که کاربران خواندن یک مقاله را به پایان رساندند (مرحله 2)، باید منتظر بارگذاری مجدد صفحه فهرست مقاله بمانند. این می تواند یک عامل اصطکاک برای کاربرانی باشد که فقط می خواهند به لیست مقاله برگردند تا مقاله دیگری را برای خواندن انتخاب کنند.

یکی دیگر از منابع اصطکاک در طول مسیریابی به عقب، موقعیت اسکرول بود. در عمل، مرورگر سعی می کند موقعیت اسکرول را هنگامی که یک پیمایش به عقب رخ می دهد، بازیابی کند. با این حال، به دلیل تبلیغاتی که به صورت پویا اضافه می‌شوند یا سایر تغییرات طرح‌بندی، موقعیت اسکرول اغلب به اشتباه بازیابی می‌شود، که می‌تواند باعث از دست دادن رفتار کاربران یا حتی ترک صفحه شود. هنگامی که یک پیمایش به عقب توسط bfcache ایجاد می شود، این هرگز مشکلی ندارد: موقعیت اسکرول بلافاصله و به درستی بازیابی می شود.

دو نوار فیلم از یک پیمایش به عقب از یک مقاله به صفحه فهرست مقاله. قسمت بالایی یک نوار فیلم از فرآیند است که با bfcache انجام می شود که 0.3 ثانیه طول می کشد، در حالی که پایین همان فرآیند است که بدون bfcache انجام می شود که 3.3 ثانیه طول می کشد.

اکنون با bfcache، اصطکاک در سفر کاربر از بین رفته است-کاربران می‌توانند فوراً به صفحه فهرست مقاله برگردند و مقاله دیگری را برای خواندن انتخاب کنند، بدون اینکه منتظر بارگذاری صفحه فهرست مقاله باشند.

هنگامی که کاربران مستقیماً از یک مقاله به مقاله دیگر می‌گردند و برمی‌گردند، همین اتفاق می‌افتد:

یک تصویر متحرک که جریان پیمایش به عقب را از یک مقاله به صفحه فهرست مقاله با و بدون bfcache نشان می دهد. با bfcache، پیمایش به عقب نه تنها سریعتر است، بلکه موقعیت اسکرول نیز به دقت حفظ می شود. بدون bfcache، این تضمین ها نمی توانند ایجاد شوند.

به طور خلاصه، مزایای استفاده از bfcache برای Yahoo! JAPAN News شامل:

  • افزایش بازدید از صفحه: زمانی که صفحات با bfcache کش می شدند، کاربران بیشتر در وب سایت پیمایش می کردند.
  • افزایش درآمد: در نتیجه افزایش بازدید از صفحه در هر جلسه، نمایش تبلیغات افزایش یافت که منجر به افزایش 9 درصدی درآمد در تلفن همراه در مقایسه با گروه آزمایشی بدون bfcache شد.

نتیجه گیری

به طور خلاصه، bfcache نه تنها وب سایت شما را فوری می کند، بلکه می تواند اصطکاک را در تجربه کلی کاربر کاهش دهد و تعامل در وب سایت شما را افزایش دهد.

تیم کروم به طور مداوم به مسدود کننده های bfcache نگاه می کند - به خصوص دو دلیل ذکر شده در این مقاله زیرا دلایل رایجی هستند که bfcache استفاده نمی شود. در آینده، اینها ممکن است از استفاده از bfcache جلوگیری نکنند، اما نیازی به انتظار تا آن زمان نیست. شما می توانید با نگاه کردن به مسدود کننده های bfcache خود و اجتناب از این الگوهای رایج و کمتر رایج از bfcache بهره مند شوید.