Tweet
Tweet

Slide 1

Slide 1 text

@riggaroo Reducing Mobile Data Usage in your Apps Rebecca Franks @riggaroo

Slide 2

Slide 2 text

@riggaroo Rebecca Franks Senior Android Developer & Google Developer Expert DVT / DStv www.riggaroo.co.za @riggaroo

Slide 3

Slide 3 text

@riggaroo Why should we reduce data usage? Expensive Mobile Data

Slide 4

Slide 4 text

@riggaroo Why should we reduce data usage?

Slide 5

Slide 5 text

@riggaroo 3 Areas to improve Images Bundled App Server Interactions ☁

Slide 6

Slide 6 text

@riggaroo Server Interactions

Slide 7

Slide 7 text

@riggaroo Features of your API have a huge impact on performance of your app

Slide 8

Slide 8 text

@riggaroo Offline First Design

Slide 9

Slide 9 text

@riggaroo Every Request Counts.

Slide 10

Slide 10 text

@riggaroo Aggregate on the Backend

Slide 11

Slide 11 text

@riggaroo Design your API based on the usage of your app { "name": "Rebecca Franks”, "profileUrl": "http://riggaroo.co.za/image.jpg", "followers": 50, "repositories": [ { "name": "Book Dash Android App", "id": "bookdash-android-app" }, { "name": "MVP Example", "id": "mvp-example" } ] }

Slide 12

Slide 12 text

@riggaroo Strip unused information { login: "riggaroo", id: 9973046, avatar_url: "https://avatars.githubusercontent.com/u/9973046?v=3", gravatar_id: "", url: "https://api.github.com/users/riggaroo", html_url: "https://github.com/riggaroo", followers_url: "https://api.github.com/users/riggaroo/followers", following_url: "https://api.github.com/users/riggaroo/following{/other_user}", gists_url: "https://api.github.com/users/riggaroo/gists{/gist_id}", starred_url: "https://api.github.com/users/riggaroo/starred{/owner}{/repo}", subscriptions_url: "https://api.github.com/users/riggaroo/subscriptions", organizations_url: "https://api.github.com/users/riggaroo/orgs", repos_url: "https://api.github.com/users/riggaroo/repos", events_url: "https://api.github.com/users/riggaroo/events{/privacy}", received_events_url: "https://api.github.com/users/riggaroo/received_events", type: "User", site_admin: false, name: "Rebecca Franks", company: null, blog: "http://riggaroo.co.za", location: "Johannesburg, South Africa", email: null, hireable: null, bio: "Google Developer Expert for Android. Senior Android Developer based in South Africa. ", public_repos: 14, public_gists: 5, followers: 128, following: 13, created_at: "2014-11-27T06:32:40Z", updated_at: "2016-06-03T15:23:57Z" } { login: "riggaroo", id: 9973046, avatar_url: "https://avatars.githubusercontent.com/u/9973046?v=3", url: "https://api.github.com/users/riggaroo", html_url: "https://github.com/riggaroo", followers_url: "https://api.github.com/users/riggaroo/followers", following_url: "https://api.github.com/users/riggaroo/following{/other_user}", gists_url: "https://api.github.com/users/riggaroo/gists{/gist_id}", starred_url: "https://api.github.com/users/riggaroo/starred{/owner}{/repo}", repos_url: "https://api.github.com/users/riggaroo/repos", type: "User", site_admin: false, name: "Rebecca Franks", blog: "http://riggaroo.co.za", location: "Johannesburg, South Africa", bio: "Google Developer Expert for Android. Senior Android Developer based in South Africa. ", public_repos: 14, followers: 128, following: 13, }

Slide 13

Slide 13 text

@riggaroo GZIP your Data Ensure app is requesting GZIP

Slide 14

Slide 14 text

@riggaroo Enable HTTP Cache Cache-Control: max-stale=3600 private final OkHttpClient client; public CacheResponse(File cacheDirectory) throws Exception { int cacheSize = 10 * 1024 * 1024; // 10 MiB Cache cache = new Cache(cacheDirectory, cacheSize); client = new OkHttpClient.Builder() .cache(cache) .build(); }

Slide 15

Slide 15 text

@riggaroo Keeping user’s data fresh Any new data now? And now? What about now? Have some data Have the same data Have the same data ☁

Slide 16

Slide 16 text

@riggaroo Keeping user’s data fresh Give me the data Have some data Have the changed data ☁ Firebase Cloud Messaging Have the changed data

Slide 17

Slide 17 text

@riggaroo Be courteous Wait for ideal conditions - WiFi + Battery Defer unimportant operations

Slide 18

Slide 18 text

@riggaroo GcmNetworkManager •Schedule one-off vs. periodic tasks. •Automatic back-off and failure retry. •Awareness of network activity. •Awareness of device charging state. •Persistence of tasks across boot.

Slide 19

Slide 19 text

@riggaroo Give your user options… Sync Frequency Image Quality

Slide 20

Slide 20 text

@riggaroo Try new things Push Messaging

Slide 21

Slide 21 text

@riggaroo Tools to monitor Data Usage

Slide 22

Slide 22 text

@riggaroo Stetho by Facebook (Android) Allows you to use Chrome Developer Tools with Android Apps - Monitor requests - Edit Preferences & Databases

Slide 23

Slide 23 text

@riggaroo Charles Proxy •HTTP Request Proxying •View Web Traffic •Throttle connections •Intercept Traffic •https://www.charlesproxy.com/

Slide 24

Slide 24 text

@riggaroo

Slide 25

Slide 25 text

@riggaroo Android Network Monitor How and when your app transfers data

Slide 26

Slide 26 text

@riggaroo Emulator

Slide 27

Slide 27 text

@riggaroo Images

Slide 28

Slide 28 text

@riggaroo Don’t download what your users wont see.

Slide 29

Slide 29 text

@riggaroo Don’t download large images for small areas fb.com/image1.jpg?w=150 fb.com/image1.jpg?w=400

Slide 30

Slide 30 text

@riggaroo Look at Device Pixel Ratio fb.com/image.jpg?dpi=0.75 fb.com/image.jpg?dpi=2.0 Android Low DPI Retina Display

Slide 31

Slide 31 text

@riggaroo Don’t download images twice. Cache them.

Slide 32

Slide 32 text

@riggaroo Download lower quality on slower networks.

Slide 33

Slide 33 text

@riggaroo Image Compression Always use *SAVE FOR WEB*

Slide 34

Slide 34 text

@riggaroo zopfliPNG ImageMagick PNGQuant PNGWolf PunyPNG Defluff TinyPNG PNGGauntlet TruePNG

Slide 35

Slide 35 text

@riggaroo 1.2MB 183KB 201KB aaptOptions { cruncherEnabled = false } Custom Compression AAPT

Slide 36

Slide 36 text

@riggaroo • VectorDrawable / ShapeDrawable • WebP (4.1 above) • Transparent WebP - (4.4 above) • JPEG • PNG Image Types Supported in Android

Slide 37

Slide 37 text

@riggaroo VectorDrawable WebP JPG PNG Can the image be a VD? Do you support WebP? Does it need transparency? Is it simple or complex? Yes Yes Yes Simple Complex No No No How to decide what type of image to use:

Slide 38

Slide 38 text

@riggaroo Bundled Package Size Size of your APK

Slide 39

Slide 39 text

@riggaroo What is packaged in our APK? • App Code • classes.dex • Native Code (libs/ /*.so) • Resources • res/ • resources.arsc (uncompressed!) • Misc • assets/ • META-INF/ • AndroidManifest .xml .apk

Slide 40

Slide 40 text

@riggaroo APK Analyser • Demo

Slide 41

Slide 41 text

@riggaroo Removing Unused Code buildTypes { release { minifyEnabled true shrinkResources true proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-project.txt' } Enable ProGuard + Test

Slide 42

Slide 42 text

@riggaroo Removing Unused Code android { defaultConfig { ... resConfigs "en", "zu" } } Remove unused configurations 0.35MB SAVED 4MB -> 3.65MB =

Slide 43

Slide 43 text

@riggaroo Build Variants • Split APK up • Architecture • Screen Size • Downside - many APKs to test android { ... splits { abi { enable true reset() include 'x86', 'armeabi-v7a', 'mips' universalApk true } } }

Slide 44

Slide 44 text

@riggaroo ArscBlamer • resources.arsc file gets big • ArscBlamer is a command-line tool that can parse an Android app's resources.arsc file and extract useful, actionable information about its contents. • https://github.com/google/android-arscblamer

Slide 45

Slide 45 text

@riggaroo REMEMBER Every Request Counts Reduce your size of your app Optimise your image usage

Slide 46

Slide 46 text

@riggaroo Thank you. www.riggaroo.co.za

Slide 47

Slide 47 text

@riggaroo Links • Image Compression for Android Developers- https://www.youtube.com/ watch?v=r_LpCi6DQME • APK Analyser - http://android-developers.blogspot.co.za/2016/05/ android-studio-22-preview-new-ui.html • Network Monitor - https://developer.android.com/studio/profile/am- network.html • Put your APK on a diet - https://www.youtube.com/watch?v=xctGIB81D2w • http://www.slideshare.net/fbrunel/mobile-api-design-techniques-26952520 • https://code.facebook.com/posts/872547912839369/improving-facebook-s- performance-on-android-with-flatbuffers/ • https://medium.com/@duhroach/smaller-pngs-and-android-s-aapt- tool-4ce38a24019d#.vi5zl3tjr