タグを入れるだけで Web サイトを高速化する Repro Booster について思うこと

こんにちは。ぬこすけです。

最近(2022/10/26)に、マーケティングツールを開発する Repro が、タグを入れるだけでウェブサイトの表示速度を高速化させるツール「 Repro Booster 」をリリースしました。

* ニュース

https://prtimes.jp/main/html/rd/p/000000206.000013569.html

* Repro 公式サイト

https://repro.io/products/booster/

![スクリーンショット 2022-10-26 21.37.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164159/7e9edb42-2da9-b5fd-7560-a15284b9e68c.png)
[PRTIMESより引用](https://prtimes.jp/main/html/rd/p/000000206.000013569.html)

表示速度アップの仕組みは簡単にいうと、ユーザーのクリックを予測して次のページのデータを先読み & 端末にキャッシュして次のページの読み込み速度を上げるようです。

たまたま SNS でこのニュースを見かけた時、「 **ほげえええ** 」と衝撃が走りました。

表示速度アップの仕組み自体はエンジニアだったらあまりびっくりはしないかもしれません。
例えば、 `Next.js` には `next/link` でリンクを元にデータの先読み機能があったり、 [gueess](https://github.com/guess-js/guess) という機械学習を用いてユーザーが次にアクセスする可能性が高いページを予測してプリフェッチするようなライブラリもあります。
私が衝撃が走ったのはそこではありません。

衝撃が走ったのは **タグを入れるだけ** というところです。

実は「タグを入れるだけで〇〇する」ようなサービスはすでにあったりします。
例えば [Wovn Technologies](https://wovn.io/ja/) という会社ではタグを入れるだけでページの翻訳をしてくれるサービスを提供しています。

**タグを入れるだけでサイトの高速化できる** と聞いたとき、「翻訳以外にもそういうのもあるんか！」と衝撃でした。
**エンジニアいらないやんけ！** と思いました！

私はクビになりたくありません。
というわけで、「 Repro Booster ってどんな JavaScript 書いてるんだろう」と思い、リバースエンジニアリングじゃないですが、ちょっと js ファイルを見てみました。
個人的にパッとみて気になったところを書いています。

## 注意事項

- あくまでも js ファイルからの **個人的な感想** です。
なぜそのような実装になっているかは内部的な事情（開発リソースやターゲットとするブラウザなど）が色々あると思うので、「この実装は間違っている」とか思い込みはしないでください。
- あくまで公開されている js ファイルやブラウザのキャッシュしか見ません。バックエンドがどうなっているかとか野暮な推測はしません。
- 事例として紹介されている「[オミカレ](https://party-calendar.net/)」のサイトから確認します。
  - ブラウザからリクエストしている https://cdn.reproio.com/web/poc/common/repro-sdk.min.js というファイルで確認します。
  - Repro (と思われる) サーバーに対しての js のレスポンスはこれだけでした。 

## LocalStorage を使っている

>表示速度アップの仕組みは簡単にいうと、ユーザーのクリックを予測して次のページのデータを先読み & 端末にキャッシュして次のページの読み込み速度を上げる

`localStorage` という記述が見つかり、かつブラウザの LocalStorage にもデータが溜まっているので、端末のキャッシュには `LocalStorage` を使っていそうです。
もしかしたら `IndexedDB` でも使っているのかなと思いましたが、 js ファイルに `indexedDB` など API を使った記述がなかったり、 ブラウザの `IndexedDB` にもデータは保存されていませんでした。
`localStorage` は同期的な処理になるので、 `localStorage` を使っている間はブラウザの処理がブロックされます。
ただし、 `localStorage` の方が API 的に使い勝手が良かったり、　[IE をサポート](https://caniuse.com/?search=localstorage)していたりします。

js ファイルには `serviceWorkerUrl` という記述が見られたので、もしかしたら `ServiceWorker` が使えるかもしれません（オミカレでは `ServiceWorker` の登録はされていませんでした）。
**もしタグを入れるだけで `ServiceWorker` の登録 & サイト高速化できるなら高機能だなぁ** と思いました。

## Platform.js を使っている

js ファイルには `Platform.js` のライセンスの記述が見られました。
`Platform.js` とはデバイス判定をするライブラリです。

https://github.com/bestiejs/platform.js/

`Platform.js` は最後にリリースされたのが 2 年前で、メンテされているか微妙なところではあります。

## 一番スクリプトサイズが大きい

js ファイルのスクリプトサイズが気になったので見てみました。

https://onl.tw/2NYwjkv

オミカレにおいては `gtag` などを超えて一番スクリプトが大きいです。

![スクリーンショット 2022-10-26 23.10.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164159/97fb3758-0379-79ce-b053-3d2045e2de2f.png)

（ライブラリ起因？なのか、デカい文字列を `JSON.parse` している...）

## requestIdleCallback や requestAnimationFrame を使っている

ブラウザのアイドリング中に処理をかませられる `requestIdleCallback` の記述が見られました。
また、ブラウザの描画タイミングを考慮して実行できる `requestAnimationFrame` の記述も見られました。

もしライブラリ側ではなくアプリケーション側で記述しているのであれば、 **高いレベルでパフォーマンスを意識した実装しているなー** と思いました。

## 最後に

ちょうど 2022/10/26 に Repro Booster がリリースされたということで、当日に js ファイルを見てどんな感じなんだろーと思い（ **相当変態** ）、リリース日当日に簡単に記事を書いてみました。
クリックの予測についてはどうやっているのかはパッとはわかりませんでした（ `mouseover` で判定しているんですかね？それらしい EventListener が見つかりませんでした）。
やっぱり **タグをいれるだけでサイト高速化** できるのは良いなぁと思います！今後のさらなる高速化に期待です！