Back/Forward Cache: Cara Website Bisnis Indonesia Membuat Navigasi Mundur Terasa Instan

TL;DR: Back/Forward Cache atau bfcache memungkinkan browser menyimpan halaman utuh di memori sehingga navigasi back atau forward terasa seketika. Per April 2026, Chrome melaporkan 60-80% halaman web modern sudah eligible bfcache, namun banyak website bisnis Indonesia belum optimal karena listener unload, header Cache-Control: no-store yang tidak perlu, dan WebSocket aktif yang membatalkan eligibility.

Saat membangun website Atmo (LMS), saya melihat bounce rate halaman daftar kursus turun 14% setelah memperbaiki dua masalah sederhana yang membatalkan bfcache. Pengguna sering membuka kursus, menekan back untuk membandingkan, lalu meninggalkan halaman jika muat ulang dirasa lambat. Bfcache menghapus friksi tersebut tanpa kode tambahan.

Pola ini relevan untuk e-commerce, blog, dan landing page yang mengandalkan eksplorasi multi-halaman. Yang menarik, perbaikan bfcache sering kali hanya satu hingga tiga baris kode atau perubahan header server.

Kenapa Bfcache Sering Tidak Aktif

Back/Forward Cache memerlukan halaman dalam keadaan ramah restorasi. Browser menolak menyimpan halaman jika ada listener atau koneksi yang berisiko meninggalkan state inkonsisten saat dipulihkan.

Penyebab paling umum yang saya temui di audit website bisnis Indonesia:

Listener unload adalah penyebab terbesar. Banyak tag manager lawas dan plugin analytics masih menyisipkan window.addEventListener('unload', ...) untuk mengirim data sesi terakhir. Ganti dengan pagehide yang menghormati bfcache.

Cara Mengaudit Halaman Anda

Buka Chrome DevTools, tab Application, panel Back/forward cache, lalu klik Test back/forward cache. Browser akan menampilkan status eligibility dan daftar penyebab kegagalan per halaman. Untuk audit massal, Lighthouse menyertakan kategori bfcache sejak versi 11.

Workflow yang saya pakai di proyek client:

1. Audit lima halaman top traffic via DevTools manual
2. Catat penyebab dominan, biasanya satu pola yang berulang di seluruh template
3. Perbaiki pola tersebut di layout utama
4. Verifikasi ulang dengan Chrome UX Report data setelah 28 hari

Hasilnya bisa diukur via Real User Monitoring, bukan hanya synthetic test. Metrik yang paling reaktif adalah bfcache hit rate di field data CrUX.

Studi Kasus: Halaman Produk Vetmo

Saat optimasi Vetmo, kami menemukan widget chat live mempertahankan koneksi WebSocket aktif di setiap halaman produk. Ini membatalkan bfcache untuk seluruh navigasi internal. Solusi yang dipilih: tutup koneksi WebSocket pada event pagehide dengan opsi persisted: true, lalu reconnect di pageshow jika halaman dipulihkan.

Setelah dirilis, time to next paint pada navigasi back turun dari rata-rata 1,8 detik ke di bawah 200 ms. Pengguna yang membandingkan dua produk lewat tombol back kembali ke halaman sebelumnya tanpa kehilangan posisi scroll, yang sebelumnya menjadi keluhan tim customer service.

Pelajaran utama: widget pihak ketiga sering menjadi pembatal bfcache tanpa disadari. Audit harus mencakup script eksternal, bukan hanya kode internal.

Pertanyaan Umum

Apakah bfcache bekerja di Safari iOS?

Ya, Safari mengaktifkan bfcache sejak iOS 13. Implementasinya bahkan lebih agresif daripada Chrome desktop. Pengguna Safari di Indonesia mendapat manfaat tanpa konfigurasi tambahan.

Bagaimana mengirim event analytics tanpa membatalkan bfcache?

Gunakan navigator.sendBeacon() di event pagehide. Sebagian besar SDK analytics modern, termasuk GA4, sudah mendukung pola ini. Cek dokumentasi web.dev tentang bfcache untuk contoh implementasi.

Apakah bfcache memengaruhi peringkat SEO langsung?

Tidak langsung. Namun bfcache memperbaiki sinyal pengalaman pengguna seperti LCP dan INP di Chrome UX Report, yang menjadi salah satu sinyal ranking sejak 2021.

Apakah Next.js otomatis mendukung bfcache?

Next.js 15 tidak menambahkan pembatal bfcache secara default, tetapi developer harus berhati-hati saat menambahkan listener beforeunload atau koneksi WebSocket di komponen client.

Apakah halaman dengan formulir aktif tetap eligible?

Ya, selama tidak ada listener unload. State formulir disimpan di bfcache, sehingga input pengguna pulih saat kembali via tombol back.

Apa yang Perlu Dilakukan Minggu Ini

Buka DevTools di tiga halaman top traffic Anda, jalankan test bfcache, dan catat satu penyebab dominan. Pola perbaikan biasanya seragam di seluruh template, sehingga satu pull request dapat menutup semua halaman sekaligus. Untuk website bisnis Indonesia dengan traffic search di atas 10.000 per bulan, peningkatan bfcache hit rate 30-40% sering memberi efek terukur dalam 28 hari pertama setelah deploy.