Practical performance problem solving in Jetpack Compose

1. Before you begin

In this codelab, you learn how to improve the runtime performance of a Compose app. You follow a scientific approach to measure, debug, and optimize performance. You investigate multiple performance issues with system tracing and change non-performant runtime code in a sample app, which contains several screens that represent different tasks.

Check out the following code-along for more support walking through this codelab:

The screens are each built differently and include the following:

  • The first screen is a two-column list with image items and some tags on top of the item. Here, you optimize heavy composables.

8afabbbbbfc1d506.gif

  • The second and third screens contain a frequently recomposing state. Here, you remove unnecessary recompositions to optimize performance.

f0ccf14d1c240032.gif 51dc23231ebd5f1a.gif

  • The last screen contains unstable items. Here, you stabilize the items with various techniques.

127f2e4a2fc1a381.gif

Prerequisites

What you learn

What you need

2. Get set up

To get started, follow these steps:

  1. Clone the GitHub repository:
$ git clone https://github.com/android/codelab-android-compose.git

Alternatively, you can download the repository as a zip file:

  1. Open the PerformanceCodelab project, which contains the following branches:
  • main: Contains the starter code for this project, where you make changes to complete the codelab.
  • end: Contains the solution code for this codelab.

We recommend that you begin with the main branch and follow the codelab step-by-step at your own pace.

  1. If you want to see the solution code, run this command:
$ git clone -b end https://github.com/android/codelab-android-compose.git

Alternatively, you can download the solution code:

Optional: System traces used in this codelab

You will run several benchmarks that capture system traces during the codelab.

If you're not able to run these benchmarks, here's a list of system traces you can download instead:

3. Approach to fixing performance issues

Spotting slow, non-performant UI is possible with just plain sight and exploring the app. But before you jump in and start fixing code based on your assumptions, you should measure the performance of your code to understand if your changes will make a difference.

During development, with a debuggable build of your app, you might notice something is not as performant as needed and you might be tempted to start dealing with this problem. But a debuggable app's performance is not representative of what your users will see, so it's important to verify with a non-debuggable app that it actually is a problem. In a debuggable app, all of the code has to be interpreted by the runtime.

When thinking about performance in Compose, there's no hard rule you should follow to implement a particular functionality. You shouldn't do the following prematurely:

  • Don't chase and fix every unstable parameter that sneaks into your code.
  • Don't remove animations causing recomposition of that composable.
  • Don't do hard-to-read optimizations based on your gut feeling.

All of these modifications should be done in an informed way using the available tools to be sure that they're addressing the performance issue.

When dealing with performance issues, you should follow this scientific approach:

  1. Establish the initial performance by measuring.
  2. Observe what's causing the problem.
  3. Modify the code based on the observations.
  4. Measure and compare with initial performance.
  5. Repeat.

If you don't follow any structured method, some of the changes might improve performance, but others might degrade it, and you can end up with the same outcome.

We recommend watching the following video on enhancing app performance with Compose