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

背景

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

資源