ロード時間を 30% 短縮した管理画面のデータ取得の並列化 - 隔週報 2021-W46/47

f:id:aidemy-blog:20211203003544p:plain

ウェブサービスは速いほうがいい

2021年 第46 - 47週,11月15日 (月) - 11月26日 (金) にリリースした機能を紹介します.

  1. ロード時間を 30% 短縮した管理画面のデータ取得の並列化
  2. お役立ち情報満載のサポートサイトの開設と、利用導線の設置
  3. Aidemy Select の購入確認メールがもっと便利に
  4. 開発フローのモダン化による業務オーバーヘッド 6割削減
  5. 管理画面のクエリ絞込みロジックを集約し開発効率を改善

ロード時間を 30% 短縮した管理画面のデータ取得の並列化

直列化されていた処理を並列化し,管理画面の表示速度を高速化しました.

f:id:aidemy-blog:20211130130413j:plain

スピードアップのイメージ

管理者画面へのアクセスを高速化により,ベンチマークとして対照したあるチームの表示速度は 30% 改善しました.試験情報、カリキュラム情報、メンバー進捗情報について直列取得していた処理を並列処理に置き換え、ロード時間を短縮しました。Aidemy ではさらに表示の応答性を改善するべく,クエリ自体の速度改善の検討も進行しています。

お役立ち情報満載のサポートサイトの開設と、利用導線の設置

下記の2か所に Aidemy にまつまる情報をまとめたサポートサイトへのリンクを設置しました.

  1. 受講画面内の「よくある質問」
  2. 管理画面の左下

f:id:aidemy-blog:20211130115126p:plain

管理画面からサポートサイトへのリンク

サポートサイトは Aidemy のサービスに関する情報を掲載しています.Aidemy Free / Select / Premimum / Business のどのサービスのユーザの方にも活用いただける情報を掲載しておりますので,サービスの使い方などで困った際にご覧ください!

Aidemy Select の購入確認メールがもっと便利に

f:id:aidemy-blog:20211130172243j:plain

確認メールをもっとお役立ていただけるように

Aidemy Select をご購入の際に送信している購入完了メール内に,ユーザが受講開始日を把握できるように受講期間を明記するように変更しました.

開発フローのモダン化による業務オーバーヘッド 6割削減

esbuild の導入などを通じ,lint と build の所要時間を6割削減しました.

f:id:aidemy-blog:20211130115714p:plain

速度比較  (公式サイトより)

エンジニアの生産性を向上するため,複数の開発工程の改善を行い,その結果 lint と build の所要時間を 98 s から 38 s に短縮することに成功しました.簡易的な試算で,この改善は1か月あたり30時間のエンジニア工数の創出に相当し,より高速にユーザに価値を提供できる体制が整いました.(試算:build 10回 / 日 × 60秒 × 6人 ×30日)

Aidemy の開発ではこれまで gulp を使用していましたが,これを廃止しました.またトランスパイラーを tsc から esbuild に置き換えました.さらに eslint_d の採用、prettier 実行をAPI経由化、重畳削除など,lint 工程の見直しも行いました.

管理画面のクエリ絞込みロジックを集約し開発効率を改善

開発効率の改善を通じ,バグの少ないサービスの高速な開発に繋げていきます.

Aidemy Business の管理者に提供している画面のうち「メンバー進捗確認画面」と「テスト管理画面」には DB からのデータ取得処理が存在しています.それぞれの画面で独立に実装されていた2つの処理を一本化し,開発効率を改善しました.