Digital Transformation
Back/Forward Cache (bfcache)
Mekanisme cache browser yang menyimpan halaman utuh di memori sehingga navigasi tombol back atau forward terasa instan tanpa reload jaringan.
TL;DR: Back/Forward Cache atau bfcache adalah fitur browser modern yang menyimpan snapshot halaman di memori saat pengguna pindah, lalu memuat ulangnya secara instan ketika tombol back atau forward ditekan. Per April 2026, bfcache aktif di Chrome, Safari, dan Firefox, dan menjadi sinyal pengalaman pengguna yang dipantau Chrome UX Report.
Apa itu Back/Forward Cache?
Bfcache adalah memori penyimpanan halaman utuh, termasuk DOM, JavaScript heap, dan state, yang dipertahankan browser saat pengguna meninggalkan halaman. Saat pengguna kembali via tombol back atau forward, browser merestorasi snapshot tersebut tanpa request jaringan baru. Hasilnya adalah perpindahan halaman yang nyaris seketika, mirip view transition API tetapi tanpa kode tambahan dari developer.
Berbeda dari cache HTTP biasa yang menyimpan file di disk, bfcache menyimpan halaman dalam keadaan hidup di RAM browser.
Apa yang Membuat Halaman Tidak Eligible
| Penyebab | Solusi singkat |
|---|---|
Header Cache-Control: no-store | Hapus jika tidak perlu untuk kepatuhan |
Listener unload | Ganti dengan pagehide |
WebSocket aktif | Tutup koneksi sebelum pindah halaman |
IndexedDB transaksi terbuka | Commit transaksi sebelum unload |
Chrome DevTools tab Application memiliki panel khusus bfcache yang menampilkan alasan kegagalan eligibility per halaman.
Kenapa Penting?
Bfcache memengaruhi metrik Core Web Vitals secara tidak langsung. Halaman yang eligible bfcache mendapat skor LCP dan INP yang lebih baik di Chrome UX Report karena restorasi instan dihitung sebagai pengalaman cepat. Untuk marketer Indonesia yang mengandalkan traffic search dan iklan, bfcache mengurangi bounce dari pengguna yang membandingkan halaman lewat tombol back.
Pertanyaan Umum
Bagaimana cara mengecek apakah halaman saya eligible bfcache?
Buka Chrome DevTools, tab Application, panel Back/forward cache, lalu klik Test back/forward cache. Browser akan menampilkan status eligibility dan daftar penyebab kegagalan.
Apakah analytics seperti GA4 membatalkan bfcache?
Tidak otomatis. Gunakan event pagehide dengan opsi persisted untuk mengirim data sesi tanpa memblokir bfcache. Dokumentasi web.dev memuat pola implementasinya.
Istilah Terkait