Digital Transformation
bfcache (Back-Forward Cache)
TL;DR: bfcache (Back-Forward Cache) adalah mekanisme browser modern yang menyimpan snapshot halaman lengkap di memori. Saat pengguna klik tombol Back atau Forward, halaman dipulihkan dalam waktu di bawah 100 ms, tanpa eksekusi JavaScript ulang dan tanpa request jaringan.
Apa itu bfcache?
bfcache, atau Back-Forward Cache, adalah fitur browser di Chrome, Safari, Firefox, dan Edge yang membekukan kondisi halaman saat pengguna menavigasi ke halaman lain. Snapshot ini mencakup DOM, state JavaScript, dan posisi scroll. Anggap saja seperti tombol pause pada video. Saat tombol Back ditekan, halaman tinggal "play" lagi dari titik berhenti, tidak memutar dari awal. Pemulihan dari bfcache umumnya selesai di bawah 100 ms, jauh lebih cepat dibanding Time to First Byte navigasi normal yang sering melebihi 600 ms di jaringan 4G Indonesia.
bfcache berbeda dengan HTTP cache atau service worker. HTTP cache hanya menyimpan response file, sehingga browser tetap harus parsing HTML dan eksekusi script. bfcache menyimpan state halaman jadi, sehingga interaksi pengguna yang sudah dilakukan, misal isi form atau tab yang sudah dibuka, tetap utuh saat halaman dipulihkan.
Syarat agar Halaman Eligible bfcache
| Faktor | Aturan |
|---|---|
| Header response | Tidak ada Cache-Control: no-store |
| Koneksi terbuka | Tidak ada WebSocket, IndexedDB transaction aktif |
| Event handler | Tidak pakai unload event listener |
| HTTPS | Halaman wajib disajikan via HTTPS valid |
| Permission | Tidak request permission sensorik (kamera, mikrofon) saat unmount |
Chrome DevTools punya panel Application > Back/forward cache yang menampilkan alasan kegagalan eligibility per halaman.
Kenapa Penting?
bfcache adalah salah satu sinyal pengalaman pengguna yang dipakai Google Search sejak rollout Page Experience update. Halaman yang eligible bfcache mendapat keuntungan ganda: pengalaman navigasi nyaris instan dan skor Core Web Vitals lebih baik karena bfcache hit dihitung sebagai navigasi cepat. Untuk e-commerce dan media Indonesia, di mana 60 persen sesi melibatkan pola browse-back-browse, dukungan bfcache bisa memangkas bounce rate halaman kategori sebesar 8 sampai 14 persen berdasarkan observasi di proyek klien.
Pertanyaan Umum
Apakah Next.js otomatis dukung bfcache?
Ya untuk halaman statis. Namun banyak project Next.js terpaksa keluar dari bfcache karena memakai analytics SDK lama yang menambah unload listener. Gunakan pagehide event sebagai pengganti unload.
Bagaimana cara cek halaman eligible bfcache?
Buka Chrome DevTools, tab Application, panel Back/forward cache, lalu klik tombol "Test back/forward cache". DevTools akan menampilkan daftar blocker spesifik per halaman.
Apakah service worker mengganggu bfcache?
Tidak selama service worker tidak memegang fetch handler yang aktif. Service worker yang hanya melayani offline fallback aman.
Istilah Terkait