バックフォワード キャッシュ（bfcache）は、すぐに前または次のページに移動できるようにブラウザを最適化する機能です。これにより、ユーザーのブラウジング エクスペリエンスが大幅に向上します。特に、前後のナビゲーションが多く発生するウェブサイトでのエクスペリエンスが向上します。
bfcache に関する web.dev の記事
Yahoo! 日本有数のニュース プラットフォームであるジャパン ニュースは、bfcache のヒット率を高めるために一丸となって取り組み、その結果としてユーザー エクスペリエンスとビジネスが大きく向上しました。具体的には、A/B テストを実施した結果、bfcache を使用するページで広告収入が 9% 増加したことがわかりました。
このケーススタディでは、Yahoo!日本ニュースは bfcache を阻害する要因を取り除き、ユーザー エクスペリエンスを大幅に改善しました。
bfcache の阻害要因の排除
bfcache は Chrome 86 以降で利用可能で、最新のすべてのブラウザで利用できます。ただし、bfcache を最大限に活用するには、ウェブサイトの潜在的な阻害要因を排除する必要があります。Yahoo! トラベルが日本ニュースが直面した問題:
unloadハンドラの使用Cache-controlヘッダーでのno-storeディレクティブの使用
ウェブサイトの主な阻害要因を確認するには、[Chrome デベロッパー ツール] > [アプリケーション] > [バックフォワード キャッシュ]（詳細）に移動するか、notRestoredReasons API を使用して、実際の使用状況に基づいて阻害要因を包括的に確認できます。
Yahoo!日本ニュースは以下の障壁を取り除きました。
- アンロード ハンドラ:
unloadイベントは非常に信頼性が低いため、unloadイベントの代わりにpagehideイベントを使用します。また、permission-policy: unloadは Chrome 115 でリリースされ、ウェブサイトが特定のオリジンのunloadハンドラを確実に削除できるようにしています。Chrome では、unloadハンドラを段階的にサポート終了にする予定です。 Cache-control: no-store（略して CCNS）:Cache-controlヘッダーをno-storeからno-cacheに変更すると、bfcache を有効にできます。Chrome では、特定の状況ではno-storeヘッダーがある場合でも bfcache のキャッシュ保存を開始する予定です。
CCNS は、どのような場合でもキャッシュに保存してはならないページを対象としています。ただし、CCNS のあるページは、CDN エッジサーバーやローカル キャッシュなどのキャッシュ技術の恩恵を受けることができないという注意点があります。
CCNS ヘッダーがある場合は、ウェブサイトに適した Cache-control 戦略について話し合う絶好の機会です。no-store と no-cache の主な違いは次のとおりです。
Cache-control のオプションについて詳しくは、こちらのフローチャートをご覧ください。
bfcache の影響
bfcache の影響を測定するため、Yahoo!日本ニュースは 2 週間にわたり A/B テストを実施しました。1 つのグループには bfcache を修正したバージョンと、別のグループに bfcache を適用しないバージョンを配信しました。有意な結果を得るために、かなりの量のトラフィックがある URL パスを選択しました。その他の見た目や機能面では、両バージョンに違いはありませんでした。
こちらの動画では、bfcache を使用した場合と使用していないウェブサイトを比較しています。bfcache が有効になっているウェブサイトは、「戻る」または「進む」ナビゲーションで非常に高速に読み込まれることがわかります。
真に有望なのは、bfcache を有効にしたグループでは、特にモバイル デバイスでページビューと広告収入が大幅に増加したことです。
Yahoo! トラベルによるbfcache A/B テストを実施しました。（詳しくはケーススタディの記事をご覧ください）。
bfcache を使用してページ間の「戻る」または「進む」が瞬時に行われると、ユーザーがページに滞在する時間が長くなる傾向があるため、広告ビューが増え、広告収入の増加につながります。
bfcache によりウェブサイトのシームレスなユーザー エクスペリエンスが向上
ページが瞬時に読み込まれると、ナビゲーションがよりシームレスになります。
Yahoo!主要なユーザー ジャーニーのひとつを以下に挙げます。
- 記事一覧に移動
- 記事をクリックして読む
- 記事リストに戻る
- 他の記事をクリックして読む
bfcache が導入される前は、ユーザーは記事を読み終え（ステップ 2）、記事の一覧ページが再び読み込まれるのを待つ必要がありました。これは、単に記事リストに戻って別の記事を選びたいユーザーにとって、煩わしさの要因となる可能性があります。
「戻る」ナビゲーションで妨げとなったもう 1 つの原因は、スクロール位置でした。実際には、後方ナビゲーションが発生したとき、ブラウザはスクロール位置の復元を試みます。しかし、動的に追加された広告やその他のレイアウト変更により、スクロール位置が誤って復元されることが多く、ユーザーが方向を見失ったり、ページから離れたりする可能性があります。後方ナビゲーションに bfcache が搭載されている場合は、スクロール位置は直ちに正しく復元されます。
bfcache を使用することで、ユーザー ジャーニーの煩わしさが解消されました。ユーザーはすぐに記事一覧ページに戻り、別の記事を選択して読むことができます。記事一覧ページの読み込みを待つ必要はありません。
ユーザーが、ある記事を直接閲覧し、その後別の記事をブラウジングする場合も同様です。
簡単に言えば、Yahoo! トラベルで bfcache を使用するメリットは、ニュース速報:
- ページビュー数の増加: ページが bfcache でキャッシュされていると、ユーザーがウェブサイト内を移動する可能性が高まりました。
- 収益の増加: セッションあたりのページビュー数が増加した結果、広告の表示回数が増加し、bfcache を使用していないテストグループと比較して、モバイルでの収益が 9% 増加しました。
おわりに
つまり、bfcache はウェブサイトを即座に作成できるだけでなく、全体的なユーザー エクスペリエンスの摩擦を減らし、ウェブサイト内でのエンゲージメントを高めることにもつながります。
Chrome チームは常に bfcache の阻害要因について調査しています。特に、この記事で紹介した 2 つの理由は、bfcache が使用されない一般的な理由です。将来的には、これによって bfcache の使用が妨げられることはありませんが、それまで待つ必要はありません。bfcache のブロッカーを確認して、一般的なパターンとあまり一般的でないその他のパターンを避けることで、bfcache のメリットを享受できます。