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

背景

往返快取 (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 往返快取稽核結果範例

資源