アプリ起動時間高速化 ~推測するな、計測せよ~

by gree_tech

Slide 1

Slide 1 text

REALITY株式会社エンジニア伊藤弘一郎 REALITY株式会社エンジニア高塚翔悟アプリ起動時間高速化 ~推測するな、計測せよ~

Slide 2

Slide 2 text

REALITY 2 アバター作成ライブ配信ギフト・コラボマルチプレイゲームライブ視聴

Slide 3

Slide 3 text

REALITY 3 2020 2018 2019 8月視聴アプリ「REALITY」リリース 1 0月配信アプリ「REALITY Avatar」リリース 3月視聴/配信アプリ統合現在の「REALITY」リリース 4月〜配信コラボ/ガチャチャットなど機能拡張が進む 1 2月新Live配信基盤低遅延モード配信実装 6月 YouTube視聴やLiveゲームなど Live機能類が拡充 11月初の海外リリース海外展開が加速。 2021 8月ワールド機能のリリースメタバース事業に参入

Slide 4

Slide 4 text

REALITY 4 Q1 Q2 Q3 Q4 Q1 Q2 Q4 2020 2021 アクティブ配信者数国内 15% 海外 85% ユーザ分布

Slide 5

Slide 5 text

REALITY 5 Q1 Q2 Q3 Q4 Q1 Q2 Q4 2020 2021 アクティブ配信者数国内 15% 海外 85% ユーザ分布絶好調！？

Slide 6

Slide 6 text

6 と言いたいところなんですが、規模拡大などに起因しさまざまな問題が起きています

Slide 7

Slide 7 text

7 品質改善プロジェクト(SRE)紹介 REALITY

Slide 8

Slide 8 text

1. 障害原因の調査、改善、それを継続して行う仕組みづくり 1. スケーラブルなシステムの構築サービスの成長に合わせた利用ツールや環境構築方法の選定 WebAPIの設計見直しによるリクエスト数の削減 1. 高速化サーバのスループット改善レスポンス速度向上 1. 自動化定常運用業務の自動化（Web, Nativeアプリ, Libraryのリリース作業など）による作業コスト削減同様にヒューマンエラーの抑止 1. その他テスト文化の普及推進、定期的な進捗確認 REALITY SRE 8

Slide 9

Slide 9 text

半期に数件実施エンジニアが企画・進行を担当し、仕様書作成や効果測定までを行う品質改善プロジェクト 9 FY21上期終わりなき挑戦プロジェクト - 配信中フリーズ改善 - アセットバンドルロード時間改善 - 音声の安定化 - 端末発熱改善 FY21下期品質改善プロジェクト - エコーキャンセル - エラーハンドリング改善 - 起動時間短縮 - 見かけ上のUX改善 FY22上期品質改善プロジェクト（WIP） - 通信速度向上のためのProtobuf対応 - 不正ユーザ対策 - メタバースに向けたアバター描画軽量化 - US通信速度改善改善Week（半期ごと3回） - DevOps改善 - コードリファクタ

Slide 10

Slide 10 text

品質改善プロジェクト 10 FY21上期終わりなき挑戦プロジェクト - 配信中フリーズ改善 - アセットバンドルロード時間改善 - 音声の安定化 - 端末発熱改善 FY21下期品質改善プロジェクト - エコーキャンセル - エラーハンドリング改善 - 起動時間短縮 - 見かけ上のUX改善 FY22上期品質改善プロジェクト（WIP） - 通信速度向上のためのProtobuf対応 - 不正ユーザ対策 - メタバースに向けたアバター描画軽量化 - US通信速度改善改善Week（半期ごと3回） - DevOps改善 - コードリファクタ半期に数件実施エンジニアが企画・進行を担当し、仕様書作成や効果測定までを行う

Slide 11

Slide 11 text

半期に数件実施エンジニアがPMを担当し、エンジニアが仕様書作成や効果測定までを行う品質改善プロジェクト 11 FY21上期終わりなき挑戦プロジェクト - 配信中フリーズ改善 - アセットバンドルロード時間改善 - 音声の安定化 - 端末発熱改善 FY21下期品質改善プロジェクト - エコーキャンセル - エラーハンドリング改善 - 起動時間短縮 - 見かけ上のUX改善 FY22上期品質改善プロジェクト（WIP） - 通信速度向上のためのProtobuf対応 - 不正ユーザ対策 - メタバースに向けたアバター描画軽量化 - US通信速度改善改善Week（半期ごと3回） - DevOps改善 - コードリファクタ

