カスタムスパン計測機能によるフロントエンドのパフォーマンス監視

ツール導入前の課題

プロダクト内でコアとなる機能の処理に想定以上の時間がかかっており、ユーザー体験を損ねるリスクが高まっていた。しかし、コア機能には複数の処理ステップが存在し、どの工程で時間がかかっているのかが明確に把握できておらず、性能改善に取り組むにも手がかりが乏しいという課題を抱えていた。

どのような状態を目指していたか

最終的には、ユーザーが操作した際に処理がスムーズに完了し、ストレスを感じさせないレスポンス速度を実現したいと考えていた。

そのために、各ステップの実行時間を詳細に計測し、ボトルネックとなる箇所を可視化した上で優先順位をつけて最適化していくアプローチができる体制を目指した。

もともとエラー監視のために導入していたSentryにパフォーマンスのモニタリング機能があることを知り、詳細を確認したところ、スパン（Sentry内の用語で、アプリケーション内で発生するリクエストや操作のタイミングとフローをキャプチャする最小単位）を独自に定義してモニタリングができることがわかった。

導入コストがかからずコードの追加だけでセッティングが完了することからSentryで計測を行うことにした。

どのような成果が得られたか

以下のようなメリットを得ることができた。

• 処理遅延が発生した場合に、どの工程が原因なのかを詳細に分析できる
• ファイルサイズごとの処理パフォーマンスを把握し、最適化を進められる

Sentryのカスタムスパンを通じて、単にパフォーマンスの悪化を検知するだけでなく、その要因に迫る分析基盤を整えることができた。

具体的な計測項目

ファイルの変換処理のパフォーマンスを測定するためにカスタムスパンを活用し、処理フローの各ステップにおいて以下の項目を計測した。

• ファイルのダウンロードに要した時間
• ファイルデータの変換に要した時間
• ファイル容量と処理速度の相関（容量が大きくなると処理がどれほど遅延するか）

これらの計測を通じて、どの処理がボトルネックになっているかを明確に把握できるようになった。