stand.fmの最近の取り組み: アプリ起動速度の改善/improvement-of-speed-startup-app

Transcript

1. stand.fmの最近の取り組み アプリ起動速度の改善 株式会社stand.fm　エンジニア　外松 俊尚 2021/10/02 React Native Matsuri 2021
2. 外松 俊尚
 stand.fm エンジニア
 React Nativeはstand.fmで初めて触りました
 愛媛からフルリモート
 @toshi__toma

3. stand.fmは誰でもかんたんに
 アプリで収録・LIVE配信ができる音声 プラットフォーム
 
 React Nativeで開発してます

4. 最近のstand.fmの取り組み

5. 最近のstand.fmの取り組み • ライブの安定化 • コラボライブ • アプリ起動速度の改善 • 音声の再生速度の改善 • 新機能開発 • 技術移行 • etc
6. 最近のstand.fmの取り組み • ライブの安定化 • コラボライブ • アプリ起動速度の改善 • 音声の再生速度の改善 • 新機能開発 • 技術移行 • etc
7. アプリ起動速度 • stand.fmは開発から2年以上が経過 ◦ 起動速度が問題になってきた • 色んな事情で起動時に行われる処理の増加 ◦ 新機能の追加、認証、初期化処理など • 最近、改善に取り組んでいます
8. 起動速度の計測

9. アプリ起動速度 • まず大事なのは計測 ◦ いま振り返っても、計測が一番大事 • 計測ツール ◦ Sentry Performance Monitoring ◦ Firebase Performance Monitoring • 既に導入されていたSentryで計測を開始
10. React NativeアプリをSentryでPerformance Monitoring @sentry/react-native https://docs.sentry.io/platforms/react-native/performance/
11. 計測の導入 • 最初は単純にrootのindex.jsの最初で計測を開始 結果を見るとなんか速い。こんなに速いはずがない • 計測を開始してるのは、JSが実行される段階 ◦ 「アイコンをタップ」した直後くらいから計測を開始したい
12. react-native-startup-time • react-native-startup-timeを利用 ◦ https://www.npmjs.com/package/react-native-startup-time ◦ getTimeSinceStartup() • ネイティブモジュールの初期化タイミングからの経過時間を JavaScript側で取得 ◦ 計測開始のタイムスタンプを作成 ◦ 正確ではないけど、十分と判断 • ストップウォッチで測ったりして、体感とかなり近い結果が出た
13. 起動速度計測の定義 • 計測開始 ◦ ユーザー：アイコンがタップされた直後 ◦ システム：ネイティブモジュールの初期化タイミング • 計測終了 ◦ ユーザー：Splashスクリーンから抜けた ◦ システム：Splashスクリーンの終了 (react-native-splash-screen：Splashスクリーンの終了タイミングを調整 )
14. 無事に起動速度を計測できた データの例 • バージョンごと、iOS/Android単位での推移も確認できる
15. 各計測にはボトルネックになりえる処理をマークしておいた データの例
16. ボトルネックの洗い出し • 計測結果からReact Native側とstand.fm側の処理に分類して ボトルネックを洗い出した • stand.fm ◦ 起動時に必須ではないネットワークリクエストや初期化処理 ◦ トップページのデータ読み込み • React Native ◦ JavaScriptの実行開始まで
17. ネットワークリクエストの改善 起動時に必須ではない処理の改善
18. ネットワークリクエストの改善 • 直列になっていた処理を並列化 • デフォルトタブ以外の情報のレスポンスを待っていたのを改善 • APIのモニタリング結果を見て遅いリクエストの精査
19. 起動時に必須ではない処理の改善 • 計測結果や起動までのコードをチェック ◦ 計測結果を見て初めて分かることが多い • 起動時に必須ではないけど、時間がかかってる箇所があったの で改善
20. アラートの設定 • 起動時の処理は気をつけないといつの間にか処理が増えていく ◦ 新機能、ログ、お知らせ、認証などなど • 意図せず遅くなっている状態に気付きたい Sentryでアラートを設定した ◦ 閾値より遅くなるとSlackに通知
21. トップページのデータ読み込み

22. トップページのデータ読み込み • トップページを表示するために必要な情報を全て取得していた
23. トップページの改善 • 起動時はファーストビューに見える範囲の情報を取得 ◦ 残りは起動に必須とせずに別で取得させるようにした • react-native-shimmer-placeholder ◦ ファーストビュー以降は取得までは シマーを表示させるように • トップページの情報をサーバーサイドで キャッシュさせてレイテンシの改善など
24. Hermes

25. Hermes • もともとAndroidではHermesに移行していた • React Native v0.64にアップデートしたタイミングでiOSも有効化 ◦ JSの実行までの時間が短縮された！！ • しかし、Hermesが原因でクラッシュするIssueがあり、いまは一時 的にOFFにしてる ◦ React Native v0.66で改善しそう？？
26. Hermes化の効果 • 圧倒的に起動速度が改善した • Hermesの有効化前後のバージョンで50%tileで650ms速くなった • 再度有効化できればもっと早くなりそう
27. 改善結果

28. 改善結果 • 対応したこと ◦ ネットワークリクエストの改善 ◦ 起動時に必須ではない処理の改善 ◦ トップページのデータ取得の改善 ◦ (Hermes化) • 起動速度が速くなった ◦ 50%tile: ⬇1.33s ◦ 95%tile: ⬇3.15s
29. We are hiring! エンジニア積極的に募集中です https://corp.stand.fm/recruit 詳細はこちら • CTO候補 • VPoE候補 • クライアントエンジニア • バックエンドエンジニア • 機械学習エンジニア • 配信基盤エンジニア • QAエンジニア • エンジニアリングマネージャー • UI/UXデザイナー 積極募集しているプロダクト開発メンバー
30. 現在抱えている技術課題・今後の技術的チャレンジ 
 ▶アプリ起動速度を高速にしたい 
 
 ▶音声編集機能リッチ化 
 　写真アプリがスマホだけでお洒落な加工を可能にしたように、機材や知識がなくてもアプリだけで、
 　高クオリティの音声配信をシンプルなUI/UXで実現したい
 　(例) 複数BGM、BGMの fade in&out、ジングル挿入、効果音挿入、音声スニペットのコピペ、など
 
 ▶アプリの複雑化への対応 
 　開発者が増え、機能が増えてもメンテナンスしやすい構造にしたい
 
 ▶異常状態を検知できるようにしたい 
 　コラボ収録時に片方だけ音が入っていない・音割れしているなど、単純なエラーではない異常状態を検知したい
 
 ▶高クオリティなサービスをユーザーに届けるためのテストの自動化 
 　リグレッションテストの自動化、ネットワーク状態・電話の割り込み・ディスク容量など特殊な状態のテスト
 クライアント

31. stand.fm エンジニア • iOS、Androidのネイティブが得意な人 ◦ JSだけでは実現が難しい要件も多い！ ◦ チームとして異なる強みの人がいる • webのReactは経験してるけど、ネイティブアプリ開発は初 ◦ RNでは、Reactの知識が普通に生かせる ◦ stand.fmは全部がJS • コードの歴史も長くなってきた ◦ 技術移行などにも注力