Service Workerによる最適なキャッシュ戦略を探る

この記事の要約

Service Worker を用いたキャッシュ戦略は下記の6つに分類されます。

1. Cache Only
2. Cache First
3. Network Only
4. Network first
5. Stale While Revalidate
6. Cache then network

キャッシュするコンテンツの種類によって、有効な戦略は異なります。
各キャッシュ戦略の特徴を把握し、正しく使っていきましょう。

Service Workerによるキャッシュ戦略とは

Googleが行った調査によると、ページの表示速度が1秒から3秒に増えるだけで、直帰率が32%増加すると報告されています。
Webサービスに関わる人間にとって、ページスピードの改善は急務と言えるわけですが、その際に大きな味方となるのがService Workerによるコンテンツのキャッシュ管理です。

通常だとキャッシュの管理はブラウザ任せであり、そこにエンジニアが介入できる部分は少ないです。
しかし、Service Workerを導入することによって、これまでブラウザ任せだったキャッシュを自由に管理することが可能となります。
それらの管理方法を総称したものが、俗に言うキャッシュ戦略です。

キャッシュ戦略は、ページスピードの改善において非常に強力な武器です。
しかし、その特徴を把握して上手く用いなければ、逆にユーザー体験の妨げともなり得ます。
この記事では、そのようなキャッシュ戦略を正しく用いるために、各手法の概要と使い所についてまとめてみました。

Cache Only

ネットワークの状態に関係なく、常にキャッシュを使用してファイルを返します。
もしService Workerにキャッシュされていなかった場合、例えネットワークから取得できる状態であってもエラーとなってしまいます。

Cache Onlyの使い所

サイトの特定のバージョンにおいて、不変であると保証されているものに用いるべきです。
また、キャシュが失敗してしまうとお手上げです。
ロゴ等であれば不変性が保証されていますので、この戦略を活用しやすいでしょう。
それとは逆に、サイトのメインコンテンツに関わる箇所では、Cache Onlyの使用は避けましょう。

Cache First

何らかのファイルが要求された際に、まずはキャッシュから返そうとします。
キャッシュが存在しない場合はネットワークから取得して返します。

Cache Firstの使い所

JS,CSS,フォント,画像など、比較的寿命が長いアセット類に向いています。
また、オフラインファーストで構築する場合は、大抵のリクエストをこの戦略で処理することになります。

Network Only

常にネットワークからファイルを返します。

Network Onlyの使い所

Service Workerで制御する必要のないリクエストに対しては、この戦略を用います。
例：POSTなど、GET以外のリクエスト / アクセス解析関連　など

Network First

Cache Firstの逆Verです。リクエストに対して、まずネットワークからファイルを返そうとします。
何らかの理由でネットワークからファイルが返ってこない時はキャッシュを見に行きます。

Network Firstの使い所

ソーシャルメディアのタイムラインや新着記事など、対象が頻繁に更新される場合はこの戦略が最適です。
ネットワークから最新の情報を取得しつつ、それに失敗した時のfallbackとしてService Workerのキャッシュを用います。

Stale While Revalidate

リクエストに対し、キャッシュにファイルが存在する場合はキャッシュから返します。
存在しない場合はネットワークから返します。
そしてキャッシュの有無に関係なく、バックグラウンドでネットワークにアクセスし、キャッシュを最新化します。
それにより、次回のアクセスでは最新のリソースが入手可能です。
最近話題になっている、Next.jsのISRとよく似た動きですね。

Stale While Revalidate の使い所

この戦略は、頻繁に更新され、かつ情報の即時性を求められないコンテンツ(アバター等)に効果的です。
また、「キャッシュは効かせつつ、なるべく最新の情報を提供したい」といった要望に対しても、この戦略を活用可能です。

Cache then network

この戦略では、ページがキャッシュとネットワークの２つのリクエストを行います。
はじめにキャッシュされたデータを表示し、ネットワークからデータが到着したタイミングでページを更新するという戦略です。
新しいデータが到着したときに現在のデータを置き換えることもありますが、その際はユーザーが読んでいたり操作している情報が「消滅」しないように注意しましょう。
そのような動作はユーザーにとって混乱を招く恐れがあります。

Cache then network の使い所

この戦略は「最新の情報が必要とされる」という点で、Network Firstと共通点があります。
使い所もNetwork Firstとよく似ており、速報性が重視されるような記事やソーシャルメディアのタイムライン、ゲームのリーダーボードなど、頻繁に更新され、なおかつ最新の情報が必要となるコンテンツに向いています。

まとめ

ここまで見てきたように、一言でキャッシュ戦略といっても、その種類は多種多様です。
使い所を間違えてしまうと、効果が無いどころか、ユーザー体験の面で逆効果になることもありえます。
キャッシュ戦略だけでなくパフォーマンスの最適化全般に言えることですが、安易にテクニックだけを採用しないことが何よりも重要です。
「本当にその最適化が必要なのか」、「その手法はこの場面で最適なのか」と常に自分に問いながら、正しい最適化を心がけていきましょう。