Back/Forward Cache (bfcache): Cara Browser Mempercepat Navigasi dan Mengujinya

Pernah menekan tombol Kembali di browser lalu halaman sebelumnya langsung muncul lengkap dengan posisi gulir dan isi formulir yang masih ada? Salah satu teknologi yang memungkinkan pengalaman itu adalah back/forward cache, atau bfcache. Fitur ini menyimpan keadaan halaman saat pengguna berpindah ke halaman lain, sehingga browser dapat memulihkannya tanpa membangun dokumen dari awal.

Bagi pengembang web, bfcache bukan sekadar trik kecepatan. Fitur ini juga memengaruhi cara aplikasi mengelola sesi, koneksi, analitik, dan data yang bisa berubah ketika halaman sedang tidak terlihat. Memahami cara kerjanya membantu meningkatkan pengalaman pengguna tanpa mengorbankan ketepatan informasi.

Apa Itu Back/Forward Cache?

Bfcache adalah mekanisme browser yang menyimpan snapshot halaman lengkap di memori. Snapshot tersebut dapat mencakup DOM, keadaan JavaScript, posisi gulir, dan sejumlah keadaan antarmuka. Ketika pengguna menekan tombol Kembali atau Maju, browser dapat menghidupkan kembali snapshot itu alih-alih meminta ulang dokumen dan menjalankan seluruh proses pemuatan.

Browser tetap menentukan halaman mana yang layak disimpan dan berapa lama snapshot dipertahankan. Karena itu, bfcache bukan jaminan bahwa setiap navigasi akan instan. Halaman bisa tidak memenuhi syarat, atau snapshot dapat dibuang saat sumber daya memori dibutuhkan.

Bfcache Berbeda dari Cache HTTP

Cache HTTP biasanya menyimpan respons jaringan seperti HTML, CSS, JavaScript, atau gambar. Ketika halaman dibuka kembali, browser masih dapat membuat dokumen baru, mem-parsing HTML, dan menjalankan skrip, meskipun beberapa aset diambil dari cache lokal.

Sebaliknya, bfcache mempertahankan keadaan halaman yang sudah berjalan. Inilah sebabnya tombol Kembali bisa terasa jauh lebih cepat dan posisi pengguna tetap terjaga. Mengaktifkan cache HTTP tidak otomatis membuat sebuah halaman memenuhi syarat bfcache; keduanya memiliki tujuan dan aturan berbeda.

Mengapa Bfcache Penting untuk Pengalaman Pengguna?

Navigasi kembali sering terjadi saat membaca artikel, membandingkan produk, mengisi formulir, atau berpindah antarhalaman aplikasi. Jika halaman harus dimuat ulang, pengguna mungkin kehilangan posisi gulir, menunggu permintaan jaringan, atau melihat antarmuka berkedip. Pemulihan dari bfcache dapat mengurangi jeda itu dan mempertahankan konteks yang sedang dikerjakan.

Manfaatnya paling terasa pada halaman yang proses awalnya berat. Namun, pengembang tetap perlu memastikan data yang mudah kedaluwarsa diperbarui ketika halaman kembali aktif. Kecepatan tidak banyak membantu jika pengguna melihat saldo, status pesanan, atau indikator sesi yang sudah tidak akurat.

Penyebab Umum Halaman Tidak Masuk Bfcache

Salah satu pola lama yang sering menjadi penghambat adalah penggunaan event unload. Event ini dahulu dipakai untuk membersihkan sumber daya saat halaman ditinggalkan, tetapi perilakunya tidak dapat diandalkan di semua perangkat dan dapat membuat halaman tidak memenuhi syarat bfcache. Untuk pekerjaan yang sesuai, gunakan pagehide atau visibilitychange dan uji perilakunya di browser sasaran.

Listener beforeunload juga sebaiknya tidak dipasang tanpa kebutuhan. Jika peringatan hanya diperlukan saat formulir memiliki perubahan yang belum disimpan, pasang listener ketika formulir benar-benar berubah dan lepaskan setelah data tersimpan.

