ページがバックフォワード キャッシュから復元できることを確認する

背景

バックフォワード キャッシュ（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 からページを復元できなかった場合、監査は失敗します。bfcache を使用できなかった理由と、問題の原因となったフレームが Lighthouse に表示されます。不承認の理由は次の 3 種類です。

  • 対処可能: これらの問題を修正すると、キャッシュ保存を有効にできます。
  • サポート保留中: Chrome ではこれらの機能はまだサポートされていないため、キャッシュに保存されません。ただし、サポートが完了すると、Chrome ではこれらの制限が解除されます。
  • 対応不可: このページではこれらの問題を修正できません。ページの制御範囲外の要因によってキャッシュ保存が妨げられている。

Lighthouse のバックフォワード キャッシュ監査の結果の例

リソース