Speeding Up your Mobile HTML5 Experience

Slide 1

Slide 1 text

speeding up your mobile html5 experience max firtman @firt firt.mobi June, 18, 2013 Santa Clara, CA Tuesday, June 18, 13

Slide 2

Slide 2 text

mobile+web developer maximiliano firtman @ rt Tuesday, June 18, 13

Slide 3

Slide 3 text

Tuesday, June 18, 13

Slide 4

Slide 4 text

Tuesday, June 18, 13

Slide 5

Slide 5 text

questions yes, please QA at the end Tuesday, June 18, 13

Slide 6

Slide 6 text

performance + mobile + html5 1- Mobile & Performance 2- Measuring 3- e worst - with examples! :) 4- What to do... always 5- What to do... sometimes Tuesday, June 18, 13

Slide 7

Slide 7 text

DISCLAIMER iOS 7 Tuesday, June 18, 13

Slide 8

Slide 8 text

Tuesday, June 18, 13

Slide 9

Slide 9 text

1- mobile & performance Tuesday, June 18, 13

Slide 10

Slide 10 text

1- mobile & performance - e ecosystem in 2013 - HTML5 - What performance means - Diﬀerences Tuesday, June 18, 13

Slide 11

Slide 11 text

mobile ecosystem Tuesday, June 18, 13

Slide 12

Slide 12 text

web platforms Tuesday, June 18, 13

Slide 13

Slide 13 text

How many browsers do you know on desktop? web platforms Tuesday, June 18, 13

Slide 14

Slide 14 text

5 web platforms Tuesday, June 18, 13

Slide 15

Slide 15 text

How many browsers do you know on mobile? web platforms Tuesday, June 18, 13

Slide 16

Slide 16 text

... web platforms Tuesday, June 18, 13

Slide 17

Slide 17 text

Tuesday, June 18, 13

Slide 18

Slide 18 text

Android Browser Tuesday, June 18, 13

Slide 19

Slide 19 text

Google Chrome Tuesday, June 18, 13

Slide 20

Slide 20 text

Google Chrome Android Tuesday, June 18, 13

Slide 21

Slide 21 text

Google Chrome iOS Tuesday, June 18, 13

Slide 22

Slide 22 text

Safari on iOS Tuesday, June 18, 13

Slide 23

Slide 23 text

Opera Mobile Mini Tuesday, June 18, 13

Slide 24

Slide 24 text

Firefox Tuesday, June 18, 13

Slide 25

Slide 25 text

Firefox OS Tuesday, June 18, 13

Slide 26

Slide 26 text

Internet Explorer Tuesday, June 18, 13

Slide 27

Slide 27 text

BlackBerry Browser 5-7.x PlayBook BB10 Tuesday, June 18, 13

Slide 28

Slide 28 text

Nokia Browser MeeGo Symbian Series 40 Tuesday, June 18, 13

Slide 29

Slide 29 text

Silk Tuesday, June 18, 13

Slide 30

Slide 30 text

should I continue? ( ) Tuesday, June 18, 13

Slide 31

Slide 31 text

Cloud-based browsers web platforms Tuesday, June 18, 13

Slide 32

Slide 32 text

And it’s not just browsers! web platforms Tuesday, June 18, 13

Slide 33

Slide 33 text

Web View web platforms Tuesday, June 18, 13

Slide 34

Slide 34 text

Web View web platforms Tuesday, June 18, 13

Slide 35

Slide 35 text

Web View web platforms Tuesday, June 18, 13

Slide 36

Slide 36 text

Web View web platforms Tuesday, June 18, 13

Slide 37

Slide 37 text

e web view is diﬀerent web platforms Tuesday, June 18, 13

Slide 38

Slide 38 text

Tuesday, June 18, 13

Slide 39

Slide 39 text

“change is the only constant“ Heraclitus Tuesday, June 18, 13

Slide 40

Slide 40 text

what can we do with html5 Tuesday, June 18, 13

Slide 41

Slide 41 text

mobile 1- websites 2- apps Tuesday, June 18, 13

Slide 42

Slide 42 text