Slide 12

Slide 12 text

品質改善プロジェクト 12 FY21上期終わりなき挑戦プロジェクト - 配信中フリーズ改善 - アセットバンドルロード時間改善 - 音声の安定化 - 端末発熱改善 FY21下期品質改善プロジェクト - エコーキャンセル - エラーハンドリング改善 - 見かけ上のUX改善 FY22上期品質改善プロジェクト（WIP） - 通信速度向上のためのProtobuf対応 - 不正ユーザ対策 - メタバースに向けたアバター描画軽量化 - US通信速度改善改善Week（半期ごと3回） - DevOps改善 - コードリファクタ半期に数件実施エンジニアがPMを担当し、エンジニアが仕様書作成や効果測定までを行う - 起動時間短縮

Slide 13

Slide 13 text

13 起動時間短縮プロジェクト REALITY

Slide 14

Slide 14 text

「ランチャーアイコンタップからコンテンツ表示までの時間」と定義アプリの起動時間はUX/ユーザの離脱率に影響起動時間とは 14 何秒かかった？

Slide 15

Slide 15 text

プロジェクトの進行 15 1. 計測アプリ起動処理の全体像の把握問題箇所に目星を付け、対応項目別に優先度整理する 2. 実装 3. リリース後の計測・運用それぞれの項目別に調査・改善する本番環境で実際に改善されているか確認する継続的に監視できる基盤を整える

Slide 16

Slide 16 text

プロジェクトの進行 16 1. 計測アプリ起動処理の全体像の把握問題箇所に目星を付け、対応項目別に優先度整理する 2. 実装 3. リリース後の計測・運用それぞれの項目別に調査・改善する本番環境で実際に改善されているか確認する継続的に監視できる基盤を整える

Slide 17

Slide 17 text

REALITYはNativeアプリにUnityをライブラリとして含む構成 -> 「Unityライブラリ初期化がボトルネックかな？」プロジェクト開始前の見立て 17 推測 Native Unity iOS アプリ起動時に初期化 -> 起動処理のボトルネックと推測 Android Unity画面起動時に初期化 -> なんらか起動処理の遅延に影響と推測 ※Unityライブラリ初期化について

Slide 18

Slide 18 text

1. アプリ起動シーケンスの調査 • ボトルネックに目星を付ける • 改善可能な箇所の精査 1. 本番環境での起動処理周りの実態調査 • [Client] Firebase : Performance Monitoring • [Server] GCP : Stackdriver Trace 計測 18

Slide 19

Slide 19 text

XCode：Instruments (Time Profiler, Signposts) iOSの起動シーケンスを確認 19 認証API ログインAPI Unity初期化配信一覧取得アプリ起動処理の全体像の把握：iOS 認証API ログインAPI Unity初期化配信一覧取得

Slide 20

Slide 20 text

20 アプリ起動処理 library(dlib)初期化等重い。。。認証API ログインAPI Unity初期化配信一覧取得 XCode：Instruments (Time Profiler, Signposts) iOSの起動シーケンスを確認アプリ起動処理の全体像の把握：iOS 認証API ログインAPI Unity初期化配信一覧取得重い？妥当？要調査遅い

Slide 21

Slide 21 text

Android Studio：CPU Profiler Androidの起動シーケンスを確認 21 アプリ起動処理の全体像の把握：Android

Slide 22

Slide 22 text

22 😅 < あれ、ボトルネックじゃなくない？ Android Studio：CPU Profiler Androidの起動シーケンスを確認アプリ起動処理の全体像の把握：Android

Slide 23

Slide 23 text

「Unityライブラリ初期化がボトルネックかな？」調査・計測から 23

Slide 24

Slide 24 text

「Unityライブラリ初期化がボトルネックかな？」「アプリ起動処理・配信一覧画面初期化処理の高速化がコスパ良」調査・計測から 24

Slide 25

Slide 25 text

Firebase：Performance Monitoring • Clientのパフォーマンス計測に利用 • Client処理の区間トレースが可能。DashBoard化してくれる。 25 アプリ起動処理の全体像の把握：ユーザ環境での計測

Slide 26

Slide 26 text

Firebase：Performance Monitoring • 開発者の手元環境ではなく、実際のユーザ環境での起動時間を認識する • ネットワークリクエストの応答時間を国/デバイス別に確認できる 26 アプリ起動処理の全体像の把握：ユーザ環境での計測ログインAPIの例：ユーザ環境において日本とブラジルで300 msec以上差を確認