Faktor lain dapat mencakup koneksi atau operasi yang masih aktif, penggunaan API tertentu, referensi jendela pembuka, serta kebijakan keamanan atau privasi browser. Aturan kelayakan berbeda menurut browser dan versinya. Jangan langsung menghapus kontrol keamanan hanya demi mengejar skor performa; cari penyebab spesifik dan pilih perbaikan yang tidak mengurangi perlindungan data.

Gunakan pageshow dan pagehide dengan Benar

Karena halaman yang dipulihkan tidak selalu menjalani pemuatan baru, kode aplikasi tidak boleh mengandalkan event load untuk setiap kunjungan. Event pageshow berjalan pada pemuatan awal maupun saat halaman dipulihkan. Properti event.persisted dapat membantu membedakan pemulihan dari bfcache.

window.addEventListener('pageshow', (event) => {
  if (event.persisted) {
    // Segarkan hanya data yang mungkin sudah kedaluwarsa.
    refreshSessionStatus();
    refreshOrderSummary();
  }
});

window.addEventListener('pagehide', () => {
  // Simpan keadaan sementara atau hentikan pekerjaan
  // yang memang perlu dijeda saat halaman ditinggalkan.
});

Contoh tersebut bersifat ilustratif: sesuaikan fungsi penyegaran dengan aplikasi sebenarnya. Hindari memuat ulang seluruh halaman tanpa alasan, karena itu dapat menghilangkan manfaat bfcache. Untuk aplikasi yang membuka koneksi WebSocket atau memakai IndexedDB, rancang proses jeda dan penyambungan ulang dengan hati-hati agar tidak membuat koneksi ganda setelah pemulihan.

Cara Menguji Bfcache di Chrome

1. Buka halaman yang ingin diuji di Chrome dan buka DevTools.
2. Masuk ke panel Application, lalu cari bagian Back/forward cache pada kelompok Background services.
3. Jalankan pengujian yang disediakan, kemudian ikuti instruksi untuk berpindah halaman dan kembali.
4. Periksa apakah halaman dapat dipulihkan serta baca alasan yang dilaporkan jika browser menolaknya.

Uji lebih dari satu rute dan skenario, termasuk halaman dengan formulir, login, iframe, dan koneksi real-time. Pengujian lokal tidak selalu mewakili seluruh kondisi pengguna. Pantau juga data lapangan bila tersedia dan ulangi pemeriksaan setelah perubahan kode atau dependensi pihak ketiga.

Perhatikan Data Sensitif dan Analitik

Halaman yang kembali dari bfcache mungkin memuat keadaan yang dibuat sebelum pengguna berpindah tab atau sebelum sesi berubah. Untuk halaman akun, periksa kembali status autentikasi dan segarkan data sensitif sesuai kebutuhan. Jangan menyimpan rahasia dalam keadaan antarmuka dengan asumsi halaman akan selalu dimuat ulang.

Analitik juga perlu diperiksa. Jika pencatatan kunjungan hanya bergantung pada event pemuatan awal, navigasi yang dipulihkan dapat tidak tercatat seperti yang diharapkan. Gunakan event siklus hidup halaman secara terukur dan hindari menghitung satu kunjungan dua kali.

Checklist Optimasi Praktis

• Hindari listener unload yang tidak diperlukan.
• Batasi beforeunload hanya saat ada perubahan yang belum disimpan.
• Gunakan pageshow untuk memeriksa data yang mungkin kedaluwarsa.
• Jeda atau sambungkan ulang koneksi secara aman ketika halaman ditinggalkan dan dipulihkan.
• Uji beberapa halaman dengan DevTools dan perbaiki alasan kegagalan yang memang dapat ditangani.
• Pertahankan kebijakan privasi dan keamanan yang diperlukan; jangan mengubah header sensitif secara membabi buta demi kelayakan cache.

Kesimpulan

Back/forward cache membantu browser memulihkan halaman dengan cepat ketika pengguna menekan tombol Kembali atau Maju. Agar manfaatnya terasa, pengembang perlu menghindari pola yang menghambat bfcache, menangani event siklus hidup halaman, dan menyegarkan data yang dapat berubah. Mulailah dengan pengujian DevTools, perbaiki penyebab yang terukur, lalu pastikan optimasi tetap menjaga keamanan dan konsistensi aplikasi.

Referensi teknis: panduan bfcache di Chrome DevTools dan dokumentasi MDN tentang event pageshow serta event pagehide.