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

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

gree_tech
PRO
November 11, 2021

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

GREE Tech Conference 2021 で発表された資料です。
https://techcon.gree.jp/2021/session/Session-11

gree_tech
PRO

November 11, 2021
Tweet

More Decks by gree_tech

Other Decks in Technology

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  31. 31
    Android編
    起動時間短縮

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  55. 55
    不要な処理の削除(遅延)
    起動時にやる必要がない処理や、そもそも不要な処理は削除した
    り起動時以外のタイミングに移動

    ・不要なdelayが入っていたのを削除
    ・ローディング表示の修正
    泥臭い地道な計測や処理の改善が必要。。。

    View Slide

  56. 56
    Server編
    起動時間短縮

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    BigQuery

    Data Portal
    にデータをエクスポートして使用

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  84. 84

    View Slide