カスタムスパン計測機能によるフロントエンドのパフォーマンス監視
株式会社ナレッジワーク / mgmgshake
メンバー / フロントエンドエンジニア / 従業員規模: 101名〜300名 / エンジニア組織: 51名〜100名
利用プラン | 利用機能 | ツールの利用規模 | ツールの利用開始時期 | 事業形態 |
---|---|---|---|---|
team | パフォーマンス計測(もともとエラー監視を導入済み) | 11名〜50名 | 2025年3月 | B to B |
利用プラン | team |
---|---|
利用機能 | パフォーマンス計測(もともとエラー監視を導入済み) |
ツールの利用規模 | 11名〜50名 |
ツールの利用開始時期 | 2025年3月 |
事業形態 | B to B |
導入の背景・解決したかった問題
導入背景
ツール導入前の課題
プロダクト内でコアとなる機能の処理に想定以上の時間がかかっており、ユーザー体験を損ねるリスクが高まっていた。しかし、コア機能には複数の処理ステップが存在し、どの工程で時間がかかっているのかが明確に把握できておらず、性能改善に取り組むにも手がかりが乏しいという課題を抱えていた。
どのような状態を目指していたか
最終的には、ユーザーが操作した際に処理がスムーズに完了し、ストレスを感じさせないレスポンス速度を実現したいと考えていた。
そのために、各ステップの実行時間を詳細に計測し、ボトルネックとなる箇所を可視化した上で優先順位をつけて最適化していくアプローチができる体制を目指した。
選定理由
もともとエラー監視のために導入していたSentryにパフォーマンスのモニタリング機能があることを知り、詳細を確認したところ、スパン(Sentry内の用語で、アプリケーション内で発生するリクエストや操作のタイミングとフローをキャプチャする最小単位)を独自に定義してモニタリングができることがわかった。
導入コストがかからずコードの追加だけでセッティングが完了することからSentryで計測を行うことにした。
導入の成果
どのような成果が得られたか
以下のようなメリットを得ることができた。
- 処理遅延が発生した場合に、どの工程が原因なのかを詳細に分析できる
- ファイルサイズごとの処理パフォーマンスを把握し、最適化を進められる
Sentryのカスタムスパンを通じて、単にパフォーマンスの悪化を検知するだけでなく、その要因に迫る分析基盤を整えることができた。
具体的な計測項目
ファイルの変換処理のパフォーマンスを測定するためにカスタムスパンを活用し、処理フローの各ステップにおいて以下の項目を計測した。
- ファイルのダウンロードに要した時間
- ファイルデータの変換に要した時間
- ファイル容量と処理速度の相関(容量が大きくなると処理がどれほど遅延するか)
これらの計測を通じて、どの処理がボトルネックになっているかを明確に把握できるようになった。
導入に向けた社内への説明
上長・チームへの説明
Sentry自体は先述のとおり導入済みツールであるため、導入コストは特に考慮していなかった。
計測すべき項目を設計書に追記し、チーム内で合意を取った上で計測を開始した。
活用方法
計測中の処理に用いられたファイルの容量も登録することができるため、実際のお客様環境で使われるファイル容量の最大値や平均を取得し、ユーザビリティ改善のための機能追加の際の参考値にしている。
よく使う機能
- エラー監視
- フロントエンドのパフォーマンス計測
ツールの良い点
- アプリケーションへの導入が手軽にできる
- ドキュメントや日本語での記事も充実している
ツールの課題点
- ダッシュボードのUIがしばしば変更されている印象があり、認知コストがかかる
株式会社ナレッジワーク / mgmgshake
メンバー / フロントエンドエンジニア / 従業員規模: 101名〜300名 / エンジニア組織: 51名〜100名
よく見られているレビュー
株式会社ナレッジワーク / mgmgshake
メンバー / フロントエンドエンジニア / 従業員規模: 101名〜300名 / エンジニア組織: 51名〜100名