Pastikan halaman dapat dipulihkan dari back-forward cache

Latar belakang

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

Cara Lighthouse mendeteksi kegagalan bfcache

Navigasi Mandiri

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

Alur Pengguna

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

Namun, Anda tetap 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 apa pun yang menyebabkan bfcache tidak dapat digunakan, bersama dengan frame yang menyebabkan masalah. Alasan kegagalan dapat berupa salah satu dari tiga jenis berikut:

  • Dapat ditindaklanjuti: Anda dapat memperbaiki masalah ini untuk mengaktifkan penyimpanan cache.
  • Dukungan Menunggu Keputusan: Chrome belum mendukung fitur ini, sehingga fitur tersebut mencegah penyimpanan cache. Namun, setelah didukung, Chrome menghapus batasan tersebut.
  • Tidak Dapat Ditindaklanjuti: Anda tidak dapat memperbaiki masalah tersebut di halaman ini. Sesuatu di luar kontrol halaman akan mencegah penyimpanan cache.

Contoh hasil dari audit back-forward cache Lighthouse

Referensi