よりスムーズで快適なコミュニティ体験にするため、bfcacheの有効化を行って、ブラウザの戻る・進むを高速化してUX改善を行いました。
bfcache導入の経緯や結果などについて簡単に説明できればと思っております。
bfcacheについて
そもそもbfcacheについてなじみがない技術かもしれませんので、簡単に説明できればと思います。
bfcache（バック/フォワードキャッシュ）は、ブラウザの『戻る』や『進む』ボタンを使った際に、ページ全体の状態（HTML、CSS、JavaScriptの実行状態など）を保存しておくキャッシュ機能です。このため、サーバーからのデータ再取得をせずに瞬時にページを再表示することができます。
このbfcache自体、開発者が有効にしたり無効にしたりというものではなく、対応しているブラウザでbfcacheの有効化の条件が満たしていれば勝手に有効化されて、パフォーマンス改善が行われます。
caniuseでもあるようにbfcache自体は昔からある機能で、古くは2010年くらいからサポートされています。
メリット
ユーザーが「戻る」や「進む」ボタンを押したときのページの遷移がネットワークに接続することなくなり、非常に高速になるため待ち時間がほとんどなくなります。
スクロール位置の復元もbfcacheが有効であれば行われるので、エンジニアが苦労してスクロール位置の復元を行わずとも、UXの向上が望めます。
bfcacheはMPAでのみ活用できる機能で、フロントエンドでブラウザバックの処理を実装しているSPAでは利用されることはあまりありません。
OSIROでは現在Ruby on Railsですが、Turbo（Turbo Drive）の全面的な導入はしておらず、
MPAの内部でVueを使って画面のレンダリングを行っているという設計で、bfcacheはVueでレンダリングをしたHTMLやVueのViewModelを含めてキャッシングを行ってくれることから、
恩恵を強く受けることがわかったので、有効化に向けて調査や対応を行うことにしました。
bfcacheが有効にならない
bfcacheが有効にならないケースはたくさんあるのですが、
弊プロダクトの場合、サイト内にある通知をリアルタイムで受け取れるようにWebSocketをつかっているのですが、コネクションが画面から離脱する際にコネクションを切断していなかったり、一部ページでJavaScriptのunloadイベントを利用していたことから、有効になっていない状態でした。
下記のページにもあるように、Chromeでページがキャッシュ可能になるように確認しながら進めました。
bfcacheが無効であることを前提したUXにしない
これまではすべての画面でbfcacheが無効だったので、Vue.js（JavaScript）でモーダルを出した状態で画面遷移を行ってブラウザバックしても、Vueのインスタンスも再実行されることで画面遷移前に表示されていたモーダルが表示されることはありませんでした。
bfcacheではブラウザバックしたときに、ページ遷移を行った時点の状況を正確に再現します。
従って、画面遷移を行う際にモーダルを非表示にしておかないとブラウザバックしたときにモーダルが表示されたままになってしまいます。
このように画面遷移する前にモーダルを明示的に非表示にしていない画面がいくつかあったので対応を行いました。
VueとMPAでのスクロール位置を保持する仕組みを削除
一部の画面では、Vueでブラウザバックした際のスクロール位置を保持する仕組みをlocalStorageで実装していました。しかし、この仕組みがChromeのbfcacheと挙動がコンフリクトしてしまったため、自作した仕組みを削除する必要がありました。
結果
UXとしては上記のように改善され、狙い通りUXの向上が行われました。
副産物として自作したスクロール位置を保持する仕組みを削除したため、ほぼ動作が変わらずコードを800行程度削除できました。
このようにUXの向上だけでなく、ブラウザの進化によって不要になったコードをメンテナンスする必要もなくなったので、MPAでのUXの向上を狙う方がいれば、ページでbfcacheが有効になっているかを再確認してみてはいかがでしょうか。
最後に
最後にbfcacheを有効化する際に参考になった記事などを掲載しておきます。
Googleがbfcacheについてまとめている記事で困ったときはだいたいここを見ていました。
実例ベースでのbfcacheの有効化から効果検証までがまとめられていてとても参考になりました。
Discussion