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 headerCache-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 peristiwaunload
, karena peristiwaunload
sangat tidak dapat diandalkan. Selain itu,Permissions-Policy: unload=()
diluncurkan di Chrome 115 sehingga situs dapat menghapus pengendaliunload
dengan andal untuk origin tertentu. Chrome juga berencana menghentikan penggunaan pengendaliunload
secara bertahap. Cache-control: no-store
(atau CCNS untuk singkatnya): Mengubah headerCache-control
darino-store
menjadino-cache
dapat mengaktifkan bfcache. Chrome juga berencana untuk mulai menyimpan dalam cache untuk bfcache meskipun dengan headerno-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
.
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).
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.
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:
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.