Performance in Flutter What is it? How is it measured? How is it interpreted? How is it improved?

What is performance?

Well, we must start by defining the topic we are analyzing. We can understand performance as a set of quantifiable properties of an executable. In our context, it is not the execution of the action itself. It is how well it is done when performing it.
I highlight quantifiable because it is vital to have a number representing the ability to perform the task. For example, the size of your final application is a measure that can be assigned to a number, and in this way, it is clear that if a new feature of your App makes it go from 120 MB to 200 MB, it is an indication that something may be wrong. And maybe you have opportunities for improvement.
Therefore, all elements to measure performance must be quantifiable.

Because it is essential?

We must measure performance automatically to ensure that our applications provide the best customer experience. An application performance issue is usually associated with implementation issues, not the SDK.
However, not everything is visible to the human eye. For example, FPS is the unit that measures the number of frames a device generates or processes during 1 second. The idea is that our applications work at a minimum of 60 FPS. Still, the human eye only distinguishes a little more than 25 FPS 🫣, so it would be challenging for us to measure a good performance using only our senses. Wrong rendering time implies an unnecessary drain on the GPU, leading to a higher drain on the battery.
Therefore, if we do not measure our performance, we will dedicate ourselves to putting out fires instead of guaranteeing the quality of our developments before going into production.

Items to keep in mind

There are five points you should have on your radar when measuring performance:

  • It would help if you made the metrics easy to understand 📈. You should always measure numbers so developers can know when it’s a performance improvement or an impact.
  • Make specific metrics🧐. By this, I mean that a unit must be established and define the standard for that measurement. For example, all our apps must run at a minimum of 60 FPS (there’s nothing ambiguous about that, and there’s no room for developer interpretation).
  • Make performance easy to compare. For example, holding the old measurement against the new one can help identify performance gains or losses.
  • We must make performance metrics monitor as broad a population as possible so that nothing is left behind. In this way, we guarantee the excellent performance of the App.
  • You should not perform performance optimizations until a test shows that there is indeed a problem. It happens because sometimes we believe that certain developments can improve performance. Still, we should not rush to correct supposed flaws until we corroborate with tests that there is an error in a specific part of our implementations.

Performance Categories

We can divide performance into two main categories, namely time and space. In the time category, we can see measurements such as FPS, time to first frame drawn, etc. And in the space category, we will see elements such as application size, memory consumed by a process, etc.

How can we measure performance in our Flutter apps?

We have reached the moment many of us were eager to get, and it is time to apply the theory and learn about performance measurement tools.

flutter run --profile
First tool — Observatory
Second Tool — Developer Tools

How is it interpreted?

Let’s test these tools with a demo app 🧐:

Left: High Perfo & Right: Low Perfo
High-performance screen experience

UI

The UI thread executes the Dart code in the Dart VM. This thread generates the layer tree. Remember that Flutter runs widgets and elements and renders object trees parallel to draw the details on the screen. (I suggest you read the following article if you don’t have this link context). The layer tree has the elements to draw, but it doesn’t know how to do it, so it sends its information to the raster thread.

Raster

The raster thread takes the layer tree exposed in the UI thread and then sends the necessary commands to the GPU to draw the elements on the screen.

Jank (slow frame)

A frame that has taken a long time to draw to the screen is considered a Jank. As a standard, anyone who brings more than 16 ms (for devices running at 60 FPS) to finish their draw is considered a Jank.

Shader compilation

Frames that perform shader compilation are marked in dark red.

Low-Performance experience result.
Detail of the first slow frame
Jank Detail (Bottom Up tab)
Report after filters

Let’s measure CPU consumption.

We can still use this example to analyze the following two tabs. Let’s start with the CPU profiler. Which will tell us how much computational wear is for our solution.

The screenshot on the left is the underperformance report, and the high-performance screen is in the right picture.

Let’s measure memory consumption.

On the other hand, there is the memory tab (Memory). Let’s see what the analysis throws at us:

Memory test scenarios (first low performance, then high performance)

Let’s measure internet consumption.

Well, let’s go to the internet data trip tab. This screen allows us to measure response times, data type, and responses, among other exciting elements:

Perfo experience Network

Let’s measure storage space consumption.

Before going to production, analyzing the size occupied by our applications is good. For this, we can use the available tools. In this case, the App Size tab.

The App Size tab.
  • flutter build apk --analyze-size
  • flutter build appbundle --analyze-size
  • flutter build ios --analyze-size
  • flutter build linux --analyze-size
  • flutter build macos --analyze-size
  • flutter build windows --analyze-size
This tool also allows us to see if we decrease the size of our App.

How is performance improved?

At this time, there were already many elements that we analyzed. The only thing left to solve is the following: How do we fix our performance failures?

Conclusion

I hope this article has been to your liking. Forgive the length a bit, but given the detail of the subject, it was necessary to cover several points. If you liked the article, remember to leave +50 👏 as a sign of gratitude.
I am convinced that with this tool, you will be able to identify the possible failures of your App and attack the problems that you see. But wait!! I did not tell you there is a way to measure some of these elements from automatic processes. Follow us to see the next part of this article, where I will tell you how we can do it 🧑🏻‍💻. I will also leave you the link to the example repository (repo link).

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Daniel Herrera Sánchez

Daniel Herrera Sánchez

I am from Colombia, I am Bancolombia senior frontend developer, I am very interested in flutter and share knowledge about this amazing sdk. YouTube weincode