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

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

1,112 view

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

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

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

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

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

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

関連する日報

    フリー素材のアイコン・イラストを流用する時のコツ

    2,486 view

    岡本 早樹のプロフィール画像
    岡本 早樹 デザイナー
    経験やスキルがなくても、デザインのフィードバックはできる

    2,159 view

    原浦 智佳のプロフィール画像
    原浦 智佳 デザイナー
    「壁打ち相談」をうまく使って、情報設計を効率よく進めよう!

    1,491 view

    高島 藍子のプロフィール画像
    高島 藍子 デザイナー
    ベイジディレクターのリアル

    2,541 view

    本山 太志のプロフィール画像
    本山 太志 コンサルタント
    BtoBサイトにおける「ファーストビュー攻略法」

    2,869 view

    池田 彩華のプロフィール画像
    池田 彩華 デザイナー
上に戻る