バックフォワード キャッシュ（bfcache）とは、前のページと次のページにすぐに移動できるようにブラウザを最適化する機能です。この機能を使うと、特に多くの前後のナビゲーションを伴うウェブサイトで、ユーザーのブラウジング体験が大幅に向上します。
bfcache に関する web.dev の記事
Yahoo! 日本で最も人気のあるニュース プラットフォームの 1 つである 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は非常に信頼性が低いため、unloadイベントではなくpagehideイベントを使用しました。Permissions-Policy: unload=()は、特定のオリジンのunloadハンドラをウェブサイトが確実に削除できるように、Chrome 115 でリリースされました。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 の修正を適用したバージョンのページを、もう 1 つのグループには bfcache の対象外のページを配信しました。テストで意味のある結果が得られるように、トラフィックの多い URL パスをテストしました。ページ間に視覚的または機能的な違いはありませんでした。
bfcache を使用した場合と使用しない場合のウェブサイトを比較した動画を次に示します。bfcache が有効になっているウェブサイトでは、戻るナビゲーションや進むナビゲーションの際に読み込みが大幅に高速化されていることがわかります。
特にモバイル デバイスでは、bfcache を有効にしたグループでページビューと広告収益が大幅に増加したことが、この結果の有望な点です。
Yahoo! JAPAN News の bfcache A/B テスト。詳しくは、こちらの事例紹介をご覧ください。
bfcache によりページ間の戻る/進むナビゲーションが瞬時に行われるようになると、ユーザーはページに長く滞在する傾向があるため、広告の表示回数が増え、広告収益の増加につながります。
シームレスなユーザー エクスペリエンス
ページが瞬時に読み込まれると、ナビゲーションがよりシームレスになります。
Yahoo! JAPAN News では、複数の記事を読むことが主なユーザー ジャーニーの一つです。
- 記事のリストにアクセスします。
- 記事を 1 つクリックして読みます。
- 完了したら、記事リストに戻ります。
- 別の記事をクリックして読みます。
bfcache が導入される前は、ユーザーが記事を読み終えると、記事リスト ページが再度読み込まれるまで待つ必要がありました。これは、リストにすばやく戻って別の記事を選んで読みたいユーザーにとっては、不便な点となる可能性があります。
後退ナビゲーション時の摩擦のもう 1 つの原因は、スクロール位置でした。実際には、ブラウザは戻るナビゲーションが発生したときにスクロール位置を復元しようとします。ただし、動的に追加された広告やその他のレイアウトの変更により、スクロール位置が正しく復元されないことがあります。ユーザーの混乱を招き、ページを離脱する原因にもなります。
この問題は、bfcache を使用して戻るナビゲーションを行うと解決します。スクロール位置が直ちに正しく復元されるためです。
bfcache を使用すると、ユーザー ジャーニーの摩擦がなくなります。ユーザーは記事リスト ページにすぐに戻って、記事リスト ページの読み込みを待つことなく別の記事を選択して読むことができます。
ユーザーが記事から別の記事に直接移動して戻る場合も同様です。
Yahoo! JAPAN News には次の情報が含まれます。
- ページビューの増加: ページが bfcache でキャッシュに保存されている場合、ユーザーはウェブサイト内を移動する可能性が高くなります。
- 収益の増加: セッションあたりのページビューが増加した結果、広告のインプレッションが増加し、bfcache を使用しないテストグループと比較して、モバイルでの収益が 9% 増加しました。
今すぐ bfcache を実装する
つまり、bfcache を使用すると、ウェブサイトの読み込みが瞬時に行われるだけでなく、全体的なユーザー エクスペリエンスの摩擦を減らし、ウェブサイト内のエンゲージメントを高めることもできます。
Chrome チームは、bfcache のブロッカー、特に bfcache が使用されない一般的な理由として挙げられている理由を継続的に調査しています。今後、これらがバックフォワード キャッシュの使用を妨げなくなる可能性がありますが、それまで待つ必要はありません。bfcache のメリットを享受するには、今すぐ bfcache ブロックを確認し、一般的なパターン（および一般的でないパターン）を避けるようにしてください。