Blog Post

The behind-the-scenes look at how Instagram made its Android app run twice as fast

Stay on Top of Enterprise Technology Trends

Get updates impacting your industry from our GigaOm Research Community
Join the Community!

Android is a massive pain for app developers. With the myriad of phone types running it, and therefore hardware tweaks that must be made, it’s a challenge for even the most established companies.

On Wednesday, Instagram opened the curtain on the work it’s been doing for the last year to improve its Android app. The company wanted to improve app startup time, processing power and user interface so they’re top-notch regardless of which type of phone is running it. The amount of work it took to do so was a doozy.

This is the subtle behind-the-scenes process consumers rarely hear about BUT it makes a big difference between a high functioning product and a less mature app. For more design back stories, be sure to check out Gigaom’s design conference — Roadmap — coming up November 18 – 19.

The first thing Instagram did was convert the entire product to a flat design, the type of unembellished visuals that came into vogue with iOS 7. That look isn’t just a visual fad — it actually improves the processing speed of apps because there’s less information to load. “Drawing solid colors on the screen is faster and more memory efficient than loading and displaying gradients from image files on disk,” Instagram android developer Tyler Kieft said in the blog post. “With these goals in mind, we rewrote every single screen in the app.”

Then, the developers shifted the user interface so it would adjust depending on the size of the phone. It would analyze dots per inch on the screen and move frames accordingly. That way, users with big phones wouldn’t have to struggle to reach the editing and camera buttons.

To shorten the time it takes to start the app, the team removed certain title and tab bar elements from loading on launch, narrowing the number needed from 29 to eight. That cut the startup time on the app by 120 milliseconds. Other changes meant that the size of the application package was halved. “This is a huge benefit for users who pay for data by the kilobyte and must wait for the app to download over really slow networks,” Kieft explained.

Lastly, Instagram tackled the app’s performance from an infrastructure perspective. The team rewrote “inefficient” code and “lazy-loaded” certain elements like photos and videos to speed up the app launch time. The “News” information — users’ notifications such as who liked their photos — took a lot of processing power, so Instagram shifted it to load after the main feed.

The end result of all the work is that Instagram managed to cut the app startup time in half for Android users.


5 Responses to “The behind-the-scenes look at how Instagram made its Android app run twice as fast”

  1. Joe Michels

    So what Marty is saying, the Instagram engineers and UI designers are a bunch of idiots, for taking an entire year, to redesign and re-implement their Android app to support the large Android eco system. If they only knew what they were doing in the first place, their app would be perfect the first time they developed it.

  2. As an Android app developer the improvements you list are not difficult to nor they of ordinary. As Android being a “massive pain” for even the most established companies, well that’s just false information. There are standards for app development that should be followed for platform.

    I feel like this article was at best one sided and at worst just a cry baby shot at Android. Did you write it on your iPad, I rest my case.

  3. Ralph Haygood

    Hmm…I don’t doubt that was lots of work, assuming they started from code that made, um, regrettable choices . However, everything you’ve mentioned is established best practice among web application developers these days: flat colors (or at least CSS gradients, if you must have gradients), “responsive design” attentive to window size and pixel density, structurally simple pages, particularly on startup (rendered server-side when appropriate), and lazy loading of images, video, etc., including code.