Facebook and Instagram shared from their experience improving their apps to perform better on various Android devices and over different network connection speeds during the session Scaling Android Apps for Emerging Markets recorded at @Scale 2014.
Facebook sent teams to several countries in Asia, Africa, Central and South America to evaluate the local phone market and to buy and use popular devices to see what’s the user’s experience when accessing their application. Chris Marra, Product Manager on Android Development at Facebook, shared a number of findings regarding Android devices and network connections in these emerging markets.
- There are ~10,000 device models that are accessing Facebook regularly
- In the developing countries there are two predominating categories of mobile devices: feature phones and low entry Android phones
- These devices are usually built with the previous generation hardware
- Internet connection is a premium service and is characterized by congestion issues
- The phones are slow, have small screens and usually bad networks connections
- US has 70% 3G coverage while countries like Brasil and India have 38% and respectively 7%
After taking the pulse of these markets, Facebook proceeded to improve their application. They discovered that users with older phones have significantly more app crashes because the limited memory generates OutOfMemory errors more often, so they decided to provide for these a different version of their application in order to make sure it runs smoothly on such devices. They had to cut down on animations and other CPU hungry interface operations because users on older phones had a negative user experience.
After seeing how their app behaves on certain low-end phones, Facebook created the tools to educate their teams on existing problems and they started to improve the UX on such devices. One of the factors that had to be considered was screen size, 10% of FB users having LDPI (120 DPI) phones. They decided to trim down the user interface, removing or simplifying widgets and icons.
Andrew Rogers, Engineering Manager at Facebook, detailed some of the steps taken to improve user experience.
Image Size. Image data represents 85% of FB/Android and 65% of Messenger bytes transferred over the network, so it is desirable to reduce their size as much as possible. This was achieved by:
- Scaling images on the server
- Having multiple image sizes and resolutions: preview images for the newsfeed, thumbnails for profiles, and larger ones for photo stories
- Downloading small images based on screen size
- Using full size images only when the user zooms in; most of the times users need only a small thumbnail or a preview
- Using WebP for 90% of images on Android, having 30% smaller size compared to JPEG for the same perceived picture quality. Issues: WebP is natively supported on Android 4.2+, so for previous versions the image has to be transcoded back to PNG or JPEG on the device
Network Quality. Facebook realized that it is not enough to determine the network speed based on network type. Connections are 2-3x slower in some countries compared to others in spite of using the same technology: Edge, HSPA, LTE, etc. In countries like India or Brazil, the WiFi is slower that LTE, so it is better to dynamically determine the actual network speed.
To reduce download times, they decided to:
- Increase image compression
- Issue more parallel requests
- Disable auto-play
- Pre-fetch more content
To make it possible to test their app on various networks before it is deployed, Facebook created Air Traffic Control, a tool that simulates different network connection types over WiFi, having the ability to configure max bandwidth, packet loss, round trip time delay for uplink/downlink.
Prefetching Content. Another way to improve the user experience mentioned by Rogers is to pre-fetch some of the content. This is especially useful for high latency networks, but pre-fetching should not be overused because it fills up the cache and consumes data from what probably is a quite limited data plan.
Tyler Kieft, an Engineer working on Android at Instagram, presented some of the adjustments made by their team to the Android app to improve its performance and make it better looking. One of the things they did was to rewrite the interface using a modern flat design –removing gradients, glossy colors, shadows, etc. - which resulted in increased performance across all sorts of Android devices.
A side effect was that flat design enabled programmatic “asset tinting”. The app no longer needed all assets in all colors, but only in one color. Instagram managed to reduce the number of assets from 29 to 8 just for one view of the app. As a result, the UI displays faster and takes less memory space, and the cold start time dropped by 120ms. Also, the users reacted very positively to the new look and its performance improvements.
According to Kieft, they profiled the app to determine what’s slowing it using method tracing with Android Traceview and timing statements. Then they improved the app by
- Removing slow items from the cold start path
- Rewriting slow code
- Deferring things to a background thread
- Repeating the above steps (profiling, rewriting)
They also use two-part lazy loading: create singleton objects on the UI thread but perform actions on them, such as access disk storage for cache, load certificates for an HTTP client, deserialize cookies, on a background thread.
Another way to reduce cold start time for their application was going native instead of using WebView, shaving 30% across all Android versions.