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 browser.
- Identifikasi masalah yang dapat mencegah halaman Anda memenuhi syarat untuk jenis penyimpanan dalam cache ini.
Back-forward cache (atau bfcache) adalah pengoptimalan browser yang memungkinkan navigasi mundur dan maju secara instan. Untuk informasi selengkapnya, lihat Cache kembali/maju.
Menguji back-forward cache
Untuk menguji cache kembali/maju, ikuti langkah-langkah berikut:
Di halaman Anda, buka DevTools, lalu buka Application > Background services > Back/forward cache.
Klik Uji back-forward cache.
Chrome akan otomatis mengarahkan Anda ke
chrome://terms/
dan kembali ke halaman Anda.Atau, Anda dapat mengklik tombol kembali dan maju browser.
Jika cache kembali/maju berfungsi untuk halaman Anda tanpa masalah, Anda akan melihat pesan berikut:
Jika tidak, Anda akan melihat daftar masalah.
Untuk mengetahui masalah yang memengaruhi frame mana, luaskan bagian Frames.
Menyelesaikan masalah yang mencegah penyimpanan dalam cache
Jika halaman Anda tidak memenuhi syarat untuk penyimpanan dalam cache kembali/maju, tab Back/forward cache akan menampilkan daftar dengan tiga jenis penyebab:
- Dapat ditindaklanjuti. Anda dapat memperbaiki masalah ini untuk mengaktifkan penyimpanan dalam cache. Misalnya, berhenti menggunakan peristiwa
unload
. - Dukungan Tertunda. Chrome belum mendukung fitur ini, sehingga fitur tersebut mencegah penyimpanan dalam cache. Namun, setelah didukung, Chrome akan menghapus batasan ini.
- Tidak Dapat Ditindaklanjuti. Anda tidak dapat memperbaiki masalah ini di halaman ini. Sesuatu yang berada di luar kontrol halaman mencegah penyimpanan dalam cache.
Untuk mengetahui frame mana yang menjadi pemblokir, luaskan bagian yang sesuai di bagian deskripsi masalah.
Masalah umum yang mencegah penyimpanan dalam cache kembali/maju
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 perbarui, gunakan
no-cache
atau waktu cache yang singkat, misalnya,max-age=60
.Pengendali penghapusan muatan yang bermasalah.
Chrome berencana untuk menghentikan penggunaan pengendali penghapusan muatan dan merekomendasikan untuk tidak pernah 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=()
.