mobile 1- websites 2- apps Tuesday, June 18, 13

Slide 43

Slide 43 text

mobile 1- websites 2- apps Tuesday, June 18, 13

Slide 44

Slide 44 text

we can create 1- websites Tuesday, June 18, 13

Slide 45

Slide 45 text

Using the browser URL Web Server 1- websites we can create Tuesday, June 18, 13

Slide 46

Slide 46 text

we can create 2- webapps Tuesday, June 18, 13

Slide 47

Slide 47 text

Browser to install Full-screen Icon on home screen Web Server 2- webapps we can create Tuesday, June 18, 13

Slide 48

Slide 48 text

full screen webapps home screen webapps webapps are also known as ( ) Tuesday, June 18, 13

Slide 49

Slide 49 text

we can create 3- native webapps Tuesday, June 18, 13

Slide 50

Slide 50 text

Package, compile, sign Icon on home screen App Store No web server 3- native webapps we can create Tuesday, June 18, 13

Slide 51

Slide 51 text

hybrid apps packaged webapps native webapps are also known as ( ) Tuesday, June 18, 13

Slide 52

Slide 52 text

mobile 1- websites 2- apps Tuesday, June 18, 13

Slide 53

Slide 53 text

a- native b- webapps c- native webapps mobile 1- websites 2- apps Tuesday, June 18, 13

Slide 54

Slide 54 text

Tuesday, June 18, 13

Slide 55

Slide 55 text

performance and mobile Tuesday, June 18, 13

Slide 56

Slide 56 text

Most important feature Not just load time Perception Whole experience performance & mobile Tuesday, June 18, 13

Slide 57

Slide 57 text

load 1s fast feedback 100ms fast perception Tuesday, June 18, 13

Slide 58

Slide 58 text

load 3s ok, I'm still there feedback 1s ok, I'm still there perception Tuesday, June 18, 13

Slide 59

Slide 59 text

differences Tuesday, June 18, 13

Slide 60

Slide 60 text

CPU and GPU Memory Networks: cellular vs wi differences Tuesday, June 18, 13

Slide 61

Slide 61 text

We have 4G! We don't need to worry about performance... ( ) Tuesday, June 18, 13

Slide 62

Slide 62 text

Bandwidth (Mbps) cellular networks 2G 0.1-0.4 3G 0.7-5 4G 1-50 Tuesday, June 18, 13

Slide 63

Slide 63 text

Latency (ms) cellular networks 2G 300 - 1000 3G 150 - 450 4G 100 - 180 Tuesday, June 18, 13

Slide 64

Slide 64 text

Latency (ms) cellular networks 2G 300 - 1000 3G 4G 150 - 450 100 - 180 Home wired connections in US: 20-45 Tuesday, June 18, 13

Slide 65

Slide 65 text

mobify.com Tuesday, June 18, 13

Slide 66

Slide 66 text

latency request bandwidth Tuesday, June 18, 13

Slide 67

Slide 67 text

Active Pending Idle radio state Tuesday, June 18, 13

Slide 68

Slide 68 text

From Idle to Active cellular networks 3G < 2.5 s 4G < 100 ms Tuesday, June 18, 13

Slide 69

Slide 69 text

Tuesday, June 18, 13

Slide 70

Slide 70 text

1- mobile & performance - Complex will change - not just websites - not just load time - cellular networks Tuesday, June 18, 13

Slide 71

Slide 71 text

2- measuring on mobile Tuesday, June 18, 13

Slide 72

Slide 72 text

2- measuring on mobile - the target - tools - HTML5 APIs Tuesday, June 18, 13

Slide 73

Slide 73 text

Simulator Emulator Real device target Tuesday, June 18, 13

Slide 74

Slide 74 text

simulators DEMO Tuesday, June 18, 13

Slide 75

Slide 75 text

emulators http://emulato.rs Tuesday, June 18, 13

Slide 76

Slide 76 text

real device Open Device Lab Virtual Lab Your own Lab Tuesday, June 18, 13

Slide 77

Slide 77 text

