Tweet
Tweet

Slide 1

Slide 1 text

Optimizing Android Apps
 for Emerging Markets

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

2009 2010 2011 2012 2013 10,000

Slide 4

Slide 4 text

Active Devices (m) Android is growing like crazy Source: @BenedictEvans, Apple, Google, a16z 200 800 1200 0 1000 600 400 Dec Jun ’07 Jun ’08 Dec 1400 Dec Jun ’09 Jun ’10 Dec Dec Jun ’11 Jun ’12 Dec Dec Jun ’13 Jun ’14 iOS Android

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

Drastic Mobile Differences 1 PHONES New vs. Old Latest vs. Last Gen $600 vs. $100

Slide 9

Slide 9 text

Drastic Mobile Differences 2 DATA PLANS Contract vs. Prepaid $-per-GB vs. Time Windows Unreliable Income

Slide 10

Slide 10 text

Drastic Mobile Differences 3 CELL NETWORKS LTE vs. 3g Well-Maintained vs. Congested 
 Low or Slow Wifi Availability

Slide 11

Slide 11 text

Small Screen Bad Network Slow Phone

Slide 12

Slide 12 text

ANDROID YEAR CLASS In what year would this phone have been considered high-end?

Slide 13

Slide 13 text

Most popular devices by year class 2008 2009 2010 2011 2012 2013 2014 LG Optimus ME! Single Core / 140 MB LDPI Galaxy Y! Single Core / 290 MB LDPI LG Optimus L5! Single Core / 512 MB MDPI Galaxy S2! Dual Core / 1 GB HDPI Galaxy S3! Dual Core / 2 GB XHDPI Galaxy S4! Quad Core / 2 GB XXHDPI Galaxy Note 3! Quad Core / 3 GB XXHDPI

Slide 14

Slide 14 text

% weekly users who experience a crash Relative Crashiness by Year Class 2013 2012 2011 2010 2009 3.1x 2.2x 1.4x 1x 1x 1x 1x

Slide 15

Slide 15 text

Comment Flyout Redesign

Slide 16

Slide 16 text

Comment Flyout Redesign

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

1080 x 1920 720 x 1280 (27%) 540 x 960 (7%) 480 x 800 320 x 480 240 x 320

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

70.6% US 3G Penetration ! 280 ms Average Latency 6.9% India 3G Penetration ! 500 ms Average Latency 38.6% Brazil 3G Penetration ! 850+ ms Average Latency

Slide 22

Slide 22 text

Takeaways 2 You are not like other people 1 Android as the world’s platform 3 Make things good with smart segmentation

Slide 23

Slide 23 text

Tuning Facebook for Constrained Networks

Slide 24

Slide 24 text

TUNING FACEBOOK FOR CONSTRAINED NETWORKS

Slide 25

Slide 25 text

Agenda Image Download Sizes Network Quality Detection Image Download Sizes Prefetching Content

Slide 26

Slide 26 text

Image Downloads Dominate Images Graph Other in Messenger 65% in Facebook 
 for Android 85%

Slide 27

Slide 27 text

Image Scaling Request an appropriate image size for the viewport •Thumbnail, preview, full image •Users may never need more than a thumbnail •Low-res devices may never need a full resolution image

Slide 28

Slide 28 text

Image Scaling

Slide 29

Slide 29 text

Image Scaling Image 
 Width File 
 Size Size Reduction 240 11KB 86% 480 33KB 58% 720 61KB 23% 960 79KB *

Slide 30

Slide 30 text

Downloading too many sizes can use more data Smaller files download quickly A bit of a balancing act: Image Scaling

Slide 31

Slide 31 text

Image Formats JPEG WEBP PNG GIF Lossy Compression Lossless Transparency Animation * of images sent to Facebook & Messenger for Android are WebP format 90%

Slide 32

Slide 32 text

Image Compression •WebP saves 7% download size over JPEG for equivalent MS-SSIM results •By moving to WebP and tuning quality parameters, we saved 30% over JPEG •No noticeable change in user perceived quality

Slide 33

Slide 33 text

Image Compression JPEG! 86KB WebP! 63KB

Slide 34

Slide 34 text

Image Compression •WebP also supports transparency and animation •Save 80% over PNG – beneficial for stickers PNG 132KB WebP 29KB

Slide 35

Slide 35 text