Slide 27

Slide 27 text

Firebase：Performance Monitoring • 開発者の手元環境ではなく、実際のユーザ環境での起動時間を認識する • ネットワークリクエストの応答時間を国/デバイス別に確認できる 27 アプリ起動処理の全体像の把握：ユーザ環境での計測全世界日本 iOS 6.2 秒 5.2 秒 Android 6.5 秒 4.2 秒ユーザ環境における起動時間の中央値(2021/03) 😅 < めっちゃ遅い

Slide 28

Slide 28 text

GCP：Cloud Trace • GCPの分散トレーシングシステム • ボトルネックの検出 • レイテンシ分布の可視化 28 改善前配信一覧取得APIのトレース • 処理のタイムシーケンスを可視化 • ボトルネックの可視化並列化できない？不必要な処理が多いアプリ起動処理の全体像の把握：サーバ処理

Slide 29

Slide 29 text

1. [client] アプリの起動処理改善 Android最適化 : App Startup導入、キャッシュ改善など iOS最適化：謎のblankを削除、library初期化処理改善など 1. [server] 配信一覧取得API高速化並列処理、ボトルネック改善にて対応 1. [client] UnityLibrary初期化改善 (optional) 調査を行い、現実的な規模の改修で時間を短縮できれば改善を入れる空シーン起動など対応優先度を決定 29

Slide 30

Slide 30 text

プロジェクトの進行 30 1. 計測アプリ起動処理の全体像の把握問題箇所に目星を付け、対応項目別に優先度整理する 2. 実装 3. リリース後の計測・運用それぞれの項目別に調査・改善する本番環境で実際に改善されているか確認する継続的に監視できる基盤を整える

Slide 31

Slide 31 text

31 Android編起動時間短縮

Slide 32

Slide 32 text

32 Androidの起動処理改善のフロー 1.ボトルネックのあたりをつける 2.コードレベルで問題箇所を特定する 3.修正を入れる

Slide 33

Slide 33 text

33 Androidの起動処理改善のフロー 1.ボトルネックのあたりをつける 2.コードレベルで問題箇所を特定する 3.修正を入れる

Slide 34

Slide 34 text

34 起動処理のボトルネック検出手法 Jetpack Macro Benchmark • テストを実行する形で起動時間を計測可能 • cold/warm/hot start の計測 • テスト結果をトレースファイルとして閲覧 • Android 10(API 29)以上で利用可能 logcat • スタックトレースやシステムメッセージのログをダンプするコマンドラインツール • 起動処理のスタックトレースを細かく取れる

Slide 35

Slide 35 text

35 Androidの起動処理計測の例 Application onCreate Activity init Activity onCreate その他 inflate views etc アカウント認証ログイン処理 etc

Slide 36

Slide 36 text

36 Androidの起動処理計測の例 Application onCreate Activity init Activity onCreate その他 inflate views etc アカウント認証ログイン処理 etc 画面の生成コンテンツ表示

Slide 37

Slide 37 text

37 Androidの起動処理計測の例 Application onCreate Activity init Activity onCreate その他 inflate views etc アカウント認証ログイン処理 etc Displayed time Fully Drawn time

Slide 38

Slide 38 text

ActivityTaskManagerでlogcatに起動時間を出力 38 logcatによる計測の例

Slide 39

Slide 39 text

ActivityTaskManagerでlogcatに起動時間を出力 39 logcatによる計測の例 I/ActivityTaskManager: Displayed ***************** + 4s80ms Displayed timeに4.08 sかかっている

Slide 40

Slide 40 text

ActivityTaskManagerでlogcatに起動時間を出力 40 logcatによる計測の例 I/ActivityTaskManager: Fully drawn ************* + 5s529ms Fully Drawn timeは5.529 s

Slide 41

Slide 41 text

ActivityTaskManagerでlogcatに起動時間を出力 41 logcatによる計測の例つまりその他は 1.449s みたいに計測できる今回は前半部分を細かく計測していく

Slide 42

Slide 42 text

42 認証API ログインAPI Unity初期化配信一覧取得 XCode：Instruments (Time Profiler, Signposts) iOSの起動シーケンスを確認アプリ起動処理の全体像の把握：iOS 認証API ログインAPI Unity初期化配信一覧取得今回細かく見たいのはここ

Slide 43

Slide 43 text

