How to boost Jetpack Compose app performance

Jetpack Compose is a modern UI development toolkit that has transformed how developers create Android interfaces.?

Its declarative approach makes building complex UIs more intuitive and concise, significantly reducing the boilerplate code associated with traditional Android development.

With this newsletter, let’s explore the strategies and tools to effectively identify and address genuine performance bottlenecks.?

Role of R8

To optimize Jetpack Compose apps, it's crucial to use R8, which is enabled by default in projects with Android Gradle plugin 3.4.0 or higher. R8 enhances app performance by removing unused code and resources, shortening class names, and optimizing code.?

However, optimizations like code shrinking, obfuscation, and optimization are not automatically enabled for new projects to prevent potential bugs and increased build times.

Activating these optimizations for your release build involves configuring your project-level build script to enable code shrinking, resource shrinking, and obfuscation. This setup ensures your app is compact and efficient.

Additionally, customizing R8's behavior through ProGuard rules allows you to specify exactly which parts of your code should be kept or removed.?

Measure, debug and improve?

When tackling performance issues in your Jetpack Compose app, it's tempting to try fixing everything at once. However, a systematic approach is more effective. Start by measuring performance to understand where the bottlenecks lie. Use tools like Jetpack Macrobenchmark to get accurate performance metrics without needing to know the internals of your app. This tool mimics user behavior, providing a realistic picture of your app's performance.

If performance issues persist despite having optimizations like R8 and baseline profiles enabled, it's crucial to identify the exact cause. Debugging helps pinpoint where your app's performance is lagging, whether it's in layout calculations, animation smoothness, or elsewhere.

The final step is to improve. Based on your measurements and debugging findings, focus on optimizing the problematic areas. This might involve adjusting layouts, optimizing animations, or making other specific changes to enhance performance.

This measure, debug, and improve framework prevents wasted effort on unnecessary optimizations and ensures that your enhancements have a meaningful impact on your app's performance.?

Startup performance optimization

Optimizing your app's startup time is crucial for a positive user experience. The Macrobenchmark tool offers a StartupTimingMetric to measure this efficiently. It captures the time from app launch to the first frame render and until the app reaches a fully drawn state. To refine this measurement, use the Activity.reportFullyDrawn method, which provides a more accurate user-centric metric by marking the end of the startup process when the app is interactive

For Jetpack Compose apps, integrating the ReportDrawn composable or its variants (ReportDrawnWhen, ReportDrawnAfter) into your UI can significantly enhance startup performance. These tools help you identify when your app's UI is fully ready for interaction, allowing for precise optimization efforts.?

Optimizing frame timing

For a smooth user experience, maintaining optimal frame timing is key. Frame benchmarks focus on the performance of UI elements as they are rendered on the screen. Jetpack Macrobenchmark offers tools that allow you to measure the rendering times of a specific part of your app, without including the initial, longer frame. This ensures that your benchmarks accurately reflect the user's experience during normal app interaction.

When analyzing the benchmark results, pay attention to metrics like frame duration and frame overrun. A negative frame overrun indicates that frames are being produced within the device's capabilities, ensuring smooth performance. On the other hand, a positive overrun suggests potential jank, highlighting areas for improvement.

Debugging with System Tracing

When you've enabled all optimizations but still notice performance issues, system tracing becomes an invaluable tool for debugging. System tracing allows you to capture detailed information about your app's execution, helping you pinpoint the source of jank or slowdowns. You can access system traces through Android Studio Profiler or directly from a device, but Jetpack Macrobenchmark simplifies this process by automatically recording traces during benchmark runs.

These traces are accessible in the Android Studio output pane, providing a straightforward way to analyze app performance. By clicking on a trace, Android Studio Profiler loads, focusing exclusively on your process. This targeted view lets you quickly identify problematic areas without getting lost in the broader device context.

For a more comprehensive analysis, consider using Perfetto, a web-based tool that offers a complete overview of device activities. Perfetto can reveal interactions between different processes, offering insights that might be missed when only looking at your app's process. It supports advanced queries, allowing you to learn more in-depth performance issues.

System tracing with custom trace sections

To dive deeper into performance analysis, adding custom trace sections to your system tracing can provide invaluable insights. With tracing-ktx library integration, you can wrap specific composables or code sections with custom trace calls. These custom sections introduce minimal overhead, making them suitable for inclusion in production code. When you rerun benchmarks or system traces, these named sections will appear, offering precise data on the execution time of specific operations. This method allows for targeted optimization, helping you understand and improve the performance of individual components within your Jetpack Compose app.

Key techniques for performance improvement

To significantly enhance your Jetpack Compose app's performance, start by updating to the latest version of Compose.?

• Regular updates include performance optimizations that can benefit your app without additional effort.?

• Focus on generating a baseline profile. This step ensures more of your app's code runs in a precompiled state, reducing jitting and improving execution speed.
• If your app experiences frequent recompositions, consider deferring updates to less frequent state changes. This approach minimizes unnecessary recompositions, leading to smoother animations and interactions.?

• For deeper performance enhancements, use BoxWithConstraints judiciously, as it's best suited for adapting UI to available space, not for measuring component sizes—this can introduce unnecessary overhead.?

• When dealing with images, especially large ones, opt for asynchronous loading with libraries like Glide or Coil to avoid blocking the main thread.?

What strategy have you found to be most effective in optimizing app performance?

Let us know in the comments.