Remote inspectors • BlackBerry Smartphones 7/10 • Google Chrome for Android • Opera Mobile • Safari on iOS 6+ • Firefox (Android / FFOS) tools Tuesday, June 18, 13

Slide 78

Slide 78 text

Remote inspectors tools DEMO Tuesday, June 18, 13

Slide 79

Slide 79 text

Proxies / Network sniﬀers • Charles Proxy • Fiddler • PCapPerf tools Tuesday, June 18, 13

Slide 80

Slide 80 text

Proxies on the device • jsHybugger for Android • HttpWatch for iOS tools Tuesday, June 18, 13

Slide 81

Slide 81 text

Connection simulators • Charles Proxy • Net Limiter for Windows • SlowyApp tools Tuesday, June 18, 13

Slide 82

Slide 82 text

Navigation Timing API • Android 4.0+, Chrome, BB10, IE9+, Firefox • window.performance • Timestamps available html5 apis Tuesday, June 18, 13

Slide 83

Slide 83 text

Navigation Timing API html5 apis DEMO Tuesday, June 18, 13

Slide 84

Slide 84 text

Resource Timing API • Chrome only html5 apis Tuesday, June 18, 13

Slide 85

Slide 85 text

Network Information API • Old spec: navigator.connection.type Android Browser / Apache Cordova • New spec: navigator.connection.bandwidth BlackBerry 10 / Firefox html5 apis Tuesday, June 18, 13

Slide 86

Slide 86 text

2- measuring on mobile - measure on real devices only - tools: remote debuggers, proxies - HTML5 APIs Tuesday, June 18, 13

Slide 87

Slide 87 text

3- the worst Tuesday, June 18, 13

Slide 88

Slide 88 text

3- the worst - redirects - requests - design & usability - javascript - responsive web design? Tuesday, June 18, 13

Slide 89

Slide 89 text

Redirects • From 150 to 1000 ms per redirect • mydomain.com -> m.mydomain.com • URL shorteners • It can be worst! the worst Tuesday, June 18, 13

Slide 90

Slide 90 text

Redirections the worst DEMO Tuesday, June 18, 13

Slide 91

Slide 91 text

Redirections the worst aa.com -> www.aa.com -> www.aa.com/homePage.do -> mobile.aa.com -> www.aa.com/mt -> www.aa.com/mt/homePage.do Tuesday, June 18, 13

Slide 92

Slide 92 text

Redirections • From 1 to 5s the worst Tuesday, June 18, 13

Slide 93

Slide 93 text

the worst Tuesday, June 18, 13

Slide 94

Slide 94 text

idontwantyourfuckingapp.tumblr.com Tuesday, June 18, 13

Slide 95

Slide 95 text

Requests • Best -> no requests • Remember latency and idle status • Keep them to the minimum, really! the worst Tuesday, June 18, 13

Slide 96

Slide 96 text

Requests • Donate $50 per request the worst Tuesday, June 18, 13

Slide 97

Slide 97 text

Usability and Design • Be mobile • Careful with blending • Test and measure • e designer is a better enemy the worst Tuesday, June 18, 13

Slide 98

Slide 98 text

JavaScript • Really expensive • Blocks downloads and responsiveness • Repaint and DOM manipulation, the worst • Too frequent timers? mmmm • Frameworks... oh, frameworks.... the worst Tuesday, June 18, 13

Slide 99

Slide 99 text

Responsive Web Design the worst Tuesday, June 18, 13

Slide 100

Slide 100 text

Responsive Web Design the worst Oh, do we need to talk about this? Tuesday, June 18, 13

Slide 101

Slide 101 text

Responsive Web Design the worst DEMO Tuesday, June 18, 13

Slide 102

Slide 102 text

Brad Frost "Your visitors don’t give a shit if your site is responsive." the worst Tuesday, June 18, 13

Slide 103

Slide 103 text

Responsive Web Design • Don't use it just because it's cool • RWD is great on some situations • RWD is terrible on other situations • Add some server-side logic -> RESS the worst Tuesday, June 18, 13

Slide 104

Slide 104 text

RWD the worst for mobile performance, the best is not always Tuesday, June 18, 13

