1. このページの目的
bfcache の動作を観察する。
2. bfcache の動作テスト
2-1. 「戻る(Back)」を試す手順
(1) Chrome のシークレットウィンドウを開いて、このページを開く（拡張機能の影響を避けるため）。
(2) ⬅ ここを押して、JavaScriptによって以下に文字列を表示する。
(3) Top ⬅ このリンクをクリックしてTopページに移動し、ブラウザバックでこのページに戻る。
(4) (2)の文字列が残ってれば、bfcache が効いている(はず)。動作ログや DevTools の Console も確認する。
2-2. 動作ログ
動作ログは以下に表示される。
2-3. 結果
(2)の文字列はちゃんと残っている。
また、Console はこんな感じになる。
2-4. 「進む(Forward)」を試す手順
(1) Chrome のシークレットウィンドウを開いて、Topページを開く（拡張機能の影響を避けるため）。
(2) Topページ上の「bfcache の動作を観察する」リンクをクリックする。
(3) ブラウザバックで、Topページに戻る。
(4) ブラウザフォワードで、このページに進む。
こちらの結果は省略する（「戻る(Back)」と同じなので）。
3. DevTools による動作テスト
DevTools の [Application]パネルで、ページが bfcacheに最適化されているかテストできる。
Chrome DevToolsは、ページをテストしてbfcache用に最適化されていることを確認し、ページの適格性を妨げる可能性のある問題を特定するのに役立ちます。
特定のページをテストするには、Chromeでそのページに移動し、DevToolsで**[アプリケーション]** > [バックフォワードキャッシュ] に移動します。次に、[テストの実行] ボタンをクリックすると、DevToolsは前後に移動して、ページをbfcacheから復元できるかどうかを判断します。
引用元：バック/フォワードキャッシュ
bfcacheが使えない（最適化されていない）場合は、以下のように表示される。
上記のスクリーンショット内に、"The page has an unload handler in the main frame." とあり、これが原因であることが分かる。
このときは、Chrome拡張機能が unload handler を使っていることが分かった。
そこで、シークレットウィンドウで開いたら、OKとなった。
4. メモ
- bfcache が利用された場合、DevTools の [Network]パネルに、リソースは表示されない。
- Chrome拡張機能が bfcacheに影響を与えるのは困ったことである。
- unload を使っているために、bfcacheが使えなくなる Chrome拡張機能の例（気づいたもの）
- Vimium
- Vimiumのオプションで除外設定してもダメ。
- 拡張機能自体を無効にしないとbfcacheが使えるようにならない。
- Web Vitals
- Vimium