Pastikan halaman dapat dipulihkan dari back-forward cache

Latar belakang

Back-forward cache (bfcache) menyimpan snapshot halaman dalam memori untuk saat halaman dipulihkan dari histori navigasi. Hal ini secara signifikan mempercepat navigasi kembali ke halaman, tetapi beberapa API browser (misalnya, pemroses penghapusan muatan) dapat menyebabkan bfcache gagal dan halaman akan dimuat secara normal.

Cara Lighthouse mendeteksi kegagalan bfcache

Navigasi Mandiri

Di akhir navigasi mandiri, Lighthouse akan keluar dan mencoba memulihkan halaman dari histori navigasi untuk mendeteksi apakah bfcache sedang digunakan.

Alur Penggunaan

Lighthouse tidak akan secara aktif menguji bfcache dalam navigasi saat menjalankan alur penggunaan. Hal ini karena membuka dan kembali ke halaman di akhir setiap navigasi tidak mencerminkan sebagian besar pengalaman pengguna di halaman.

Namun, Anda masih dapat menguji penggunaan bfcache dalam mode rentang waktu dengan menyertakan navigasi histori sebagai bagian dari perjalanan pengguna. Contoh:

const flow = await startFlow(page);

// This navigation will not test the bfcache
// because it is part of a user flow.
await flow.navigate('https://example.com');

// This timespan will try to restore the page from the bfcache.
// Problems restoring from the bfcache are surfaced in this report.
await flow.startTimespan();
await page.goto('https://example2.com');
await page.goBack();
await flow.endTimespan();

Memahami kegagalan bfcache

Jika halaman tidak dapat dipulihkan dari bfcache karena alasan apa pun, audit akan gagal. Lighthouse akan mencantumkan alasan bfcache tidak dapat digunakan, beserta frame yang menyebabkan masalah. Alasan kegagalan dapat berupa salah satu dari tiga jenis:

  • Dapat ditindaklanjuti: Anda dapat memperbaiki masalah ini untuk mengaktifkan penyimpanan dalam cache.
  • 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.

Contoh hasil dari audit cache kembali/maju Lighthouse

Resource