کش عقب و جلو به یاهو کمک کرد! JAPAN News درآمد را 9 درصد در موبایل افزایش داد

Yuriko Hirota

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

مقاله web.dev در مورد bfcache

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

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

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

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

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

شما می‌توانید با رفتن به Chrome DevTools > Applications > Back/forward Cache ، مسدودکننده‌های اصلی وب‌سایت خود را بررسی کنید . همچنین می‌توانید از API notRestoredReasons برای مشاهده‌ی جامع‌تر مسدودکننده‌ها بر اساس میزان استفاده‌ی واقعی در این زمینه استفاده کنید.

در اینجا نحوه حذف مسدودکننده‌های یاهو! ژاپن نیوز آمده است:

• جایگزین کردن کنترل‌کننده‌های unload : آنها به جای رویداد unload از رویداد pagehide استفاده کردند، زیرا unload بسیار غیرقابل اعتماد است. Permissions-Policy: unload=() در کروم ۱۱۵ راه‌اندازی شد تا وب‌سایت‌ها بتوانند به طور قابل اعتمادی کنترل‌کننده‌های unload را برای منابع خاص حذف کنند. کروم قصد دارد به تدریج کنترل‌کننده‌های unload منسوخ کند .
• تغییر 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، یاهو! ژاپن نیوز به مدت دو هفته یک تست A/B انجام داد. آن‌ها نسخه‌ای از صفحات خود را که اصلاحات bfcache در آن‌ها اعمال شده بود، در یک گروه و نسخه‌ای را که صفحات آن برای bfcache واجد شرایط نبودند، در گروه دیگر ارائه دادند. آن‌ها مسیرهای URL با ترافیک قابل توجه را آزمایش کردند تا از دستیابی به نتایج معنادار در آزمایش اطمینان حاصل کنند. هیچ تفاوت بصری یا عملکردی دیگری بین صفحات وجود نداشت.

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

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

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

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

تجربه کاربری روان

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

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

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

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

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

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

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

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

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

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

پیاده‌سازی bfcache همین حالا

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

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