کش عقب/ جلو (یا bfcache) یک بهینه سازی مرورگر است که پیمایش فوری به عقب و جلو را امکان پذیر می کند. این به طور قابل توجهی تجربه مرور را برای کاربران بهبود می بخشد، به خصوص برای وب سایت هایی که شامل بسیاری از پیمایش های رفت و برگشتی هستند.
مقاله web.dev در bfcache
یاهو JAPAN News، یکی از محبوب‌ترین پلت‌فرم‌های خبری در ژاپن، تلاش‌های هماهنگی را برای بهبود نرخ بازدید bfcache خود انجام داد و در نتیجه تجربه کاربر و بهبودهای تجاری قابل توجهی را شاهد بود. به طور خاص، نتایج آزمایش A/B که آنها انجام دادند نشان داد که صفحاتی که از bfcache استفاده می‌کنند 9 درصد افزایش درآمد تبلیغات داشتند.
این مطالعه موردی توضیح خواهد داد که چگونه Yahoo! JAPAN News مسدود کننده های bfcache را حذف کرد و چگونه bfcache تجربه کاربر را به شدت بهبود بخشید.
حذف مسدود کننده ها برای bfcache
bfcache از Chrome 86 در دسترس بوده است و همچنین در تمام مرورگرهای مدرن موجود است. با این حال، استفاده کامل از bfcache مستلزم حذف مسدود کننده های بالقوه در وب سایت خود است. برخی از مسدود کننده های اصلی یاهو! اخبار ژاپن که با آنها روبرو شد عبارت بودند از:
- استفاده از کنترل کننده های
unload - استفاده از دستورالعمل
no-storeدر هدرهایCache-control
می‌توانید با رفتن به Chrome Dev Tools > Applications > Back/Forward Cache ( جزئیات بیشتر )، یا با استفاده از notRestoredReasons API بررسی کنید که چه مسدودکننده‌های اصلی برای وب‌سایت شما وجود دارد تا نمای جامع‌تری از مسدودکننده‌ها بر اساس استفاده واقعی در این زمینه داشته باشید. .
در اینجا نحوه یاهو! JAPAN News مسدود کننده های خود را حذف کرده است:
- Unload Handlers: از رویداد
pagehideبه جای رویدادunloadاستفاده کنید، زیرا رویدادunloadبسیار غیرقابل اعتماد است. همچنین،permission-policy: unloadدر Chrome 115 راه‌اندازی شد تا وب‌سایت‌ها بتوانند به‌طور قابل‌اعتماد کنترل‌کننده‌هایunloadبرای مبداهای خاص حذف کنند. Chrome همچنین در حال برنامه ریزی برای منسوخ شدن تدریجی کنترل کننده هایunloadاست. -
Cache-control: no-store(یا به اختصار CCNS): تغییر هدرCache-controlازno-storeبهno-cacheمی تواند bfcache را فعال کند. کروم همچنین در حال برنامه ریزی برای شروع ذخیره سازی برای bfcache حتی با هدرno-storeدر شرایط خاص است.
CCNS برای صفحاتی در نظر گرفته شده است که هرگز نباید تحت هیچ شرایطی کش شوند. این با این هشدار همراه است که هیچ صفحه‌ای با CCNS نمی‌تواند از هیچ فناوری ذخیره‌سازی، از جمله سرورهای لبه CDN و کش‌های محلی بهره‌مند شود.
اگر هدر CCNS دارید، این یک فرصت عالی برای بحث در مورد استراتژی های مناسب Cache-control برای وب سایت شما است. در اینجا تفاوت های اصلی بین no-store و 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 فوری می شود، کاربران تمایل دارند مدت بیشتری در صفحات بمانند، بنابراین بازدیدهای تبلیغاتی را افزایش می دهند که منجر به افزایش درآمد تبلیغات می شود.
bfcache تجربه کاربری یکپارچه را در وب سایت افزایش می دهد
هنگامی که صفحات فورا بارگیری می شوند، ناوبری یکپارچه تر احساس می شود.
در یاهو ژاپن نیوز، یکی از سفرهای اصلی کاربران به شرح زیر است:
- به لیست مقاله بروید
- برای مطالعه روی یک مقاله کلیک کنید
- به لیست مقاله برگردید
- برای مطالعه روی مقاله دیگری کلیک کنید
قبل از bfcache، زمانی که کاربران خواندن یک مقاله را به پایان رساندند (مرحله 2)، باید منتظر بارگذاری مجدد صفحه فهرست مقاله بمانند. این می تواند یک عامل اصطکاک برای کاربرانی باشد که فقط می خواهند به لیست مقاله برگردند تا مقاله دیگری را برای خواندن انتخاب کنند.
یکی دیگر از منابع اصطکاک در طول مسیریابی به عقب، موقعیت اسکرول بود. در عمل، مرورگر سعی می کند موقعیت اسکرول را هنگامی که یک پیمایش به عقب رخ می دهد، بازیابی کند. با این حال، به دلیل تبلیغاتی که به صورت پویا اضافه می‌شوند یا سایر تغییرات طرح‌بندی، موقعیت اسکرول اغلب به اشتباه بازیابی می‌شود، که می‌تواند باعث از دست دادن رفتار کاربران یا حتی ترک صفحه شود. هنگامی که یک پیمایش به عقب توسط bfcache ایجاد می شود، این هرگز مشکلی ندارد: موقعیت اسکرول بلافاصله و به درستی بازیابی می شود.
اکنون با bfcache، اصطکاک در سفر کاربر از بین رفته است-کاربران می‌توانند فوراً به صفحه فهرست مقاله برگردند و مقاله دیگری را برای خواندن انتخاب کنند، بدون اینکه منتظر بارگذاری صفحه فهرست مقاله باشند.
هنگامی که کاربران مستقیماً از یک مقاله به مقاله دیگر می‌گردند و برمی‌گردند، همین اتفاق می‌افتد:
به طور خلاصه، مزایای استفاده از bfcache برای Yahoo! JAPAN News شامل:
- افزایش بازدید از صفحه: زمانی که صفحات با bfcache کش می شدند، کاربران بیشتر در وب سایت پیمایش می کردند.
- افزایش درآمد: در نتیجه افزایش بازدید از صفحه در هر جلسه، نمایش تبلیغات افزایش یافت که منجر به افزایش 9 درصدی درآمد در تلفن همراه در مقایسه با گروه آزمایشی بدون bfcache شد.
نتیجه گیری
به طور خلاصه، bfcache نه تنها وب سایت شما را فوری می کند، بلکه می تواند اصطکاک را در تجربه کلی کاربر کاهش دهد و تعامل در وب سایت شما را افزایش دهد.
تیم کروم به طور مداوم به مسدود کننده های bfcache نگاه می کند - به خصوص دو دلیل ذکر شده در این مقاله زیرا دلایل رایجی هستند که bfcache استفاده نمی شود. در آینده، اینها ممکن است از استفاده از bfcache جلوگیری نکنند، اما نیازی به انتظار تا آن زمان نیست. شما می توانید با نگاه کردن به مسدود کننده های bfcache خود و اجتناب از این الگوهای رایج و کمتر رایج از bfcache بهره مند شوید.