Bagaimana Back-forward Cache Membantu Yahoo! JAPAN News Meningkatkan Pendapatan sebesar 9% di Perangkat Seluler

Yuriko Hirota

Back-forward cache (atau bfcache) adalah pengoptimalan browser yang memungkinkan navigasi mundur dan maju secara instan. Hal ini meningkatkan pengalaman penjelajahan bagi pengguna secara signifikan, terutama untuk situs web yang melibatkan banyak navigasi bolak-balik.
Artikel web.dev tentang bfcache

Yahoo! JAPAN News, salah satu platform berita paling populer di Jepang, mendorong upaya bersama untuk meningkatkan rasio hit bfcache mereka, sehingga menghasilkan pengalaman pengguna dan peningkatan bisnis yang signifikan. Secara khusus, hasil pengujian A/B yang mereka lakukan menunjukkan bahwa halaman yang menggunakan bfcache memiliki peningkatan pendapatan iklan sebesar 9%.

Studi kasus ini akan menjelaskan bagaimana Yahoo! JAPAN News menghapus pemblokir untuk bfcache, dan bagaimana bfcache meningkatkan pengalaman pengguna secara drastis.

Menghapus pemblokir untuk bfcache

bfcache telah tersedia sejak Chrome 86, dan juga tersedia di semua browser modern. Namun, untuk memanfaatkan bfcache secara maksimal, Anda harus menghapus penghambat yang berpotensi di situs seseorang. Beberapa pemblokir utama yang Yahoo! JAPAN News yang dihadapi adalah:

Penggunaan pengendali unload
Penggunaan perintah no-store pada header Cache-control

Anda dapat memeriksa pemblokir utama yang ada di situs Anda dengan membuka Chrome Dev Tools > Applications > Back/forward Cache (detail selengkapnya), atau dengan menggunakan notRestoredReasons API untuk mendapatkan tampilan pemblokir yang lebih komprehensif berdasarkan penggunaan sebenarnya di kolom.

Begini cara Yahoo! JAPAN News telah menghapus pemblokirnya:

Pengendali Penghapusan Muatan: Gunakan peristiwa pagehide, bukan peristiwa unload, karena peristiwa unload sangat tidak dapat diandalkan. Selain itu, permission-policy: unload diluncurkan di Chrome 115 sehingga situs dapat menghapus pengendali unload secara andal untuk origin tertentu. Chrome juga berencana untuk secara bertahap menghentikan penggunaan pengendali unload.
Cache-control: no-store (atau disingkat CCNS): Mengubah header Cache-control dari no-store menjadi no-cache dapat mengaktifkan bfcache. Chrome juga berencana untuk mulai menyimpan cache untuk bfcache bahkan dengan header no-store dalam keadaan tertentu.

CCNS ditujukan untuk halaman yang tidak boleh di-cache dalam keadaan apa pun. Hal ini disertai dengan peringatan bahwa setiap halaman dengan CCNS tidak akan dapat memanfaatkan teknologi caching, termasuk server edge CDN dan cache lokal.

Jika Anda memiliki header CCNS, inilah kesempatan yang tepat untuk membahas strategi Cache-control yang tepat untuk situs Anda. Berikut ini perbedaan utama antara no-store dan no-cache.

`Cache-control: no-store`	`Cache-control: no-cache`
Respons tidak diizinkan untuk disimpan dalam cache. Akibatnya, respons diambil secara penuh pada setiap permintaan. Gunakan ini untuk respons pribadi.	Respons diizinkan untuk disimpan dalam cache selama divalidasi ulang dengan server sebelum setiap penggunaan. Respons ini harus berupa respons publik yang ingin Anda validasi ulang setiap saat (misalnya, halaman beranda situs berita - meskipun waktu caching yang sangat singkat dapat meningkatkan performa dan mengurangi beban pekerjaan dari server utama).

Jika Anda tertarik untuk mempelajari opsi Cache-control lebih lanjut, diagram alir ini dapat sangat membantu.

Dampak bfcache dalam angka

Untuk mengukur dampak bfcache, Yahoo! JAPAN News melakukan pengujian A/B selama 2 minggu, dan mereka menayangkan versi halaman dengan perbaikan bfcache mereka ke satu grup, dan versi dengan halaman yang tidak memenuhi syarat untuk bfcache ke grup lain. Mereka memilih jalur URL dengan jumlah traffic yang signifikan sehingga pengujian dapat mencapai hasil yang bermakna. Tidak ada perbedaan visual atau fungsional lain antara 2 versi.

Berikut adalah video yang membandingkan situs dengan bfcache dan tanpa bfcache. Anda dapat melihat bahwa situs yang mengaktifkan bfcache dimuat jauh lebih cepat selama navigasi mundur atau maju.

