کش عقب و جلو به یاهو کمک کرد! 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 DevTools > Applications > Back/Forward Cache، مسدودکننده‌های اصلی وب‌سایت خود را بررسی کنید . از طرف دیگر، می‌توانید از notRestoredReasons API برای دریافت نمای جامع‌تری از مسدودکننده‌ها بر اساس استفاده واقعی در این زمینه استفاده کنید.

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

• کنترل کننده های تخلیه بار جایگزین شده : آنها از رویداد pagehide به جای رویداد unload استفاده کردند، زیرا unload بسیار غیرقابل اعتماد است. Permissions-Policy: unload=() در Chrome 115 راه‌اندازی شد تا وب‌سایت‌ها بتوانند به‌طور قابل‌اعتماد کنترل‌کننده‌های unload برای مبداهای خاص حذف کنند. Chrome قصد دارد به‌تدریج کنترل‌کننده‌های unload منسوخ کند .
• Changed cache-control : تغییر هدر Cache-control از no-store (CCNS) به no-cache bfcache را فعال می کند. کروم در حال برنامه‌ریزی ذخیره‌سازی برای bfcache است، حتی با هدر no-store ، در شرایط خاص .

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

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

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

تست A/B برای نشان دادن تاثیر

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

در اینجا یک ویدیو مقایسه وب سایت با bfcache و بدون bfcache وجود دارد. می‌توانید ببینید که وب‌سایتی که bfcache را فعال کرده است، در حین پیمایش به عقب یا جلو، بسیار سریع‌تر بارگیری می‌شود.

چیزی که واقعا امیدوارکننده است این است که گروهی که bfcache را فعال کرده بود ، افزایش قابل توجهی در بازدید از صفحه و درآمد تبلیغات ، به ویژه در دستگاه های تلفن همراه داشت.

در اینجا جزئیاتی در مورد تأثیر مشاهده شده توسط Yahoo! JAPAN News با تست bfcache A/B خود. اطلاعات بیشتر را می توان در مطالعه موردی آنها یافت.

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

تجربه کاربری یکپارچه

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

در یاهو ژاپن نیوز، یکی از سفرهای اصلی کاربران، خواندن چندین مقاله است:

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

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

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

این مشکل زمانی حل می شود که پیمایش به عقب توسط bfcache فعال شود: موقعیت اسکرول بلافاصله و به درستی بازیابی می شود.

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

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

به طور خلاصه، مزایای bfcache برای یاهو! اخبار ژاپن شامل:

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

اکنون bfcache را پیاده سازی کنید

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

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