Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

15bd11f2c2c5e3dd854153d03a102b0d?s=47 stand.fm
October 02, 2021

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

15bd11f2c2c5e3dd854153d03a102b0d?s=128

stand.fm

October 02, 2021
Tweet

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 • コードの歴史も長くなってきた ◦ 技術移行などにも注力
  32. None