Upgrade to Pro — share decks privately, control downloads, hide ads and more …

2014 DroidCon NYC: Improving Facebook and Inst...

Alex Sourov
September 21, 2014

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/

Alex Sourov

September 21, 2014
Tweet

More Decks by Alex Sourov

Other Decks in Technology

Transcript

  1. 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
  2. Drastic Mobile Differences 3 CELL NETWORKS LTE vs. 3g Well-Maintained

    vs. Congested 
 Low or Slow Wifi Availability
  3. 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
  4. % 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
  5. 1080 x 1920 720 x 1280 (27%) 540 x 960

    (7%) 480 x 800 320 x 480 240 x 320
  6. 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
  7. Takeaways 2 You are not like other people 1 Android

    as the world’s platform 3 Make things good with smart segmentation
  8. 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
  9. Image Scaling Image 
 Width File 
 Size Size Reduction

    240 11KB 86% 480 33KB 58% 720 61KB 23% 960 79KB *
  10. Downloading too many sizes can use more data Smaller files

    download quickly A bit of a balancing act: Image Scaling
  11. Image Formats JPEG WEBP PNG GIF Lossy Compression Lossless Transparency

    Animation * of images sent to Facebook & Messenger for Android are WebP format 90%
  12. 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
  13. Image Compression •WebP also supports transparency and animation •Save 80%

    over PNG – beneficial for stickers PNG 132KB WebP 29KB
  14. 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
  15. Network Round Trip Times Edge (2G) HSPA (3G) LTE WiFi

    0ms 500ms 1000ms 1500ms 2000ms US India Brazil SLOWER 2-3x
  16. 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
  17. 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
  18. 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)
  19. 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
  20. •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
  21. Why Tint Assets? •Ship fewer assets -> APK size is

    smaller •Load fewer assets -> UI displays faster, less memory used •Faster iteration
  22. 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!"
  23. 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
  24. Need to be created once and initialized App-Wide Singletons HTTP

    Client Cookie Store Image Cache Video Cache
  25. 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
  26. 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
  27. Lessons Learned •Fast cold start times are achievable. ! •Use

    pixels judiciously. ! •Mobile phones simple design.