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. Fitur ini meningkatkan pengalaman penjelajahan secara signifikan bagi pengguna, terutama untuk situs yang melibatkan banyak navigasi bolak-balik.
Artikel web.dev tentang bfcache

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

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

Menghapus pemblokir untuk bfcache

bfcache telah tersedia sejak Chrome 86, dan juga tersedia di semua browser modern. Namun, untuk memanfaatkan bfcache sepenuhnya, Anda harus menghapus potensi pemblokir di situs Anda. Beberapa pemblokir utama yang digunakan Yahoo! JAPAN News adalah:

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

Anda dapat memeriksa pemblokir utama yang ada untuk 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 lapangan.

Berikut 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, Permissions-Policy: unload=() diluncurkan di Chrome 115 sehingga situs dapat menghapus pengendali unload dengan andal untuk origin tertentu. Chrome juga berencana menghentikan penggunaan pengendali unload secara bertahap.
Cache-control: no-store (atau CCNS untuk singkatnya): Mengubah header Cache-control dari no-store menjadi no-cache dapat mengaktifkan bfcache. Chrome juga berencana untuk mulai menyimpan dalam cache untuk bfcache meskipun dengan header no-store dalam situasi tertentu.

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

Jika Anda memiliki header CCNS, ini adalah peluang bagus untuk mendiskusikan strategi Cache-control yang tepat untuk situs Anda. Berikut adalah 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 sepenuhnya pada setiap permintaan. Ini harus digunakan untuk respons pribadi.	Respons diizinkan untuk disimpan dalam cache selama divalidasi ulang dengan server sebelum setiap penggunaan. Ini harus berupa respons publik yang ingin Anda validasi ulang setiap saat (misalnya, halaman beranda situs berita - meskipun demikian, waktu caching yang sangat singkat dapat meningkatkan performa dan mengurangi beban kerja dari server utama).

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

Dampak bfcache dalam angka

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

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

Yang sangat menjanjikan adalah grup yang mengaktifkan bfcache mengalami peningkatan jumlah 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 selengkapnya dapat ditemukan di artikel studi kasus mereka).

Metrik	Peningkatan % (perangkat 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 kembali/maju di antara halaman menjadi instan dengan bfcache, pengguna cenderung tetap berada di halaman lebih lama, sehingga meningkatkan penayangan iklan, yang menyebabkan peningkatan pendapatan iklan.

bfcache meningkatkan pengalaman pengguna yang lancar di situs

Jika halaman dimuat dengan cepat, navigasi akan 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 dibaca

Sebelum bfcache, saat pengguna selesai membaca artikel (langkah 2), mereka harus menunggu halaman daftar artikel dimuat lagi. Hal ini dapat menjadi faktor hambatan bagi pengguna yang hanya ingin kembali ke daftar artikel untuk memilih artikel lain yang akan dibaca.

Sumber hambatan lain 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 dipulihkan secara tidak benar, yang dapat menyebabkan pengguna kehilangan orientasi atau bahkan keluar dari halaman. Hal ini tidak pernah menjadi masalah saat navigasi mundur didukung oleh bfcache: posisi scroll segera dan benar dipulihkan.

Dua filmstrip navigasi mundur dari artikel ke halaman listingan artikel. Bagian atas adalah filmstrip proses yang ditangani dengan bfcache yang memerlukan waktu 0,3 detik, sedangkan bagian bawah adalah proses yang sama yang ditangani tanpa bfcache, yang memerlukan waktu 3,3 detik.

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

Hal yang sama terjadi saat pengguna menjelajahi dari satu artikel langsung ke artikel lain dan kembali:

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

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

Peningkatan kunjungan halaman: Pengguna lebih cenderung menavigasi dalam 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 perangkat 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 engagement dalam situs Anda.

Tim Chrome terus memantau pemblokir bfcache—terutama dua alasan yang tercantum dalam artikel ini karena merupakan alasan umum bfcache tidak digunakan. Di masa mendatang, hal ini mungkin tidak mencegah penggunaan bfcache, tetapi Anda tidak perlu menunggu sampai saat itu. Anda dapat memanfaatkan bfcache dengan melihat pemblokir bfcache dan menghindari pola umum ini, serta pola lainnya yang kurang umum.