Flutter DevToolsで発見！ 本番アプリのパフォーマンス問題と改善の実践

FlutterKaigi 2025@Otemachi PLACE HALL & CONFERENCE
ASSIGN Hall 11:30~

Transcript

1. Flutter DevToolsで発見！ 本番アプリのパフォーマンス問題と改善の実践 FlutterKaigi 2025@Otemachi PLACE HALL & CONFERENCE ASSIGN Hall 11:30~ 後藤 孝輔
2. 自己紹介 • 名前：Kosuke Goto • 所属：スタディプラス株式会社（2023年新卒入社） • Flutter歴：3年 ◦ FlutterKaigi 2024 ▪ 気をつけたい！Desktop対応で陥りやすい罠とその対策 ▪ https://2024.flutterkaigi.jp/session/6cda6895-57f8-47dc-ab 29-ebcbd9c7f95a 2
3. Flutter DevTools 3
4. Flutter DevToolsを使ったことがある方🙋 4
5. Flutter DevTools 5
6. Flutter DevTools パフォーマンス分析やデバッグのためのツールを提供 - Flutter Inspector - Performance - Memory - Network - CPU Profiler - etc.. →デバッグの機能しか使ったことないなあ... 6
7. きっかけとなる出来事 本番アプリでパフォーマンス問題が発生💥 →Flutter DevToolsを使った調査 パフォーマンス分析における使い方、便利な機能など色々な発見があった 7
8. この発表について - 事例の中でFlutter DevToolsをどのように活用できたかを話します - 皆さんがFlutter DevToolsを活用して改善を行うきっかけになればと思います 8
9. 今日話すこと - パフォーマンス改善事例① - パフォーマンス改善事例② - 状況別に使える Flutter DevTools活用ガイド - まとめ 9
10. Studyplusについて - 学習を記録して管理、シェアできるアプリ - 数十万人規模のユーザーが日常的に利用 - iOS/Android/Webで提供 - 今年の3月末にフルFlutter化 10
11. 今日話すこと - パフォーマンス改善事例① - パフォーマンス改善事例② - 状況別に使える Flutter DevTools活用ガイド - まとめ 11
12. 事例①の概要 12 ユーザーからのお問合せ 調査 原因の判明 改善 • Flutter版iOSアプリをリリース直後アプリ が「重い」「カクカクする」というお問い合わ せが届く • SNS、ストアレビューにも同様の投稿あり
13. 事例①の概要 13 ユーザーからのお問合せ 調査 原因の判明 改善 • 手元での再現確認 • ソースコードを確認 →有力な手がかりなし • Flutter DevToolsを使った調査
14. 事例①の概要 14 ユーザーからのお問合せ 調査 原因の判明 改善 • 状態監視の方法に問題 があり、不要な buildが発生してしまっていた
15. 事例①の概要 15 ユーザーからのお問合せ 調査 原因の判明 改善 • 不要なbuildの発生を防ぐ ようにソース コードを修正 • 修正によりパフォーマンスが改善
16. Flutter DevTools起動 17 ※Android Studioの場合
17. Flutter DevTools起動 18 ※Android Studioの場合 ブラウザで起動 Android Studio内で起動
18. Flutter DevToolsを起動 19
19. Flutter DevToolsを起動 20 →パフォーマンスを正確に測定するためにはアプリをProfileモードで実行してね
20. Flutter DevToolsを起動 22 アプリをProfileモードで実行
21. Performance view 23
22. Performance view 24
23. Frameチャートの見方 25 UI - Dartコードの実行 - Widgetの build/layout/paint(準備) Raster - GPUと通信してピクセルを画面に描 画する部分
24. Frameチャートの見方 26 ✅約16ms※のラインを超えている場合、赤い色で表示される →Jank(カクつき)が発生している ※1(s) ÷ 60(frame) = 0.0166666…(s) ≒ 16.7ms
25. 実際に見てみる 27
26. タブを切り替えた時にJank(カクつき)が発生している 28
27. Frameをクリックして詳細を見る 29 2 1 3 4 5
28. Frameをクリックして詳細を見る 30
29. Frame Analysisで詳細を確認する 31
30. Frame Analysisで詳細を確認する 32 build/layout/paint時間の内訳
31. Frame Analysisで詳細を確認する 33 buildに時間がかかっている📝
32. Timeline Eventsで詳細を確認する 34
33. Timeline Eventsで詳細を確認する 36
34. Timeline Eventsで詳細を確認する 37 👈 uiと書かれたところを見にいく
35. Timeline Eventsで詳細を確認する 38
36. Timeline Eventsで詳細を確認する 40 ここから何がわかるんだ...?
37. Enhance Tracing 41
38. Enhance Tracing 42 ✅TimelineにWidgetのbuild情報が追加されるようになる
39. Frame Analysisのヒント 43 デバッグのヒントとなるテキスト💡
40. Trace widget buildsを有効にすると 46
41. Trace widget buildsを有効にすると 47 タブ2の画面 タブ4の画面 タブ3の画面 タブ1→タブ2への切り替えなのに、関係のない画面がbuildされている
42. Flutter DevToolsでの調査でわかったこと - タブを切り替えた時にカクつきが発生 - 該当のフレームではbuildに時間がかかっていた - その原因は不要なbuildが呼ばれていたこと →この情報を元にコードを確認 48
43. 事例①の概要 49 ユーザーからのお問合せ 調査 原因の判明 改善 • 状態監視の方法に問題 があることが判 明 • 不要なrebuildが発生してしまっていた
44. 問題となっていた状態の監視 50 RiverpodのNotifierProvider state: ローカルキャッシュに保存するデータクラス （ユーザー設定など全 54プロパティ） タブ1の画面 タブ2の画面 タブ3の画面 タブ4の画面 状態の変更を監視
45. 問題となっていた状態の監視 51 タブ1の画面 タブ2の画面 タブ3の画面 タブ4の画面 状態を更新 下タブ RiverpodのNotifierProvider state: ローカルキャッシュに保存するデータクラス （ユーザー設定など全 54プロパティ）
46. 問題となっていた状態の監視 52 タブ1の画面 タブ2の画面 タブ3の画面 タブ4の画面 状態の変更が通知 下タブ RiverpodのNotifierProvider state: ローカルキャッシュに保存するデータクラス （ユーザー設定など全 54プロパティ）
47. 問題となっていた状態の監視 53 タブ1の画面 タブ2の画面 タブ3の画面 タブ4の画面 一斉にbuildメソッドが呼ばれる 下タブ RiverpodのNotifierProvider state: ローカルキャッシュに保存するデータクラス （ユーザー設定など全 54プロパティ）
48. 問題となっていた実装（タブ2画面での例） 54 class RecordPage extends HookConsumerWidget { const RecordPage({super.key}); @override Widget build(BuildContext context, WidgetRef ref) { final hasSeenOnboardingMessage = ref.watch(sharedPreferencesPresenterProvider).hasSeenOnboardingMessage; … } } 巨大クラスを公開するRiverpodのProvider
49. 問題となっていた実装（タブ2画面での例） 55 class RecordPage extends HookConsumerWidget { const RecordPage({super.key}); @override Widget build(BuildContext context, WidgetRef ref) { final hasSeenOnboardingMessage = ref.watch(sharedPreferencesPresenterProvider).hasSeenOnboardingMessage; … } } これだとどのプロパティが更新されてもbuildが発火する
50. 改善：watchを局所化する（.select） Riverpodのselectで必要なプロパティだけ監視 56 final hasSeenOnboardingMessage = ref.watch(sharedPreferencesPresenterProvider).hasSeenOnboardingMessage; before final hasSeenOnboardingMessage = ref.watch( sharedPreferencesPresenterProvider.select( (prefs) => prefs.hasSeenOnboardingMessage, ), ); after
51. 改善後の状態監視 57 タブ1の画面 タブ2の画面 タブ3の画面 タブ4の画面 状態を更新 下タブ RiverpodのNotifierProvider state: ローカルキャッシュに保存するデータクラス （ユーザー設定など全 54プロパティ）
52. 改善後の状態監視 58 タブ1の画面 タブ2の画面 タブ3の画面 タブ4の画面 関係のないプロパティの変更ではbuildが呼ばれない👍 下タブ RiverpodのNotifierProvider state: ローカルキャッシュに保存するデータクラス （ユーザー設定など全 54プロパティ）
53. 改善後の確認（Frameチャート） 59
54. 改善後の確認（Frame Analysis） 60
55. 改善後の確認（Timeline Events） 61
56. 改善後の確認（Timeline Events） 62 before after
57. 事例①のまとめ - アプリが全体的に「重い」、「カクつく」 との問い合わせ - FrameのJank(カクつき)を検知するためPerformance viewを確認 - Frame chart → Frame Analysis → Timeline Events(Enhance Tracing)と見てい くことで不要なbuildが呼ばれている ことを発見 - RiverpodのProviderをwatchする際は適切に 63
58. 今日話すこと - パフォーマンス改善事例① - パフォーマンス改善事例② - 状況別に使える Flutter DevTools活用ガイド - まとめ 64
59. 事例②の概要 65 ユーザーからのお問合せ 調査 原因（仮説） 改善 • 特定のユーザーからお問い合わせ ◦ 本棚画面※でアプリが落ちる ◦ 本棚画面をしばらく触ると落ちる ※本棚は教材画像が並ぶ このような画面👉
60. 事例②の概要 66 ユーザーからのお問合せ 調査 原因（仮説） 改善 • 手元での再現確認 ◦ 手元では再現しない • ソースコードを確認 • Flutter DevToolsでの調査
61. 事例②の概要 68 ユーザーからのお問合せ 調査 原因（仮説） 改善 • サーバーから取得する画像のサイズが非 常に大きく、それをアプリ側でサイズ指定 せずにキャッシュとして持っていることが 問題？
62. 事例②の概要 69 ユーザーからのお問合せ 調査 原因（仮説） 改善 • キャッシュサイズを指定 • 問い合わせのあったユーザーから改善さ れたと連絡をもらった
63. Flutter DevToolsでの調査 本棚画面でアプリが落ちる - UIスレッドの処理負荷が高い？ - メモリリークやメモリ膨張の可能性？ →本棚画面を中心にPerformance view, Memory viewを見る 70
64. Performance view 71 特に異常は見られなかった
65. Memory view 72
66. Memory chart 73 Dart/Flutterのヒープメモリと一部ネイティブメモリの状態を 時間経過とともに視覚的に表示
67. Memory chart 74 メモリリークしているかどうか ✅GCイベントの後もDart/Flutterのヒープメモリが 継続的に増加し続けるかどうかをみる
68. Memory view 75 GCイベントの前後を比較して見たが、大きく増えているなどはなかった
69. 原因の判明 Flutter DevToolsの調査に行き詰まる ↓ チームメンバーが「画像キャッシュが怪しいのでは？」と仮説を立てる 76 Image.network( item.materialImageUrl , ); Image.network( item.materialImageUrl , cacheWidth: cacheSize, cacheHeight: cacheSize, ); キャッシュサイズを指定するように変更
70. 修正後のリリースで解消 - アプリが落ちることなく使えるようになったとの報告を受けた 77 考えられる原因 - 該当ユーザーの登録している画像のサイズが極端に大きかった - その画像をそのままのサイズでキャッシュとして持っていた →メモリ圧迫でアプリが落ちていた
71. なぜFlutter DevToolsでは分からなかったのか？ ①該当ユーザーと同じ環境での検証ができていなかった - 検証アカウントの教材画像サイズ<<<<該当ユーザーの教材画像サイズ ②画像キャッシュはMemory Viewの可視化する領域外で膨張していた?（仮説） 78 →Flutter DevToolsを使って検知できないのか？
72. Highlight Oversized Images - Flutter Inspectorのデバッグオプションの一つ - 必要以上に大きなメモリを使用している画像を検出できる 79
73. Highlight Oversized Images 80 debugモードで実行 ↓ Flutter Inspectorを起動
74. Highlight Oversized Images 81 これをONにする
75. Highlight Oversized Images 82 ✅必要とされるメモリよりも128 KB以上多くメモリを消費している画像→色、 上下反転画像として表示される
76. Highlight Oversized Images 83 改善前の状態で確認すると、確かに右のような状態になっていた
77. 事例②のまとめ - 特定のユーザーから本棚画面でアプリが落ちる とのお問い合わせ - Performance, Memory viewを確認するも問題を検知できず - 画像キャッシュサイズの指定 によって問題が解決 - 過度にメモリ消費している画像はHighlight Oversized Imagesオプションで検知 可能 84
78. 今日話すこと - パフォーマンス改善事例① - パフォーマンス改善事例② - 状況別に使える Flutter DevTools活用ガイド - まとめ 85
79. 状況別に使えるFlutter DevTools活用ガイド - ①全体的なパフォーマンス問題の検知 - ②特定画面や機能の深掘り 86
80. 状況別に使えるFlutter DevTools活用ガイド - ①全体的なパフォーマンス問題の検知 - ②特定画面や機能の深掘り 87
81. ①全体的なパフォーマンス問題の検知 88 機能・オプション名 タブ できること Performance Overlay (Frame chart) Performance カクつき(UI Jank)の箇所をざっくり把握できる Highlights Repaints Inspector 不要な再描画を検知できる Count widget builds Performance 不要なbuildを検知できる Highlight Oversized Images ※ Inspector 画像サイズ過大を検知できる ※事例②で紹介したので説明は省略
82. Performance Overlay Frame chartをアプリ上で確認できる →カクつき(UI Jank)の箇所をざっくり把握できる ✅見るポイント - max, avgが高くなる時 - バーが赤くなるとJank 89 ※Profileモードで利用
83. Highlight Repaints 再描画が起こるたびに境界値の色が変 わる →不要な再描画を検知できる ✅見るポイント - 再描画対象が固定領域まで及んで いないか - 不必要に再描画されていないか 90 ※Debugモードのみ
84. Count Widget builds 各フレームでbuildされたWidgetとその build回数がわかる →不要なbuildを検知できる ✅見るポイント - 関係のないWidgetがbuildされていな いか - 同じWidgetが複数回buildされていな いか 91 ※Debugモードのみ
85. 状況別に使えるFlutter DevTools活用ガイド - ①全体的なパフォーマンス問題の検知 - ②特定画面や機能の深掘り 92
86. ②特定画面や機能の深掘り 93 機能・オプション名 タブ できること Frame Analysis Timeline Events Enhance Tracing ※ Performance カクつき(UI Jank)のボトルネック特定 Diff Snapshots Memory メモリリークしている箇所の特定 CPU Profiler CPU Profiler 時間がかかっている処理の特定 ※事例①で紹介したので説明は省略
87. Diff Snapshots 94 Memory Snapshotを比較できる →メモリリークしている箇所を特定で きる
88. Diff Snapshots 96 ✅破棄されるべきインスタンスが残っていないか
89. CPU Profiler 97 アプリ実行中のCPU消費時間を記録・集計 →時間のかかっている処理を特定できる ✅見るポイント - Bottom UpタブのSelf Timeが高いメソッド - Call TreeタブのTotal Timeが高いメソッド
90. CPU Profiler 98 アプリ実行中のCPU消費時間を記録・集計 →時間のかかっている処理を特定できる ✅見るポイント - Bottom UpタブのSelf Timeが高いメソッド - Call TreeタブのTotal Timeが高いメソッド
91. 今日話すこと - パフォーマンス改善事例① - パフォーマンス改善事例② - 状況別に使える Flutter DevTools活用ガイド - まとめ 99
92. まとめ - 事例とともにFlutter DevTools活用の流れを見ていった - 事例①UIのカクつき→Performance viewで原因が特定できた - 事例②アプリが落ちる→Flutter Inspectorのdebugオプションで特定可能とわかった - 状況別に使える機能について紹介した この発表がFlutter DevTools活用の参考になればと思います 100
93. 参考文献 Flutter Docs - https://docs.flutter.dev/tools/devtools - https://docs.flutter.dev/perf Flutter DevTools Tutorial(Medium) - https://medium.com/@fluttergems/mastering-dart-flutter-devtools-part-1-introd uction-installation-4f703a8cfcc8 101