Hal yang sangat menjanjikan adalah grup yang mengaktifkan bfcache memiliki peningkatan kunjungan halaman dan pendapatan iklan yang signifikan, terutama di perangkat seluler.

Berikut detail tentang dampak yang diamati oleh Yahoo! JAPAN News dengan pengujian A/B bfcache mereka. (Informasi lebih lanjut dapat ditemukan di artikel studi kasusnya).

Metrik	% Peningkatan (seluler)	% Peningkatan (desktop)
Rasio hit bfcache	+54,03 poin (0,04% → 54,07%)	+47,28 poin (0,02% → 47,30%)
Kunjungan halaman	+2,26%	+0,65%
Pendapatan iklan	+9,0%	+0,6%

Saat navigasi mundur/maju antarhalaman menjadi seketika dengan bfcache, pengguna cenderung berada di halaman lebih lama, sehingga meningkatkan tampilan iklan, sehingga meningkatkan pendapatan iklan.

bfcache meningkatkan pengalaman pengguna yang lancar di situs

Saat halaman dimuat dalam sekejap, navigasi terasa lebih lancar.

Di Yahoo! JAPAN News, salah satu perjalanan utama pengguna adalah sebagai berikut:

Buka daftar artikel
Klik satu artikel untuk dibaca
Kembali ke daftar artikel
Klik artikel lain untuk membaca

Sebelum menggunakan bfcache, saat pengguna selesai membaca artikel (langkah 2), mereka harus menunggu halaman daftar artikel dimuat lagi. Ini bisa menjadi faktor penghambat bagi pengguna yang hanya ingin kembali ke daftar artikel untuk memilih artikel lain untuk dibaca.

Sumber lain penghambat selama navigasi mundur adalah posisi scroll. Dalam praktiknya, browser mencoba memulihkan posisi scroll saat navigasi mundur terjadi. Namun, karena iklan yang ditambahkan secara dinamis atau perubahan tata letak lainnya, posisi scroll sering kali salah dipulihkan, yang dapat menyebabkan pengguna kehilangan arah atau bahkan meninggalkan halaman. Hal ini tidak pernah menjadi masalah jika navigasi mundur didukung oleh bfcache: posisi scroll segera dan dipulihkan dengan benar.

Dua setrip film dengan navigasi mundur dari artikel ke halaman daftar artikel. Bagian atas adalah strip film dari proses yang ditangani dengan bfcache yang membutuhkan waktu 0,3 detik, sedangkan bagian bawah adalah proses yang sama yang ditangani tanpa bfcache, yang membutuhkan waktu 3,3 detik.

Kini dengan bfcache, hambatan dalam perjalanan pengguna akan hilang—pengguna dapat langsung menavigasi kembali ke halaman daftar artikel dan memilih artikel lain untuk dibaca tanpa harus menunggu halaman daftar artikel dimuat.

Hal yang sama terjadi ketika pengguna menjelajah dari satu artikel langsung ke artikel lainnya dan kemudian kembali:

Gambar animasi yang menunjukkan alur navigasi mundur dari artikel ke halaman listingan artikel dengan dan tanpa bfcache. Dengan bfcache, navigasi mundur tidak hanya lebih cepat, tetapi posisi scroll dipertahankan secara akurat. Tanpa bfcache, jaminan ini tidak dapat diberikan.

Singkatnya, manfaat menggunakan bfcache untuk Yahoo! JAPAN News mencakup:

Peningkatan kunjungan halaman: Pengguna lebih cenderung menjelajahi di situs saat halaman di-cache dengan bfcache.
Peningkatan pendapatan: Sebagai hasil dari peningkatan kunjungan halaman per sesi, tayangan iklan meningkat, yang menghasilkan peningkatan pendapatan sebesar 9% di seluler dibandingkan dengan grup pengujian tanpa bfcache.

Kesimpulan

Singkatnya, bfcache tidak hanya membuat situs Anda instan, tetapi juga dapat mengurangi hambatan dalam pengalaman pengguna secara keseluruhan dan meningkatkan interaksi dalam situs Anda.

Tim Chrome terus memeriksa pemblokir bfcache—terutama dua alasan yang tercantum dalam artikel ini karena merupakan alasan umum bfcache tidak digunakan. Setelan ini mungkin tidak mencegah penggunaan bfcache pada masa mendatang, tetapi Anda tidak perlu menunggu hingga waktu tersebut. Anda dapat memanfaatkan bfcache dengan melihat pemblokir bfcache dan menghindari pola umum ini serta pola yang kurang umum lainnya.