Slide 1
Slide 1 text
Jetpack Composeの
スクロールパフォーマンス改善を検証
した話
2024/03/05
Mobile勉強会 Wantedly × チームラボ × Sansan #13
内山雅由（@umsys_）
Slide 2
Slide 2 text
自己紹介
株式会社ZOZO
X: @umsys_
Bluesky: @umsys.bsky.social
GitHub: https://github.com/umsys
内山 雅由
● 車の運転とゲームとハリネズミが大好きです。
● 最近はポケモンカードにハマっています。
● 月曜日に治療した虫歯が神経に近かったため、
半年くらい40℃前後のものしか飲食できなくなりました。
つらいです。
Slide 3
Slide 3 text
Jetpack Compose導入において
（個人的な）最大のメリット
Slide 4
Slide 4 text
Lazy コンポーネント！
● LazyColumn
● LazyRow
● LazyVerticalGrid
● LazyVerticalStaggeredGrid（experimental）
などなど
Slide 5
Slide 5 text
便利なLazyコンポーネントですが
各所で不満の声も。
その一つが。。。
Slide 6
Slide 6 text
スクロールパフォーマンスに難がある
特に、画像表示と組み合わせるとカクつきが目立つ話は
各所で話が上がっていました。
パラメータを調整したり、遅延読み込みを実装したりなど、
皆様苦労されている様子です。
Slide 7
Slide 7 text
朗報です！
スクロールパフォーマンス改善を謳った
バージョンがリリースされました🎉
Slide 8
Slide 8 text
Compose 1.6.0
● 全体的にパフォーマンスが大幅に向上
● スクロール パフォーマンスが20% 向上（1.5.0から比較して）
● 起動時間が12% 向上（1.5.0から比較して）
● ほとんどのアプリでは最新バージョンにアップグレードするだけで
OK
● 他のコードを変更する必要はない
引用：https://android-developers.googleblog.com/2024/01/whats-new-in-jetpack-compose-january-24-release.html
Slide 9
Slide 9 text
Jetpack Composeの画像表示で
よく使われているCoilも
パフォーマンス改善を謳った
バージョンがリリースされました🎉
Slide 10
Slide 10 text
Coil 2.6.0
● rememberAsyncImagePainter、AsyncImage、および
SubcomposeAsyncImage を再起動およびスキップ可能に
● コンポーザブルの引数のいずれかが変更されない限り、再コンポ
ジションが回避され、パフォーマンスが向上
● 通常メインスレッドで発生する遅い初期化を修正
● などなど
引用：https://github.com/coil-kt/coil/blob/main/CHANGELOG.md#260---february-23-2024
Slide 11
Slide 11 text
ということで、
アップデート前後でそれぞれの
パフォーマンスを比較しました。
Slide 12
Slide 12 text
検証環境 / 使用ツール
● 検証端末：Pixel7（Android14）
● メトリクス測定：Macrobenchmark
○ N = 5
○ CompilationMode.DEFAULT
■ GooglePlay経由でインストールした状態を再現
● JetpackCompose1.5.4 / 1.6.0、Coil2.5.0 / 2.6.0の
組み合わせでそれぞれ計測
Slide 13
Slide 13 text
検証環境 / 使用ツール
パフォーマンス計測対象のUI
Slide 14
Slide 14 text
検証環境 / 使用ツール
パフォーマンス計測対象のUI
ビルド
Slide 15
Slide 15 text
検証環境 / 使用ツール
Macrobenchmarkの
テストケース
引用
：https://github.com/android/perfor
mance-samples/blob/main/Macrob
enchmarkSample/macrobenchmark
/src/main/java/com/example/macr
obenchmark/benchmark/scroll/Scr
ollBenchmark.kt
Slide 16
Slide 16 text
検証環境 / 使用ツール
Macrobenchmarkの
テストケース
スクロールダウン×2、スクロールアップ×2を実行
スクロール速度:15000pic/sec(デフォルトの2倍)
※デフォルトのスクロール速度はちょっと遅かった
Slide 17
Slide 17 text
メトリクス
● timeToInitialDisplayMs
○ 初期表示までの時間
● frameDurationCpuMs
○ UI スレッドと Renderスレッドの両方でフレームの生成に CPU でかかった
時間。
● frameOverrunMs
○ 指定されたフレームが期限を超過した時間。
○ 正の数値はフレーム落ちや目に見えるジャンクまたはスタッターを示します。
→すべての数値は低ければ低いほどパフォーマンスが高い
引用：https://developer.android.com/topic/performance/benchmarking/macrobenchmark-metrics?hl=ja
Slide 18
Slide 18 text
検証結果
Slide 19
Slide 19 text
グラフ作成：chatGPT
253.1
286.4
270.9 261.9
278.6
307.7
283.5
266.0
494.5
548.3
421.1
395.4
Slide 20
Slide 20 text
グラフ作成：chatGPT
253.1
286.4
270.9 261.9
278.6
307.7
283.5
266.0
494.5
548.3
421.1
395.4
リリースノート通り
Coil 2.6.0によって
遅い初期化を修正がされている。
Slide 21
Slide 21 text
4.7
4.1 4.4
4.6
7.1
6.7
7.2 7.3
8.2
7.4
8.5
8.5
11.6
10.0
13.0
12.2
Slide 22
Slide 22 text
4.7
4.1 4.4
4.6
7.1
6.7
7.2 7.3
8.2
7.4
8.5
8.5
11.6
10.0
13.0
12.2
強いて言うなら、
Compose 1.6.0に上げただけの場合に
パフォーマンスが少し向上している
Slide 23
Slide 23 text
-10.3 -10.5-10.6
-9.4
-3.8 -3.9 -3.9 -3.6 -3.4
-3.7
-3.2
-3.5
2.4
4.2
9.2 9.2
Slide 24
Slide 24 text
-10.3 -10.5-10.6
-9.4
-3.8 -3.9 -3.9 -3.6 -3.4
-3.7
-3.2
-3.5
2.4
4.2
9.2 9.2
Coil 2.6.0によって
遅い初期化を修正がされていたが、
P99においてフレームの期限超過時間が
上昇してしまっている。
Slide 25
Slide 25 text
メトリクス上において
Compose1.6.0によって改善される
目を見張るような顕著な差は
見受けられなかった このままではお蔵入り
Slide 26
Slide 26 text
目視でカクつきが減っていることを
確信していたので、
ジャンクフレームの発生率に
注目して再度分析
Slide 27
Slide 27 text
Jetpack Compose 1.5.4
Slide 28
Slide 28 text
Jetpack Compose 1.6.0
Slide 29
Slide 29 text
ジャンクフレーム発生が
激減していました🎉 やったね！
Slide 30
Slide 30 text
まとめ
● Compose 1.6.0に上げることでジャンクフレームが減る＝ユーザー体験が良くなる
● Coil 2.6.0に上げることで初期表示は速くなるが、フレーム期限超過時間のレイテンシが悪くなりそう
● 目視確認は大切
Slide 31
Slide 31 text
ご清聴ありがとうございました！