Panduan ini menunjukkan cara menggunakan Chrome DevTools untuk melakukan hal berikut:
- Uji apakah Anda mengoptimalkan halaman untuk pemuatan instan saat menggunakan tombol kembali dan maju di browser.
- Identifikasi masalah yang dapat mencegah halaman Anda memenuhi syarat untuk jenis penyimpanan cache ini.
Back-forward cache (atau bfcache) adalah pengoptimalan browser yang memungkinkan navigasi mundur dan maju secara instan. Untuk informasi selengkapnya, lihat Back-forward cache.
Menguji back-forward cache
Untuk menguji back-forward cache, ikuti langkah-langkah berikut:
Di halaman Anda, buka DevTools, lalu buka Application > Background services > Back/forward cache.
Klik Test back/forward cache.
Chrome otomatis mengarahkan Anda ke
chrome://terms/
dan kembali ke halaman Anda.Selain itu, Anda dapat mengklik tombol kembali dan maju pada browser.
Jika back-forward cache berfungsi untuk halaman Anda tanpa masalah, Anda akan melihat pesan berikut:
Jika tidak, Anda akan melihat daftar masalah.
Untuk mengetahui masalah yang memengaruhi frame, luaskan bagian Frames .
Menyelesaikan masalah yang mencegah penyimpanan cache
Jika halaman Anda tidak memenuhi syarat untuk back-forward cache, tab Back/forward cache akan menampilkan daftar dengan tiga jenis penyebab:
- Dapat ditindaklanjuti. Anda dapat memperbaiki masalah ini untuk mengaktifkan penyimpanan cache. Misalnya, berhenti menggunakan peristiwa
unload
. - Dukungan Menunggu Keputusan. Chrome belum mendukung fitur ini, sehingga fitur ini mencegah penyimpanan cache. Namun, setelah didukung, Chrome menghapus batasan tersebut.
- Tidak Dapat Ditindaklanjuti. Anda tidak dapat memperbaiki masalah ini di halaman ini. Sesuatu di luar kontrol halaman akan mencegah penyimpanan cache.
Untuk mengetahui frame mana yang menjadi pemblokir, luaskan bagian yang sesuai dalam deskripsi masalah.
Masalah umum yang mencegah back-forward cache
Dua alasan utama yang mencegah bfcache berjalan adalah:
Header
Cache-Control: no-store
.Nilai header ini direkomendasikan untuk halaman yang berisi informasi pribadi dan rahasia. Untuk halaman yang ingin Anda cukup baru, gunakan
no-cache
atau waktu cache yang singkat, misalnya,max-age=60
.Pengendali penghapusan muatan yang bermasalah.
Chrome berencana menghentikan pengendali penghapusan muatan dan merekomendasikan untuk tidak menggunakan peristiwa
unload
.Untuk memastikan situs Anda tidak menggunakan pengendali penghapusan muatan dan, misalnya, mencegah ekstensi menambahkan peristiwa
unload
, deklarasikan header respons HTTPPermissions-Policy: unload=()
.