私が関わるとあるプロジェクトで、ページの読み込みを高速化させるためService Workerを導入した。Service Workerとは、PWA（Progressive Web Apps）などブラウザで動作するWebアプリで使用される技術だが、今回はこの技術の一部である「オフラインキャッシュ」を使用して高速化を図った。省略している部分もあるが、おおまかな流れとしては以下のとおりだ。
- 特定のJavaScriptファイルに任意のHTMLやCSS、画像などのパスを登録する
- 登録されたファイルはページ読み込み時にロードされ、キャッシュとして以後保持される
- ページ遷移した場合にキャッシュされているファイルは読み込みが発生しないため表示が速い
例えば、ホームを表示した際に次にユーザーがクリックするだろうと予測される製品一覧ページのメインビジュアルのパスを登録しておけば、実際に製品一覧ページに遷移したときにメインビジュアルが一瞬で表示されるということだ。
満を持して導入したものの、どのページも非常に読み込みに時間がかかるようになってしまった。導入前の懸念点として、サイト全体の容量によってはむしろ導入前に比べて読み込みが遅くなる可能性もあるというのは事前調査で知っていたのだが、まさかストレスになるほど待たされるとは思ってもみなかった。今回導入したサイトは確かに通常のコーポレートサイトに比べると重たい画像も少なく、ページ数もそこまである訳ではないため全体容量は小さい。
一方で、Service Workerを実行するためのスクリプトの書き方が悪いという可能性もあり、言い切ることはできないが、現状の結論としては容量の小さなサイトに導入した場合は読み込み高速化にはつながらず逆効果ということだ。特にページを量産する段階でService Workerを導入してしまうと毎回のページ読み込みが重くなり、開発速度にすら悪影響を及ぼしてしまう。
今回のプロジェクトでは期待した効果が得られなかったが、あくまでサイトの特性によって結果が左右されるものなので違うプロジェクトでも導入して検証を行う予定だ。また、Service Workerに限らず通信量を減らして速度を改善する手法は他にも多くある。現状に満足せず、今後も研究を続けて使える手法はどんどん取り入れていきたい。
