Boosting Compose UI from Sluggish to Snappy
summary
A janky Tinder clone is diagnosed and optimized: engineers use Macrobenchmark frame timing to quantify jank, capture traces with Layout Inspector and Systrace/Perfetto plus the composition tracing Library, and fix hotspots by moving expensive measure/place work out of invisible cards, switching to lambda graphicsLayer modifiers, deferring state reads, and using derivedStateOf and immutable collections for stability. Result: p50 frame time drops about 40% and p90 improves roughly 30% on a Pixel 3A, with far fewer recompositions.
AI-written summary · about
chapters (14)
- 0:00Compose UI performance challenges
- 1:07Janky Tinder app demo
- 2:10Frame performance with benchmarks
- 6:18Debugging with tracing
- 11:32Fixing measure phases in card stack
- 14:43Recomposition and its impact
- 18:34Lambda modifiers to reduce recomposition
- 21:02Defer state reads for optimization
- 25:55Limit recompositions with derivedStateOf
- 31:58Stability with Compose compiler metrics
- 36:12Immutable lists to prevent recomposition
- 39:04Final fixes and verification
- 40:30Performance gains with benchmarks
- 42:15Summary of debugging and optimization
related talks
40mBoosting Compose UI from Sluggish to Snappy
44mBoosting Compose UI from Sluggish to Snappy
32mFrom Debugging to Real-World Tuning: A Practical Guide to Compose Performance
21mMore performance tips for Jetpack Compose
37mPerformance in Compose:Lessons learned from Lazy layouts
21mPerformance best practices for Jetpack Compose
37mUsing Performance Management Tools: Firebase Performance Monitoring and Macrobenchm…
28mChasing 60 FPS: Frame Time Profiling in Jetpack Compose