背景
往返快取 (bfcache) 會將網頁的快照儲存在記憶體中,以供從導覽記錄還原頁面時使用。這可以大幅加快返回網頁的瀏覽速度,但某些瀏覽器 API (例如:卸載事件監聽器) 可能會造成 bfcache 失敗,進而正常載入網頁。
Lighthouse 如何偵測 bfcache 失敗
獨立導覽功能
獨立導覽結束時,Lighthouse 會離開並嘗試透過導覽記錄還原頁面,偵測是否使用 bfcache。
使用者流程
執行使用者流程時,Lighthouse 不會主動測試導覽中的 bfcache。這是因為每次都離開頁面後返回網頁,並不會反映網頁上的大部分使用者體驗。
不過,您還是可以在使用者歷程中加入歷史記錄導覽,藉此在時間範圍模式下測試 bfcache 使用情形。例如:
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();
瞭解 bfcache 失敗
如果因任何原因無法從 bfcache 還原網頁,稽核作業就會失敗。Lighthouse 會列出無法使用 bfcache 的所有原因,以及造成問題的影格。失敗原因有以下三種:
- 可採取行動:您可以修正這些問題來啟用快取。
- 待支援:Chrome 尚未支援這些功能,因此會禁止快取。不過,一旦支援,Chrome 就會移除這些限制。
- 無法採取行動:您無法在這個頁面修正這些問題。超出網頁控制的項目會導致快取。