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 dalam cache ini.
Back-forward cache (atau bfcache) adalah pengoptimalan browser yang memungkinkan navigasi maju dan mundur secara instan. Untuk mengetahui informasi selengkapnya, lihat Back/forward cache.
Uji 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 di browser.
Jika back-forward cache berfungsi tanpa masalah, Anda akan melihat pesan berikut:
Jika tidak, Anda akan melihat daftar masalah.
Untuk mengetahui masalah mana yang memengaruhi frame, luaskan bagian Frame .
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 dalam cache. Misalnya, berhenti menggunakan peristiwa
unload
. - Dukungan Menunggu Persetujuan. Chrome belum mendukung fitur ini, sehingga fitur ini mencegah penyimpanan dalam cache. Namun, setelah didukung, Chrome akan menghapus batasan tersebut.
- Tidak Dapat Ditindaklanjuti. Anda tidak dapat memperbaiki masalah ini di halaman ini. Sesuatu yang berada di luar kendali halaman mencegah penyimpanan cache.
Untuk mengetahui frame mana yang menjadi pemblokir, luaskan bagian yang sesuai di bawah deskripsi masalah.
Masalah umum yang mencegah back-forward caching
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 Anda ingin cukup baru, gunakan
no-cache
atau waktu cache yang singkat, misalnya,max-age=60
.Pengendali penghapusan muatan yang bermasalah.
Chrome berencana untuk 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=()
.