バックフォワード キャッシュ（bfcache）は、前のページと次のページにすぐに移動できるようにブラウザを最適化する機能です。この機能を使うと、特に行き来するナビゲーションが多いウェブサイトで、ユーザーのブラウジング体験が大幅に向上します。
bfcache に関する web.dev の記事
Yahoo! 日本で最も人気のあるニュース プラットフォームの一つである JAPAN News は、bfcache ヒット率の改善に全力を注ぎ、その結果、ユーザー エクスペリエンスとビジネスが大幅に改善されました。具体的には、実施した A/B テストの結果、bfcache を使用しているページでは広告収入が 9% 増加したことがわかりました。
このケーススタディでは、Yahoo!JAPAN News が bfcache のブロックを解除し、bfcache によってユーザー エクスペリエンスが大幅に改善されたこと。
bfcache の阻害要因を削除
bfcache は Chrome 86 以降で利用可能で、すべての最新ブラウザでも利用できます。ただし、bfcache を最大限に活用するには、ウェブサイト上の潜在的なブロック要因を削除する必要があります。Yahoo!JAPAN News が直面していた問題は次のとおりです。
unloadハンドラの使用。Cache-controlヘッダーでno-storeディレクティブを使用する。
ウェブサイトの主要なブロックをチェックするには、Chrome DevTools > [アプリケーション] > [バック/フォワード キャッシュ] に移動します。または、notRestoredReasons API を使用して、現場での実際の使用状況に基づいて、ブロックに関するより包括的なビューを取得することもできます。
Yahoo! JAPAN News はブロックを削除しました。
- アンロード ハンドラを置き換えた:
unloadは非常に信頼性が低いため、unloadイベントではなくpagehideイベントを使用しました。Permissions-Policy: unload=()は Chrome 115 でリリースされました。これにより、ウェブサイトは特定のオリジンのunloadハンドラを確実に削除できるようになりました。Chrome では、unloadハンドラを段階的に廃止する予定です。 cache-controlを変更:Cache-controlヘッダーをno-store（CCNS）からno-cacheに変更すると、bfcache が有効になります。Chrome は、特定の状況で、no-storeヘッダーが指定されている場合でも bfcache のキャッシュに保存することを計画しています。
CCNS は、いかなる状況でもキャッシュに保存しないページを対象としています。ただし、CCNS を使用するページでは、CDN エッジサーバーやローカル キャッシュなどのキャッシュ テクノロジーのメリットを享受できません。
CCNS ヘッダーがある場合は、ウェブサイトに適した Cache-control 戦略について話し合う絶好の機会です。no-store と no-cache の主な違いは次のとおりです。
cache-control オプションの詳細については、cache-control フローチャートをご覧ください。
A/B テストで効果を示す
bfcache の影響を測定するため、Yahoo!JAPAN News では 2 週間にわたって A/B テストを実施しました。1 つのグループには bfcache の修正が適用されたページのバージョンを配信し、別のグループには bfcache の対象外となるページのバージョンを配信しました。テストで有意な結果が得られるように、トラフィックの多い URL パスをテストしました。ページ間のその他の視覚的または機能的な違いはありませんでした。
以下は、bfcache ありと bfcache なしのウェブサイトを比較した動画です。bfcache が有効になっているウェブサイトでは、前後に移動する際の読み込みが大幅に高速化されています。
特にモバイル デバイスで、bfcache を有効にしたグループではページビュー数と広告収入が大幅に増加しました。
Yahoo! で確認された影響の詳細は次のとおりです。JAPAN News の bfcache A/B テスト。詳しくは、こちらの事例紹介をご覧ください。
bfcache によってページ間の前後ナビゲーションが瞬時に行われると、ユーザーはページに長く滞在する傾向があり、広告の視聴回数が増加して広告収入も増加します。
シームレスなユーザー エクスペリエンス
ページが瞬時に読み込まれると、ナビゲーションがよりシームレスに感じられます。
Yahoo! JAPAN News では、複数の記事を読むという主要なユーザー ジャーニーがあります。
- 記事リストにアクセスします。
- 読みたい記事をクリックします。
- 完了したら、記事リストに戻ります。
- 別の記事を読みたい場合は、その記事をクリックしてください。
bfcache の導入前は、ユーザーが記事を読み終えたときに、記事リスト ページが再度読み込まれるのを待つ必要がありました。リストにすぐに戻って別の記事を選びたいユーザーにとっては、煩わしい要素になる可能性があります。
後方ナビゲーションの妨げとなるもう 1 つの要因は、スクロール位置でした。実際には、ブラウザは後方ナビゲーションが発生したときにスクロール位置を復元しようとします。ただし、動的に追加された広告やその他のレイアウト変更により、スクロール位置が正しく復元されないことがあります。これにより、ユーザーが混乱したり、ページを離れたりする可能性があります。
この問題は、後方ナビゲーションが bfcache によって提供されている場合に解決されます。スクロール位置がすぐに正しく復元されます。
bfcache により、ユーザー ジャーニーの摩擦が解消されました。ユーザーは、記事リスト ページの読み込みを待たずに、記事リスト ページにすぐに移動して別の記事を読み取ることができます。
ユーザーが 1 つの記事から別の記事を直接閲覧し、その記事をまた閲覧する場合も同様です。
要約すると、Yahoo! JAPAN News には次のものがあります。
- ページビューの増加: ページが bfcache でキャッシュに保存されている場合、ユーザーはウェブサイト内で移動する可能性が高くなります。
- 収益の増加: セッションあたりのページビュー数が増加した結果、広告の表示回数が増加し、bfcache を使用しないテスト群と比較して、モバイルでの収益が 9% 増加しました。
bfcache を今すぐ実装する
つまり、bfcache を使用すると、ウェブサイトを即時表示できるだけでなく、全体的なユーザー エクスペリエンスの摩擦を軽減し、ウェブサイト内のエンゲージメントを高めることができます。
Chrome チームは、bfcache ブロッカー、特に bfcache が使用されない一般的な理由について継続的に調査しています。将来的には、これらの機能によって bfcache の使用が防止される可能性がありますが、それまで待つ必要はありません。bfcache ブロッカーを確認し、これらの一般的な（およびそれほど一般的でない）パターンを回避することで、bfcache のメリットを享受できます。