Slide 105

Slide 105 text

AWD the worst for mobile performance, the best is Tuesday, June 18, 13

Slide 106

Slide 106 text

Agressive Web Design the worst for mobile performance, the best is Tuesday, June 18, 13

Slide 107

Slide 107 text

3- the worst - don't redirect, don't stop your user - avoid requests at all cost - balance design, get a new enemy - keep javascript at the minimum - responsive web design? Tuesday, June 18, 13

Slide 108

Slide 108 text

4- what to do always Tuesday, June 18, 13

Slide 109

Slide 109 text

4- what to do always - remembering last chapter - javascript frameworks - classic techniques - improve speed Tuesday, June 18, 13

Slide 110

Slide 110 text

Remembering... • don´t redirect • keep your requests to the minimum • cool not always goes with performance what to do always Tuesday, June 18, 13

Slide 111

Slide 111 text

JavaScript frameworks • do you need them?, really? • customize your build to your needs • use alternatives what to do always Tuesday, June 18, 13

Slide 112

Slide 112 text

Classic techniques • Enable GZIP for text-based les • Compress CSS & JS • Only the CSS and JS you are using • reduce DNS lookup • stylesheets at the top what to do always Tuesday, June 18, 13

Slide 113

Slide 113 text

Classic techniques • script at the bottom, or better: * async loading * use html5 new attributes what to do always HTML5 Tuesday, June 18, 13

Slide 114

Slide 114 text

Reduce the DOM • Keep it really simple • For in nite scrolling • Use object pools • Use iframes what to do always Tuesday, June 18, 13

Slide 115

Slide 115 text

Improve perception • Flush early, be ready asap • If you have an external CSS, ush aer it • Hide URL bar asap • Pre-fetch and batch requests on progressive loading what to do always Tuesday, June 18, 13

Slide 116

Slide 116 text

Improve perception • mouse vs touch events • e 300ms delay • xed viewport? • FastClick solution what to do always Tuesday, June 18, 13

Slide 117

Slide 117 text

4- what to do always - follow classic techniques, use desktop tools - create a perception of speed - measure, test, measure test Tuesday, June 18, 13

Slide 118

Slide 118 text

5- what to do sometimes Tuesday, June 18, 13

Slide 119

Slide 119 text

Most of the solutions and best practices are not for every kind of html5 project ( ) Tuesday, June 18, 13

Slide 120

Slide 120 text

5- what to do sometimes - improve the experience - server communication - javascript - media - responsive images Tuesday, June 18, 13

Slide 121

Slide 121 text

Improve experience what to do sometimes use Application Cache • perception of immediate loading • only for html and basic resources • updating is still a problem • buggy Tuesday, June 18, 13

Slide 122

Slide 122 text

Improve experience what to do sometimes HD / SD version • make a decision based on the context • allow the user to switch to a light version • copy YouTube idea Tuesday, June 18, 13

Slide 123

Slide 123 text

Improve experience what to do sometimes Zombie tab for iOS DEMO Tuesday, June 18, 13

Slide 124

Slide 124 text

Network communication what to do sometimes Server-side events • keep an HTTP request opened • re-connects automatically • send contents in batch (in JSON/XML) Tuesday, June 18, 13

Slide 125

Slide 125 text

Network communication what to do sometimes Web Sockets • less overhead • bidirectional • use with care: battery, reliability Tuesday, June 18, 13

Slide 126

Slide 126 text

Network communication what to do sometimes Data URI • embrace embedded content • use it with storage APIs for caching • much better than a request Tuesday, June 18, 13

Slide 127

Slide 127 text

Network communication what to do sometimes Custom Cache • Up to 5x faster than standard browser cache • Cookies for server-side detection or a light JS detection framework • Up to 2.5Mb safe (4Mb using compression) Tuesday, June 18, 13

Slide 128

Slide 128 text

Custom cache browser server request (no cookies) response full html inline images css styles javascript code stores resources in localStorage and create cookie Tuesday, June 18, 13

Slide 129

Slide 129 text