43 Androidの起動処理 Application onCreate Activity init Activity onCreate その他 inflate views etc アカウント認証ログイン処理 etc Displayed time Fully Drawn time ここのボトルネックを探す

Slide 44

Slide 44 text

44 Androidの起動処理 Application onCreate Activity init Activity onCreate その他 inflate views etc アカウント認証ログイン処理 etc Displayed time Fully Drawn time より細かく調べていく

Slide 45

Slide 45 text

45 Androidの起動処理 Application onCreate Activity init Activity onCreate その他 inflate views etc アカウント認証ログイン処理 etc Displayed time Fully Drawn time より細かく調べていく

Slide 46

Slide 46 text

46 Androidの起動処理改善のフロー 1.アプリ起動処理の全体像を眺める 2.コードレベルで問題箇所を特定する 3.修正を入れる

Slide 47

Slide 47 text

47 CPU Profilerでの特定各スレッドを開くと時系列に沿った各メソッドの実行時間が確認できる

Slide 48

Slide 48 text

48 CPU Profilerでの特定各スレッドを開くと時系列に沿った各メソッドの実行時間が確認できる気になる処理をポチると

Slide 49

Slide 49 text

49 Frame Chartでさらに詳しく左から実行時間の長い順に並ぶ

Slide 50

Slide 50 text

50 Frame Chartでさらに詳しく左から実行時間の長い順に並ぶここに時間がかかってる

Slide 51

Slide 51 text

51 Androidの起動処理改善のフロー 1.アプリ起動処理の全体像を眺める 2.コードレベルで問題箇所を特定する 3.コードに修正を入れる

Slide 52

Slide 52 text

52 処理を短縮するには大まかに分けて3つ • キャッシュを入れる • 処理の並列化・平行化 • 不要な処理の削除（遅延）

Slide 53

Slide 53 text

53 キャッシュを入れる配信一覧のキャッシュ配信一覧のコンテンツがロードされていない間はキャッシュしたデータを表示して待機時間をなくす

Slide 54

Slide 54 text

54 並列化・並行化 AppStartupの導入 ContentProviderによるライブラリ初期化を最適化する

Slide 55

Slide 55 text

55 不要な処理の削除（遅延）起動時にやる必要がない処理や、そもそも不要な処理は削除したり起動時以外のタイミングに移動例・不要なdelayが入っていたのを削除・ローディング表示の修正泥臭い地道な計測や処理の改善が必要。。。

Slide 56

Slide 56 text

56 Server編起動時間短縮

Slide 57

Slide 57 text

配信一覧取得APIの特徴 • View初期化のためアプリ起動処理に使用 • レイテンシがUXに直結配信一覧取得APIの高速化 57 認証API ログインAPI Unity初期化配信一覧取得 1秒以上の遅延認証API ログインAPI Unity初期化配信一覧取得

Slide 58

Slide 58 text

配信一覧取得APIの特徴 • View初期化のためアプリ起動処理に使用 • レイテンシがUXに直結大まかな処理 • 最初の画面すべてのコンテンツを生成して返す • フォロータブ • おすすめタブ • … etc (計7タブ) • それぞれのタブをソートなど（パーソナライズ） • 配信リスト • 相互フォローリスト • ゲームリスト • … etc 配信一覧取得APIの高速化 58

Slide 59

Slide 59 text

GCP：Cloud Trace • GCPの分散トレーシングシステム • ボトルネックの検出 • レイテンシ分布の可視化 59 改善前配信一覧取得APIのトレース • 処理のタイムシーケンスを可視化 • ボトルネックの可視化並列化できない？不必要な処理が多い配信一覧取得APIの高速化

Slide 60

Slide 60 text

配信一覧取得APIの高速化 60 必要リソースのFetch タブのコンテンツ生成大量のFetchHogehogeが並ぶ並列化すべき箇所が並列化されていない

Slide 61

Slide 61 text

配信一覧取得APIの高速化 61 余談： REALITY APIサーバはGolang製 goroutineによる並列化を行う

Slide 62

Slide 62 text

配信一覧取得APIの高速化 62 並列化並列化

Slide 63

Slide 63 text

配信一覧取得APIの高速化さらに、配信一覧画面初期化には必要のない処理・情報を削減画面初期化に必要な情報だけ返し、残りは遅延して取得させる処理の削減

Slide 64

Slide 64 text

