確保網頁可以從往返快取還原

背景

往返快取 (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 就會移除這些限制。
  • 無法採取行動:您無法在這個頁面修正這些問題。超出網頁控制的項目會導致快取。

Lighthouse 往返快取稽核結果範例

資源