100ページ規模のサイトの高速化にService Workerは有効か?

酒井 琢郎のプロフィール画像
エンジニア 酒井 琢郎

1,222 view

私が関わるとあるプロジェクトで、ページの読み込みを高速化させるためService Workerを導入した。Service Workerとは、PWA(Progressive Web Apps)などブラウザで動作するWebアプリで使用される技術だが、今回はこの技術の一部である「オフラインキャッシュ」を使用して高速化を図った。省略している部分もあるが、おおまかな流れとしては以下のとおりだ。

  1. 特定のJavaScriptファイルに任意のHTMLやCSS、画像などのパスを登録する
  2. 登録されたファイルはページ読み込み時にロードされ、キャッシュとして以後保持される
  3. ページ遷移した場合にキャッシュされているファイルは読み込みが発生しないため表示が速い

例えば、ホームを表示した際に次にユーザーがクリックするだろうと予測される製品一覧ページのメインビジュアルのパスを登録しておけば、実際に製品一覧ページに遷移したときにメインビジュアルが一瞬で表示されるということだ。

満を持して導入したものの、どのページも非常に読み込みに時間がかかるようになってしまった。導入前の懸念点として、サイト全体の容量によってはむしろ導入前に比べて読み込みが遅くなる可能性もあるというのは事前調査で知っていたのだが、まさかストレスになるほど待たされるとは思ってもみなかった。今回導入したサイトは確かに通常のコーポレートサイトに比べると重たい画像も少なく、ページ数もそこまである訳ではないため全体容量は小さい。

一方で、Service Workerを実行するためのスクリプトの書き方が悪いという可能性もあり、言い切ることはできないが、現状の結論としては容量の小さなサイトに導入した場合は読み込み高速化にはつながらず逆効果ということだ。特にページを量産する段階でService Workerを導入してしまうと毎回のページ読み込みが重くなり、開発速度にすら悪影響を及ぼしてしまう。

今回のプロジェクトでは期待した効果が得られなかったが、あくまでサイトの特性によって結果が左右されるものなので違うプロジェクトでも導入して検証を行う予定だ。また、Service Workerに限らず通信量を減らして速度を改善する手法は他にも多くある。現状に満足せず、今後も研究を続けて使える手法はどんどん取り入れていきたい。

関連する日報

    ページネーションの必要性と表示件数の考え方

    1,120 view

    岡本 早樹のプロフィール画像
    岡本 早樹 デザイナー
    価値を生み出すスピードの本質

    499 view

    奥原美穂子のプロフィール画像
    奥原美穂子 経営企画
    新入社員が気づいた、プロジェクト改善のヒント

    592 view

    奥原美穂子のプロフィール画像
    奥原美穂子 経営企画
    開発効率化:半分の工数で作る工夫

    1,724 view

    酒井 琢郎のプロフィール画像
    酒井 琢郎 エンジニア
    納得感のあるデザイン提案のポイント

    4,042 view

    岡本 早樹のプロフィール画像
    岡本 早樹 デザイナー
上に戻る