ログイン時APIリクエストを一つに統合複数リクエストする際のオーバーヘッドを削減ログインAPIと配信一覧取得APIを合体 64 認証API ログインAPI Unity初期化配信一覧取得統合認証API ログインAPI Unity初期化配信一覧取得

Slide 65

Slide 65 text

処理の最適化 65 遅いリクエスト Cloud Traceのレイテンシグラフでは遅いリクエストなど抽出可能該当リクエストのTraceを参照して、改善する

Slide 66

Slide 66 text

処理の最適化 66 Cloud Profiler • GCPで利用可能なプロファイラ • 関数単位でCPUTimeやHeapを確認可能

Slide 67

Slide 67 text

処理の最適化 67 Cloud Profiler 不要なデータを大量に取得しており、jsonのdesirializeに時間がかかっている。これも改善。（泥臭い案件）

Slide 68

Slide 68 text

もともと配信一覧アイコンは 1024×1024 のpngを使用 • 256×256 のwebpに変換し軽量化 • サイズを 96~99 % 程度カット Clientのクラッシュ率低下、CDN費用削減の副次効果も画像読み込み高速化 68 https://developers.google.com/speed/webp

Slide 69

Slide 69 text

69 本番リリース起動時間短縮

Slide 70

Slide 70 text

70 改善前の起動時間全世界日本 iOS 6.2 秒 5.2 秒 Android 6.5 秒 4.2 秒ユーザ環境における起動時間の中央値(2021/03)

Slide 71

Slide 71 text

結果 71 ※手元環境での実測（日本ユーザ環境 iOS:2.3 s, Android, 2.5s 程度）

Slide 72

Slide 72 text

プロジェクトの進行 72 1. 計測アプリ起動処理の全体像の把握問題箇所に目星を付け、対応項目別に優先度整理する 2. 実装 3. リリース後の計測・運用それぞれの項目別に調査・改善する本番環境で実際に改善されているか確認する継続的に監視できる基盤を整える

Slide 73

Slide 73 text

本番リリース後に大幅に起動時間を短縮したことを確認 Firebase Performance Monitoring 73

Slide 74

Slide 74 text

本番リリース後に大幅に起動時間を短縮したことを確認 Firebase Performance Monitoring 74

Slide 75

Slide 75 text

監視用のログ入れて何か効果あった？ 75

Slide 76

Slide 76 text

76 とある変更により、起動時間が悪化したことを検知 😅 < なんかめっちゃ悪化しとる監視用のログ入れて何か効果あった？

Slide 77

Slide 77 text

監視用のログ入れて何か効果あった？ 77 とある変更により、起動時間が悪化したことを検知 😅 < なんかめっちゃ悪化しとる即検知、即修正効果は大いにあった

Slide 78

Slide 78 text

監視用のログ入れて何か効果あった？ 78 とある変更により、起動時間が悪化したことを検知 😅 < なんかめっちゃ悪化しとる遅くしない運用を作る

Slide 79

Slide 79 text

ログを活用できていないのは、ログを取っていないのと同じ • Slackに流す、アラートを設定する遅くしないための運用 79

Slide 80

Slide 80 text

ログを活用できていないのは、ログを取っていないのと同じ • 誰が見ても理解できるようにダッシュボード化する • 定例mtgやリリースmtgなどで都度確認する遅くしないための運用 80 Data Portal（BIツール） Performance Monitoring ↓ BigQuery ↓ Data Portal にデータをエクスポートして使用

Slide 81

Slide 81 text

まとめ起動時間短縮は泥臭い作業の積み上げにより実現 • 並列化、キャッシュ、処理の削減（遅延）など本プロジェクトでは、計測により • 想定とは異なるボトルネックの存在確認 • 継続的に監視できる基盤を作成計測・監視はパフォーマンス改善や不具合の早期検知をするためには必要「問題が生じてからログを入れる」のではなく、常日頃から「監視できる仕組みを作る」ことが望ましい 81 本事例では、「品質改善プロジェクト」としてエンジニア主体で進行できたのが良かったかな感

Slide 82

Slide 82 text

余談本プロジェクトをnote等で技術発信して、ユーザから感触の良い評価を得られた今回の事例の他にも • 端末の発熱 • 配信中の入出力音声の音量測定などREALITYユニークな計測事例もあり、 REALITYのnoteで掲載中 82 https://note.com/reality_eng

Slide 83

Slide 83 text

絶賛エンジニア募集中！ 83 meety wantedly REALITYの未来を作ってくれる人を募集中！是非、ご応募ください！