候補者管理ページのパフォーマンス改善 : 第2弾
こんにちは、HRクラウドの採用一括かんりくんdevopsチームです。
こちらの記事で第一弾を紹介していましたが、リリース予定で品質チェック中だった改善第二弾が、無事テストを通り、5月末にリリースされました。これにより、本番環境での平均レスポンスタイムは1.9 → 1.3秒となり、約1.5倍の高速化を実現しました。レスポンスタイムのグラフが以下になりますが、5月末を境に大きく低減し平坦化しているのが分かります。
候補者管理ページは表示形式を「詳細」か「簡易」かで選べるのですが、第一弾は主に「簡易」が対象だったのに対し、第二弾では主に「詳細」を対象にした改善です。
そのため、大きなボトルネックは第一弾と同様にドキュメントサイズが巨大なことにあり、一方でこの解消はフロントエンド技術面でチャレンジングな内容となるため、第一弾・第二弾と分けて先に第一弾がリリースされていたのですが、パフォーマンス改善の知見や実績が溜まり、新メンバーによって具体的な改善方法が考案され、リリースに至ることができました。以下は第二弾の設計ドキュメントの一部です：
同時に、コストの大きいDBクエリ発行を大幅に削減でき、表示リストに応じて最低限のデータセットと発行数で済むように最適化したAPIを作り、それをフェッチしてロードする形に移行したことで、サーバータイム削減と平坦化に大きく寄与しました。このAPIを利用する形で、今までと同じUIをなるべくコストをかけずにレンダリングするのが、チャレンジングな試みでした。最も最適化を施したUI部分は以下の採用のステップ図になります：
他にも、ロード時にレイアウトシフトが起こる場合があったのを解消し、Cumulative Layout Shift (CLS)も大きく改善しました。
最後に、サーバーレスポンスタイムのセグメントブレイクダウン図を以下に示します。5月末移行、ピンクとオレンジの領域はほぼ消失し、緑の主要アプリケーション処理領域は若干縮小したのが見て取れます。消失した領域は、いずれも高コストだったDBクエリ発行処理です。
ご覧いただきありがとうございました。今後も私たちは、サービスの品質向上とユーザーエクスペリエンスのさらなる向上に向けて、パフォーマンス改善活動を続けていきます。