Image Compression WebP support on different Android OS versions: •Use native WebP decoder on Android 4.2 and later •Use libwebp and libpng to transcode to back JPEG and PNG on older Alternative to avoid transcoding cost: use JPEG with mozjpeg 2.0 •Compatible with JPEG

Slide 36

Slide 36 text

Network Quality Detection

Slide 37

Slide 37 text

Network Round Trip Times Edge (2G) HSPA (3G) LTE WiFi 0ms 500ms 1000ms 1500ms 2000ms US India Brazil SLOWER 2-3x

Slide 38

Slide 38 text

Network Quality Detection Monitor quality of current network connection: •Measure throughput on all large network transfers (images) •Servers provide Round Trip Time (RTT) estimates with each response •Client maintains a moving average of these values Poor <150kbps Moderate 150-600kbps Good 600-2000kbps Excellent >2000kbps

Slide 39

Slide 39 text

Network Quality Detection Connection quality values are provided to features 
 to dynamically adjust behavior Examples: •Increase/decrease image compression •Issue more/fewer parallel network requests •Disable/enable auto-play video •Pre-fetch more content

Slide 40

Slide 40 text

Air Traffic Control

Slide 41

Slide 41 text

Air Traffic Control

Slide 42

Slide 42 text

Prefetching Content

Slide 43

Slide 43 text

Pre-fetching Content •Pre-fetching can be important on a high-latency connection to achieve good performance •Issue network fetch request early during app startup •Consider prioritizing network requests so that immediate user requests aren’t blocked by pre-fetching requests •Carefully monitor for over-fetching and judicious use of resources (e.g. data usage, CPU, battery, storage space)

Slide 44

Slide 44 text

Summary •Scale images appropriately for the viewport before downloading •Tweak image compression knobs to further decrease image size •Adjust app behavior on slower networks — networks outside of the US can be 2-3 times slower

Slide 45

Slide 45 text

Instagram on Typical Android

Slide 46

Slide 46 text

Design Cold Start Design Agenda

Slide 47

Slide 47 text

April 2012

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

Make Instagram… Goal: Simplify and Polish 1 Flat 2 Screen Space Conscious 3 Beautiful

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

WHY FLAT DESIGN?

Slide 56

Slide 56 text

•Colorize assets programmatically •“New feature” in Android L •Actually possible in all versions of Android (and iOS!) •ColorFilter can be applied to Drawable, ImageView Asset Tinting

Slide 57

Slide 57 text

Why Tint Assets? •Ship fewer assets -> APK size is smaller •Load fewer assets -> UI displays faster, less memory used •Faster iteration

Slide 58

Slide 58 text

Asset Loading 6 23 3 5

Slide 59

Slide 59 text

Asset Loading: Cold Start Impact faster on all devices 120ms

Slide 60

Slide 60 text

Redesign: App Reviews "In terms of both speed and design of the new update is a very good" "Simply Love! I love and its new design makes it even easier to share every moment. Easy to use, great design." "The new design is perf. I love it ὑ" "Excellent update design! insanely good!"

Slide 61

Slide 61 text

Cold Start

Slide 62

Slide 62 text

Cold Start: Numbers 1.5s 6.5.0 3s 4.2.4 400ms 6.5.0 750ms 4.2.4 Galaxy Y Galaxy S5

Slide 63

Slide 63 text

How to Fix Cold Start 3 Repeat 
 Step 1 1 Profile 
 the app •Method tracing •Timing statements 2 Fix the slowest thing •Remove items from cold start path •Rewrite slow code •Defer to background thread

Slide 64

Slide 64 text

Need to be created once and initialized App-Wide Singletons HTTP Client Cookie Store Image Cache Video Cache

Slide 65

Slide 65 text

Two-Part Lazy-Loading Create object on UI thread Defer hard work to background thread •Cache - open and read disk storage •Http Client - load certificates •Cookie store - deserialize and decode UI appears on screen much faster

Slide 66

Slide 66 text

Instagram Cold Start Thread Trace

Slide 67

Slide 67 text

Instagram Cold Start Thread Trace News Webview

Slide 68

Slide 68 text

News •Originally a webview •Product requirement - load at startup •Webview has separate network stack, image cache •After native conversion - 30% drop in cold start time across all Android versions

Slide 69

Slide 69 text

Lessons Learned •Fast cold start times are achievable. ! •Use pixels judiciously. ! •Mobile phones simple design.