Custom cache ﬁrst load browser server request (no cookies) response full html inline images css styles javascript code stores resources in localStorage and create cookie Tuesday, June 18, 13

Slide 130

Slide 130 text

Custom cache browser server request (with cookies) response basic html basic javascript updated resources Tuesday, June 18, 13

Slide 131

Slide 131 text

Custom cache second load browser server request (with cookies) response basic html basic javascript updated resources Tuesday, June 18, 13

Slide 132

Slide 132 text

Network communication what to do sometimes HTTP 2.0 • Near future • Today: SPDY; Chrome Tuesday, June 18, 13

Slide 133

Slide 133 text

JavaScript what to do sometimes • Web Workers var w = new Worker("worker.js"); w.addEventListener("message", function(e) { }); w.postMessage("Hi Worker!") JAVASCRIPT Tuesday, June 18, 13

Slide 134

Slide 134 text

JavaScript what to do sometimes • Geolocation cache navigator.geolocation .getCurrentPosition(cbOK, cbKO, { maximumAge: 60000 }); JAVASCRIPT Tuesday, June 18, 13

Slide 135

Slide 135 text

Media what to do sometimes • CSS Sprites vs. inline elements vs. JSON Resource library Tuesday, June 18, 13

Slide 136

Slide 136 text

Media what to do sometimes • Always use CSS transitions/animations when possible • On games and user-based animations, ask for Animation Timing API (requestAnimationFrame) • Use Page Visibility API to pause/resume Animations Tuesday, June 18, 13

Slide 137

Slide 137 text

Media what to do sometimes • Using a 3D transform • Be careful; the GPU is also limited • Apple is not recommending this hack anymore Hardware acceleration Tuesday, June 18, 13

Slide 138

Slide 138 text

Media what to do sometimes • Progressive JPEGs • WebP • JPEG XR Alternative image formats Tuesday, June 18, 13

Slide 139

Slide 139 text

Media what to do sometimes • Blocks rendering -> performance issue • Remove characters from the font le • Use a web font loader • Fonts in Data URI on some platforms Custom fonts Tuesday, June 18, 13

Slide 140

Slide 140 text

Screen densities 300 CSS pixels 300 1.00 390 1.30 450 1.50 600 2.00 672 2.24 900 3.00 device px px ratio what to do sometimes Tuesday, June 18, 13

Slide 141

Slide 141 text

Screen densities using vector images

@font-face {} what to do sometimes Tuesday, June 18, 13

Slide 142

Slide 142 text

Screen densities using javascript if (window.devicePixelRatio > 1.5) { // change URL } what to do sometimes Tuesday, June 18, 13

Slide 143

Slide 143 text

Screen densities using css extensions #photoContainer { background-image: -webkit-image-set(url('photo-lo.png') 1x, url('photo-hi.png') 2x); width: 300px; height: 200px; } what to do sometimes Tuesday, June 18, 13

Slide 144

Slide 144 text

Screen densities using css media queries @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { } what to do sometimes Tuesday, June 18, 13

Slide 145

Slide 145 text

Screen densities • transfer, decoding time and memory usage • try and measure • For 1x, always image of 1x • For 2x: image of 2x, 1.5x? • For 3x: image of 2x? 3x?? what to do sometimes Tuesday, June 18, 13

Slide 146

Slide 146 text

5- what to do sometimes - improve the experience - server comunication - javascript - media - screen densities Tuesday, June 18, 13

Slide 147

Slide 147 text

Picture from Simon Howden freedigitalphotos.net! uf! we've covered a lot! Tuesday, June 18, 13

Slide 148

Slide 148 text

1- Mobile & Performance 2- Measuring 3- e worst 4- What to do... always 5- What to do... sometimes Tuesday, June 18, 13

Slide 149

Slide 149 text

performance and mobile - learn to measure - be simple, be aggressive - test every technique - keep measuring - change is the only constant Tuesday, June 18, 13

Slide 150

Slide 150 text

you can reach a good experience Pictures)from)freedigitalphotos.net) thank you! ﬁrt.mobi twitter: @ﬁrt www.mobilexweb.com rt.mobi/pmw Tuesday, June 18, 13