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

Transcript

1. stand.fmの最近の取り組み
   アプリ起動速度の改善
   株式会社stand.fm　エンジニア　外松 俊尚
   2021/10/02 React Native Matsuri 2021
   

   View Slide

2. 外松 俊尚

   stand.fm エンジニア

   React Nativeはstand.fmで初めて触りました

   愛媛からフルリモート

   @toshi__toma

   

   View Slide

3. stand.fmは誰でもかんたんに

   アプリで収録・LIVE配信ができる音声
   プラットフォーム

   

   React Nativeで開発してます

   

   View Slide

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

   

   View Slide

5. 最近のstand.fmの取り組み
   ● ライブの安定化
   ● コラボライブ
   ● アプリ起動速度の改善
   ● 音声の再生速度の改善
   ● 新機能開発
   ● 技術移行
   ● etc
   

   View Slide

6. 最近のstand.fmの取り組み
   ● ライブの安定化
   ● コラボライブ
   ● アプリ起動速度の改善
   ● 音声の再生速度の改善
   ● 新機能開発
   ● 技術移行
   ● etc
   

   View Slide

7. アプリ起動速度
   ● stand.fmは開発から2年以上が経過
   ○ 起動速度が問題になってきた
   ● 色んな事情で起動時に行われる処理の増加
   ○ 新機能の追加、認証、初期化処理など
   ● 最近、改善に取り組んでいます
   

   View Slide

8. 起動速度の計測

   

   View Slide

9. アプリ起動速度
   ● まず大事なのは計測
   ○ いま振り返っても、計測が一番大事
   ● 計測ツール
   ○ Sentry Performance Monitoring
   ○ Firebase Performance Monitoring
   ● 既に導入されていたSentryで計測を開始
   

   View Slide

10. React NativeアプリをSentryでPerformance Monitoring
    @sentry/react-native
    https://docs.sentry.io/platforms/react-native/performance/
    

    View Slide

11. 計測の導入
    ● 最初は単純にrootのindex.jsの最初で計測を開始
    結果を見るとなんか速い。こんなに速いはずがない
    ● 計測を開始してるのは、JSが実行される段階
    ○ 「アイコンをタップ」した直後くらいから計測を開始したい
    

    View Slide

12. react-native-startup-time
    ● react-native-startup-timeを利用
    ○ https://www.npmjs.com/package/react-native-startup-time
    ○ getTimeSinceStartup()
    ● ネイティブモジュールの初期化タイミングからの経過時間を
    JavaScript側で取得
    ○ 計測開始のタイムスタンプを作成
    ○ 正確ではないけど、十分と判断
    ● ストップウォッチで測ったりして、体感とかなり近い結果が出た
    

    View Slide

13. 起動速度計測の定義
    ● 計測開始
    ○ ユーザー：アイコンがタップされた直後
    ○ システム：ネイティブモジュールの初期化タイミング
    ● 計測終了
    ○ ユーザー：Splashスクリーンから抜けた
    ○ システム：Splashスクリーンの終了
    (react-native-splash-screen：Splashスクリーンの終了タイミングを調整
    )
    

    View Slide

14. 無事に起動速度を計測できた
    データの例
    ● バージョンごと、iOS/Android単位での推移も確認できる
    

    View Slide

15. 各計測にはボトルネックになりえる処理をマークしておいた
    データの例
    

    View Slide

16. ボトルネックの洗い出し
    ● 計測結果からReact Native側とstand.fm側の処理に分類して
    ボトルネックを洗い出した
    ● stand.fm
    ○ 起動時に必須ではないネットワークリクエストや初期化処理
    ○ トップページのデータ読み込み
    ● React Native
    ○ JavaScriptの実行開始まで
    

    View Slide

17. ネットワークリクエストの改善
    起動時に必須ではない処理の改善
    

    View Slide

18. ネットワークリクエストの改善
    ● 直列になっていた処理を並列化
    ● デフォルトタブ以外の情報のレスポンスを待っていたのを改善
    ● APIのモニタリング結果を見て遅いリクエストの精査
    

    View Slide

19. 起動時に必須ではない処理の改善
    ● 計測結果や起動までのコードをチェック
    ○ 計測結果を見て初めて分かることが多い
    ● 起動時に必須ではないけど、時間がかかってる箇所があったの
    で改善
    

    View Slide

20. アラートの設定
    ● 起動時の処理は気をつけないといつの間にか処理が増えていく
    ○ 新機能、ログ、お知らせ、認証などなど
    ● 意図せず遅くなっている状態に気付きたい
    Sentryでアラートを設定した
    ○ 閾値より遅くなるとSlackに通知
    

    View Slide

21. トップページのデータ読み込み

    

    View Slide

22. トップページのデータ読み込み
    ● トップページを表示するために必要な情報を全て取得していた
    

    View Slide

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

    View Slide

24. Hermes

    

    View Slide

25. Hermes
    ● もともとAndroidではHermesに移行していた
    ● React Native v0.64にアップデートしたタイミングでiOSも有効化
    ○ JSの実行までの時間が短縮された！！
    ● しかし、Hermesが原因でクラッシュするIssueがあり、いまは一時
    的にOFFにしてる
    ○ React Native v0.66で改善しそう？？
    

    View Slide

26. Hermes化の効果
    ● 圧倒的に起動速度が改善した
    ● Hermesの有効化前後のバージョンで50%tileで650ms速くなった
    ● 再度有効化できればもっと早くなりそう
    

    View Slide

27. 改善結果

    

    View Slide

28. 改善結果
    ● 対応したこと
    ○ ネットワークリクエストの改善
    ○ 起動時に必須ではない処理の改善
    ○ トップページのデータ取得の改善
    ○ (Hermes化)
    ● 起動速度が速くなった
    ○ 50%tile: ⬇1.33s
    ○ 95%tile: ⬇3.15s
    

    View Slide

29. We are hiring!
    エンジニア積極的に募集中です
    https://corp.stand.fm/recruit
    詳細はこちら ● CTO候補
    ● VPoE候補
    ● クライアントエンジニア
    ● バックエンドエンジニア
    ● 機械学習エンジニア
    ● 配信基盤エンジニア
    ● QAエンジニア
    ● エンジニアリングマネージャー
    ● UI/UXデザイナー
    積極募集しているプロダクト開発メンバー
    

    View Slide

30. 現在抱えている技術課題・今後の技術的チャレンジ
    

    ▶アプリ起動速度を高速にしたい 

    

    ▶音声編集機能リッチ化 

    　写真アプリがスマホだけでお洒落な加工を可能にしたように、機材や知識がなくてもアプリだけで、

    　高クオリティの音声配信をシンプルなUI/UXで実現したい

    　(例) 複数BGM、BGMの fade in&out、ジングル挿入、効果音挿入、音声スニペットのコピペ、など

    

    ▶アプリの複雑化への対応 

    　開発者が増え、機能が増えてもメンテナンスしやすい構造にしたい

    

    ▶異常状態を検知できるようにしたい 

    　コラボ収録時に片方だけ音が入っていない・音割れしているなど、単純なエラーではない異常状態を検知したい

    

    ▶高クオリティなサービスをユーザーに届けるためのテストの自動化 

    　リグレッションテストの自動化、ネットワーク状態・電話の割り込み・ディスク容量など特殊な状態のテスト

    クライアント

    

    View Slide

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

    View Slide

32. View Slide