Mobile phones and apps have become a key part of modern life around the world, and as a result, the number of apps continues to skyrocket (there are at least 2.1 million Android apps available today). As an Android developer, it’s more important than ever to create apps that delight users, because the competition among apps is fierce.
And do you know what really delights app users? High performance. In fact, 96% of users see app performance as important. So let’s talk about five ways to achieve high performance that delights users.
Before we begin, let’s define high performance and why it is crucial in delightful user experiences.
A high-performance Android app consumes device resources responsibly and helps users achieve their desired tasks swiftly. In effect, high-performance apps reduce the perceived latency that their users experience.
Perceived latency is an important term here: it’s the delay users experience from the time they press a button until any change of interface takes place. Depending on what action the user is performing and where the required data is coming from, there can be many ways to reduce perceived latency.
Now let’s go through five scenarios of user interaction and data loading to see how you can decrease perceived latency and have your apps respond to users quickly (and delightfully).
1. Load from the closest source
Your app’s users are all around the world and if there’s one thing that you can be certain about, it’s the fact that they’re going to be mobile.
The distance between your users and the web servers serving data to your apps cannot always be controlled and is a common cause for increased latency.
To decrease perceived latency, you should serve most of your app’s content from the closest source possible. Additionally, many unauthorized API requests can be eliminated at the closest source. This avoids the round trip to your back-end servers and further improves the response rate for users.
The Akamai Intelligent Edge Platform provides this service right out of the box. With Akamai, your content can often be within just one hop of your users, always loading from the most optimal source, and thereby improving your app’s performance.
2. Cache and prefetch
Many resources that are loaded from a web server often get reused. An intelligent caching mechanism, which stores objects or API responses for reuse for a period of time, often saves long, slow round trips. Many networking or image-loading libraries are already doing this, and you can configure these libraries to your own specifications. These cached objects load instantly and the latency is often so low your users won’t notice any lag at all.
With these libraries, when the cached content gets declared stale, it's marked for reload from the network. Based on this information, you can tell these libraries how long to keep reusing cached objects. Many such libraries also honor HTTP headers, such as max-age. This allows you to control cacheability and the life of cached content directly from your servers without pushing app updates.
There are some cases where caching may not be suitable, such as an app that delivers live sports scores. For apps like these, you can continue to load from the network. If you’re loading from the closest source (see point #1 above), this will not put too much of a dent in your app’s performance.
In other cases, you know what the user is going to do next. For example, an eBook reading app knows that when a user is reading a particular page of the book, they’re likely to move forward or backward in that book. Based on that, it can pre-fetch a few pages ahead of time and cache them. This way, when the user turns the pages, they load instantly.
Similarly, in an eCommerce app, if the user browses to the fourth row of items, it’s likely that they’ll view the next page of items too. The app can pre-fetch the next page and cache it, so it loads instantly when the user goes to the next page.
As you can see, you can use prefetching and caching in various ways to keep the perceived latency low, which improves the user experience of your app.
3. Load API responses quickly
Your app uses APIs heavily. If these API responses are loaded quickly, the users will spend little time waiting, and more time using your app.
To get there, make sure that as many APIs as possible are loaded from the closest source available (i.e., the edge, as noted in point #1 above) so that only the API requests which absolutely must go to your origin server (which may be situated halfway across the world) have to make that longer—and slower—journey.
Another thing you can do is to reduce the size of the data that passes between your app and your backend servers in order to make the API responses load more quickly. For this, you can explore data formats other than JSON, such as Colfer or Google’s protocol buffers (also called Protobuf). By converting the data to binary before sending it over the network, these formats drastically reduce the byte size of your API request/responses as compared to JSON. Please note that your web server and your app will both need some extra work in order to start working with Protobuf, but in many cases, the performance gains of using Protobuf far outweigh the efforts required to set it up.
A third method you can try for loading API responses quickly and improving perceived latency is to cache or prefetch predictable and repetitive API responses. While caching, you can store these API responses in a local database table, which can be read faster than reading from the network. This local database can be invalidated and refreshed as per your own logic, but loading from this local database first, and then refreshing it, will give the best performance and the lowest perceived latency.
4. Optimize images and videos
Besides APIs, your app likely also loads a lot of images and videos. Typically, the images that your app loads are used by other properties too, such as websites for the same app.
Images on a desktop website need to conform to a different screen size, resolution, and device type than on a mobile app. It’s important for the images in your app to be optimized for mobile devices, with their limited and metered resources. The same goes for videos, if your app uses them.
Even when these media are loading from the closest source, they still might not be at their fastest; you still need to make sure the images and videos are optimized. The sheer size of these objects, along with the unpredictability of the mobile data networks across the world, can easily nullify the gains you achieve with server proximity alone.
To achieve this optimization, make sure mobile apps are served in the resolution and size that best fits them when they request images or videos. If the assets are too big, it will take too long to download; too small and they appear pixelated on the screen.
Akamai Image Manager is one solution which allows you to use a single high-quality pristine image and automatically optimize it for many device types on the fly. This optimization will also make the images and videos easier to cache. Alternatively, you can store multiple different copies of the same image, as long as you only support a finite number of device types.
Images often contain a lot of EXIF data (e.g., details about the camera settings when the picture was taken) which is often not used in apps. Akami Image Manager optimizes this automatically, but you can also remove this data manually with services like tinypng. This optimization shrinks the file size of your images, improving load time.
Another optimization is to use progressive images and adaptive video streaming. With this, instead of waiting for the whole image to download, your app can download the images gradually, and start displaying it as it downloads. This prevents the user from starting into a blank image view and helps improve the perceived latency. Similarly, adaptive video buffering techniques adjust video quality to network conditions dynamically. This downgrades the video resolution when bandwidth is low, so users get to see some video instead of just a loading screen.
In addition to PNG or JPEG images, you can also explore WebP format. This format is more efficient, although it requires a bit more effort to create WebP images. For local or network loading, exploring SVG images is another good option to save disk space.
5. Optimize local animations and transitions
Animations play an important part in delighting the user and in notifying the user about any activity. This has less to do with performance, but more with perceived latency.
Animations that take too long to execute feel boring. Animations that are too short or are stuttery happen too fast for a user to understand what happened. Both leave a poor user experience. Thoughtful animations will also be mindful of battery consumption, so they’ll deliver a delightful user experience while not spending a lot of resources.
According to the Material Design guidelines by Google, larger animations on mobile devices should be between 300 and 400 milliseconds long. Smaller animations can be as short as 150 to 200 milliseconds. Animations longer or shorter than these can feel sluggish or difficult to follow. The Material Design guidelines on motion is a good place to learn these time ranges through examples.
So, for users to notice any activity for a short animation, it’s duration should be in the range of 150 or 200 milliseconds. Similarly, anything assisting a transition, such as going from one screen to another, shouldn’t be longer than 400 milliseconds. Animations such as a progress bar, which tend to be repetitive, should follow similar guidelines. A single loop of the animation can be around 300-400 milliseconds, and then it can loop until the progress bar goes away.
If you want to dig further, a fascinating study is the Human Processor Model that can help you understand how humans perceive motion.
The key to high performance is considering the full scope of data details and using resources mindfully. Thankfully, there are many ways to make achieving this goal possible.
Beyond the five tips explained above, there are two resources that I highly recommend which can help you follow best coding practices and use the most efficient algorithms: The Art of Computer Programming and Introduction to Algorithms can both greatly assist you in creating high-performance Android applications.
Aman Alam is a developer evangelist at Akamai Technologies.