SQL練習アプリ：設計改善で表示を高速化

前回、SQL練習Webアプリの初回リリースをおこないました。
https://shiftb.vibely.site/me/blog/xjXL1fnn19ny

SQL Playground
https://sql-playground.net （ドメイン新しくしました）

触ってくださった方、フィードバックくださった方、ありがとうございます🙇
反応がいただけてとても嬉しかったです。
自分も他にリリースされたサービスはどんどん触って見てみたいと思っています！

練習問題データ取得の効率化を考えたい

リリース後、ある改善について考えていました。

練習問題を切り替えるたびに練習問題取得APIを実行しているので、表示が若干モタつくし、たくさんの練習問題を閲覧しようとするとAPIの呼び出し回数も多くなってしまうということです。

ショートカットキー Ctrl + 上下 で練習問題が連続で切り替えられることもあり、それが少し目立つような感じがありました。

表示もですが、CloudflareはAPIの呼び出し回数に応じた従量課金をするので、無料枠があるとは言え、なんとか最適化したいと考えていました。

検討その１：Cache API

まず、練習問題は内容が変わることがないので、キャッシュしてしまえばデータの取得を効率化できるのではないかと考えました。

CloudflareにはCache APIという、レスポンス内容をキャッシュして、DBまでデータを取りにいかずとも保管しておいたデータを即返す機能があります。

ただし、Cache APIはキャッシュするレスポンスを個別に設定する手間があることと、リクエスト数のカウントは変わらないので、料金の節約にはあまりならないと考えました。
（DBの読み込み回数は減らせるので、その点では少し節約できるかもしれません）

検討その２：静的配信化

そこで、そもそもバックエンドAPIは呼び出さず、フロントエンドの一部として静的配信してしまえば、速度は申し分なく、APIの呼び出し回数もかなり削減できるのではないかと考えました。
問題データはデプロイするタイミングでしか変更しないでしょうし、ユーザーの操作によって動的に返すデータではないので、最初からまるごと配信しちゃっていいのではという考えが生まれました。

良いアイデアな気がしたので、本当にうまくいくのか検証からしました。

検証：速度改善しそうか？

まず、レスポンスはJSON形式のため、静的配信するならそのまま使えるようにJSONファイルにしようと思いました。
しかし、このJSONファイルの取得に時間がかかりすぎてしまっては意味がありません。
実現する上で、このJSONファイルの読み込み速度がネックとなりそうです。
なので、まずはファイルサイズを確認すべく、すべての問題データを一つにまとめたJSONデータを作成してみました。

全問題JSONデータ：38.76 KB

正直これが充分小さいと言えるのか、よくわからないサイズです。
ところが、ある程度大きさのあるテキストファイルはgzipという圧縮ファイルとしてWEBブラウザに配信されます。そうすると、

全問題gzipデータ：5.49 KB

これは充分小さいと言えそうなので、最初のロードで一括取得させても表示速度に影響はなさそうです。
これで前述した課題を解決する見通しが立ちました。

実装

練習問題に関するDBのデータをJSONファイルに変換するPythonスクリプトをCodexに作成させ、デプロイ前に実行して、静的配信用のJSONを配備するようにしました。

そして、不要なDBのデータやAPIを一気に削減していきます。

結果

最初の画面表示は、実装前と変わらず一瞬で表示され、
練習問題の切り替えは爆速です。APIの呼び出しはもうほとんど発生しません。

画面描画の速度（3回測定）
実装前：平均 0.272 秒
実装後：平均 0.317.3 秒

最初の画面描画の速度もわずか0.1秒しか増えていないのでよかったです。

ぜひCtrl + 上下 で練習問題を縦横無尽に切り替えて速度の速さを体感してみてください。
もうAPIによる課金も怖くありません。

SQL Playground
https://sql-playground.net

さいごに

読んでいただきありがとうございました。

まだまだ改善途中のため、触ってみた感想や、触ってみたよという報告だけでも嬉しいので、ぜひよろしくお願いします🙇