2014 DroidCon NYC: Improving Facebook and Instagram in Emerging Markets

Over the past 18 months, a team of Facebook engineers have been working on the experience of using our flagship apps on Android in emerging markets. This talks goes into details of this project.

http://nyc.droidcon.com/2014/dcnyc/76/

Transcript

1. Optimizing Android Apps
 for Emerging Markets
3. 2009 2010 2011 2012 2013 10,000
4. 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
8. Drastic Mobile Differences 1 PHONES New vs. Old Latest vs. Last Gen $600 vs. $100
9. Drastic Mobile Differences 2 DATA PLANS Contract vs. Prepaid $-per-GB vs. Time Windows Unreliable Income
10. Drastic Mobile Differences 3 CELL NETWORKS LTE vs. 3g Well-Maintained vs. Congested 
 Low or Slow Wifi Availability
11. Small Screen Bad Network Slow Phone
12. ANDROID YEAR CLASS In what year would this phone have been considered high-end?
13. 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
14. % 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
15. Comment Flyout Redesign
16. Comment Flyout Redesign
18. 1080 x 1920 720 x 1280 (27%) 540 x 960 (7%) 480 x 800 320 x 480 240 x 320
21. 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
22. Takeaways 2 You are not like other people 1 Android as the world’s platform 3 Make things good with smart segmentation
23. Tuning Facebook for Constrained Networks
24. TUNING FACEBOOK FOR CONSTRAINED NETWORKS
25. Agenda Image Download Sizes Network Quality Detection Image Download Sizes Prefetching Content
26. Image Downloads Dominate Images Graph Other in Messenger 65% in Facebook 
 for Android 85%
27. 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
28. Image Scaling
29. Image Scaling Image 
 Width File 
 Size Size Reduction 240 11KB 86% 480 33KB 58% 720 61KB 23% 960 79KB *
30. Downloading too many sizes can use more data Smaller files download quickly A bit of a balancing act: Image Scaling
31. Image Formats JPEG WEBP PNG GIF Lossy Compression Lossless Transparency Animation * of images sent to Facebook & Messenger for Android are WebP format 90%
32. 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
33. Image Compression JPEG! 86KB WebP! 63KB
34. Image Compression •WebP also supports transparency and animation •Save 80% over PNG – beneficial for stickers PNG 132KB WebP 29KB
35. 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
36. Network Quality Detection
37. Network Round Trip Times Edge (2G) HSPA (3G) LTE WiFi 0ms 500ms 1000ms 1500ms 2000ms US India Brazil SLOWER 2-3x
38. 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
39. 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
40. Air Traffic Control
41. Air Traffic Control
42. Prefetching Content
43. 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)
44. 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
45. Instagram on Typical Android
46. Design Cold Start Design Agenda
47. April 2012
50. Make Instagram… Goal: Simplify and Polish 1 Flat 2 Screen Space Conscious 3 Beautiful
55. WHY FLAT DESIGN?
56. •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
57. Why Tint Assets? •Ship fewer assets -> APK size is smaller •Load fewer assets -> UI displays faster, less memory used •Faster iteration
58. Asset Loading 6 23 3 5
59. Asset Loading: Cold Start Impact faster on all devices 120ms
60. 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!"
61. Cold Start
62. Cold Start: Numbers 1.5s 6.5.0 3s 4.2.4 400ms 6.5.0 750ms 4.2.4 Galaxy Y Galaxy S5
63. 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
64. Need to be created once and initialized App-Wide Singletons HTTP Client Cookie Store Image Cache Video Cache
65. 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
66. Instagram Cold Start Thread Trace
67. Instagram Cold Start Thread Trace News Webview
68. 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
69. Lessons Learned •Fast cold start times are achievable. ! •Use pixels judiciously. ! •Mobile phones simple design.