こんにちは。ぬこすけです。
最近(2022/10/26)に、マーケティングツールを開発する Repro が、タグを入れるだけでウェブサイトの表示速度を高速化させるツール「 Repro Booster 」をリリースしました。
- ニュース
- Repro 公式サイト
表示速度アップの仕組みは簡単にいうと、ユーザーのクリックを予測して次のページのデータを先読み & 端末にキャッシュして次のページの読み込み速度を上げるようです。
たまたま SNS でこのニュースを見かけた時、「 ほげえええ 」と衝撃が走りました。
表示速度アップの仕組み自体はエンジニアだったらあまりびっくりはしないかもしれません。
例えば、 Next.js には next/link でリンクを元にデータの先読み機能があったり、 gueess という機械学習を用いてユーザーが次にアクセスする可能性が高いページを予測してプリフェッチするようなライブラリもあります。
私が衝撃が走ったのはそこではありません。
衝撃が走ったのは タグを入れるだけ というところです。
実は「タグを入れるだけで〇〇する」ようなサービスはすでにあったりします。
例えば Wovn Technologies という会社ではタグを入れるだけでページの翻訳をしてくれるサービスを提供しています。
タグを入れるだけでサイトの高速化できる と聞いたとき、「翻訳以外にもそういうのもあるんか！」と衝撃でした。
エンジニアいらないやんけ！ と思いました！
私はクビになりたくありません。
というわけで、「 Repro Booster ってどんな JavaScript 書いてるんだろう」と思い、リバースエンジニアリングじゃないですが、ちょっと js ファイルを見てみました。
個人的にパッとみて気になったところを書いています。
注意事項
- あくまでも js ファイルからの 個人的な感想 です。
なぜそのような実装になっているかは内部的な事情（開発リソースやターゲットとするブラウザなど）が色々あると思うので、「この実装は間違っている」とか思い込みはしないでください。 - あくまで公開されている js ファイルやブラウザのキャッシュしか見ません。バックエンドがどうなっているかとか野暮な推測はしません。
- 事例として紹介されている「オミカレ」のサイトから確認します。
- ブラウザからリクエストしている 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 をサポートしていたりします。
js ファイルには serviceWorkerUrl という記述が見られたので、もしかしたら ServiceWorker が使えるかもしれません（オミカレでは ServiceWorker の登録はされていませんでした）。
もしタグを入れるだけで ServiceWorker の登録 & サイト高速化できるなら高機能だなぁ と思いました。
Platform.js を使っている
js ファイルには Platform.js のライセンスの記述が見られました。
Platform.js とはデバイス判定をするライブラリです。
Platform.js は最後にリリースされたのが 2 年前で、メンテされているか微妙なところではあります。
一番スクリプトサイズが大きい
js ファイルのスクリプトサイズが気になったので見てみました。
オミカレにおいては gtag などを超えて一番スクリプトが大きいです。
（ライブラリ起因？なのか、デカい文字列を JSON.parse している...）
requestIdleCallback や requestAnimationFrame を使っている
ブラウザのアイドリング中に処理をかませられる requestIdleCallback の記述が見られました。
また、ブラウザの描画タイミングを考慮して実行できる requestAnimationFrame の記述も見られました。
もしライブラリ側ではなくアプリケーション側で記述しているのであれば、 高いレベルでパフォーマンスを意識した実装しているなー と思いました。
最後に
ちょうど 2022/10/26 に Repro Booster がリリースされたということで、当日に js ファイルを見てどんな感じなんだろーと思い（ 相当変態 ）、リリース日当日に簡単に記事を書いてみました。
クリックの予測についてはどうやっているのかはパッとはわかりませんでした（ mouseover で判定しているんですかね？それらしい EventListener が見つかりませんでした）。
やっぱり タグをいれるだけでサイト高速化 できるのは良いなぁと思います！今後のさらなる高速化に期待です！