Speeding Up your Mobile HTML5 Experience

Slides from the tutorial at Velocity Conference Santa Clara 2013

Transcript

1. speeding up your mobile html5 experience max firtman @firt firt.mobi June, 18, 2013 Santa Clara, CA Tuesday, June 18, 13
2. mobile+web developer maximiliano firtman @ rt Tuesday, June 18, 13
3. Tuesday, June 18, 13
4. Tuesday, June 18, 13
5. questions yes, please QA at the end Tuesday, June 18, 13
6. 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
7. DISCLAIMER iOS 7 Tuesday, June 18, 13
8. Tuesday, June 18, 13
9. 1- mobile & performance Tuesday, June 18, 13
10. 1- mobile & performance - e ecosystem in 2013 - HTML5 - What performance means - Differences Tuesday, June 18, 13
11. mobile ecosystem Tuesday, June 18, 13
12. web platforms Tuesday, June 18, 13
13. How many browsers do you know on desktop? web platforms Tuesday, June 18, 13
14. 5 web platforms Tuesday, June 18, 13
15. How many browsers do you know on mobile? web platforms Tuesday, June 18, 13
16. ... web platforms Tuesday, June 18, 13
17. Tuesday, June 18, 13
18. Android Browser Tuesday, June 18, 13
19. Google Chrome Tuesday, June 18, 13
20. Google Chrome Android Tuesday, June 18, 13
21. Google Chrome iOS Tuesday, June 18, 13
22. Safari on iOS Tuesday, June 18, 13
23. Opera Mobile Mini Tuesday, June 18, 13
24. Firefox Tuesday, June 18, 13
25. Firefox OS Tuesday, June 18, 13
26. Internet Explorer Tuesday, June 18, 13
27. BlackBerry Browser 5-7.x PlayBook BB10 Tuesday, June 18, 13
28. Nokia Browser MeeGo Symbian Series 40 Tuesday, June 18, 13
29. Silk Tuesday, June 18, 13
30. should I continue? ( ) Tuesday, June 18, 13
31. Cloud-based browsers web platforms Tuesday, June 18, 13
32. And it’s not just browsers! web platforms Tuesday, June 18, 13
33. Web View web platforms Tuesday, June 18, 13
34. Web View web platforms Tuesday, June 18, 13
35. Web View web platforms Tuesday, June 18, 13
36. Web View web platforms Tuesday, June 18, 13
37. e web view is different web platforms Tuesday, June 18, 13
38. Tuesday, June 18, 13
39. “change is the only constant“ Heraclitus Tuesday, June 18, 13
40. what can we do with html5 Tuesday, June 18, 13
41. mobile 1- websites 2- apps Tuesday, June 18, 13
42. mobile 1- websites 2- apps Tuesday, June 18, 13
43. mobile 1- websites 2- apps Tuesday, June 18, 13
44. we can create 1- websites Tuesday, June 18, 13
45. Using the browser URL Web Server 1- websites we can create Tuesday, June 18, 13
46. we can create 2- webapps Tuesday, June 18, 13
47. Browser to install Full-screen Icon on home screen Web Server 2- webapps we can create Tuesday, June 18, 13
48. full screen webapps home screen webapps webapps are also known as ( ) Tuesday, June 18, 13
49. we can create 3- native webapps Tuesday, June 18, 13
50. Package, compile, sign Icon on home screen App Store No web server 3- native webapps we can create Tuesday, June 18, 13
51. hybrid apps packaged webapps native webapps are also known as ( ) Tuesday, June 18, 13
52. mobile 1- websites 2- apps Tuesday, June 18, 13
53. a- native b- webapps c- native webapps mobile 1- websites 2- apps Tuesday, June 18, 13
54. Tuesday, June 18, 13
55. performance and mobile Tuesday, June 18, 13
56. Most important feature Not just load time Perception Whole experience performance & mobile Tuesday, June 18, 13
57. load 1s fast feedback 100ms fast perception Tuesday, June 18, 13
58. load 3s ok, I'm still there feedback 1s ok, I'm still there perception Tuesday, June 18, 13
59. differences Tuesday, June 18, 13
60. CPU and GPU Memory Networks: cellular vs wi differences Tuesday, June 18, 13
61. We have 4G! We don't need to worry about performance... ( ) Tuesday, June 18, 13
62. Bandwidth (Mbps) cellular networks 2G 0.1-0.4 3G 0.7-5 4G 1-50 Tuesday, June 18, 13
63. Latency (ms) cellular networks 2G 300 - 1000 3G 150 - 450 4G 100 - 180 Tuesday, June 18, 13
64. Latency (ms) cellular networks 2G 300 - 1000 3G 4G 150 - 450 100 - 180 Home wired connections in US: 20-45 Tuesday, June 18, 13
65. mobify.com Tuesday, June 18, 13
66. latency request bandwidth Tuesday, June 18, 13
67. Active Pending Idle radio state Tuesday, June 18, 13
68. From Idle to Active cellular networks 3G < 2.5 s 4G < 100 ms Tuesday, June 18, 13
69. Tuesday, June 18, 13
70. 1- mobile & performance - Complex will change - not just websites - not just load time - cellular networks Tuesday, June 18, 13
71. 2- measuring on mobile Tuesday, June 18, 13
72. 2- measuring on mobile - the target - tools - HTML5 APIs Tuesday, June 18, 13
73. Simulator Emulator Real device target Tuesday, June 18, 13
74. simulators DEMO Tuesday, June 18, 13
75. emulators http://emulato.rs Tuesday, June 18, 13
76. real device Open Device Lab Virtual Lab Your own Lab Tuesday, June 18, 13
77. Remote inspectors • BlackBerry Smartphones 7/10 • Google Chrome for Android • Opera Mobile • Safari on iOS 6+ • Firefox (Android / FFOS) tools Tuesday, June 18, 13
78. Remote inspectors tools DEMO Tuesday, June 18, 13
79. Proxies / Network sniffers • Charles Proxy • Fiddler • PCapPerf tools Tuesday, June 18, 13
80. Proxies on the device • jsHybugger for Android • HttpWatch for iOS tools Tuesday, June 18, 13
81. Connection simulators • Charles Proxy • Net Limiter for Windows • SlowyApp tools Tuesday, June 18, 13
82. Navigation Timing API • Android 4.0+, Chrome, BB10, IE9+, Firefox • window.performance • Timestamps available html5 apis Tuesday, June 18, 13
83. Navigation Timing API html5 apis DEMO Tuesday, June 18, 13
84. Resource Timing API • Chrome only html5 apis Tuesday, June 18, 13
85. 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
86. 2- measuring on mobile - measure on real devices only - tools: remote debuggers, proxies - HTML5 APIs Tuesday, June 18, 13
87. 3- the worst Tuesday, June 18, 13
88. 3- the worst - redirects - requests - design & usability - javascript - responsive web design? Tuesday, June 18, 13
89. 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
90. Redirections the worst DEMO Tuesday, June 18, 13
91. 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
92. Redirections • From 1 to 5s the worst Tuesday, June 18, 13
93. the worst Tuesday, June 18, 13
94. idontwantyourfuckingapp.tumblr.com Tuesday, June 18, 13
95. Requests • Best -> no requests • Remember latency and idle status • Keep them to the minimum, really! the worst Tuesday, June 18, 13
96. Requests • Donate $50 per request the worst Tuesday, June 18, 13
97. Usability and Design • Be mobile • Careful with blending • Test and measure • e designer is a better enemy the worst Tuesday, June 18, 13
98. 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
99. Responsive Web Design the worst Tuesday, June 18, 13
100. Responsive Web Design the worst Oh, do we need to talk about this? Tuesday, June 18, 13
101. Responsive Web Design the worst DEMO Tuesday, June 18, 13
102. Brad Frost "Your visitors don’t give a shit if your site is responsive." the worst Tuesday, June 18, 13
103. 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
104. RWD the worst for mobile performance, the best is not always Tuesday, June 18, 13
105. AWD the worst for mobile performance, the best is Tuesday, June 18, 13
106. Agressive Web Design the worst for mobile performance, the best is Tuesday, June 18, 13
107. 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
108. 4- what to do always Tuesday, June 18, 13
109. 4- what to do always - remembering last chapter - javascript frameworks - classic techniques - improve speed Tuesday, June 18, 13
110. Remembering... • don´t redirect • keep your requests to the minimum • cool not always goes with performance what to do always Tuesday, June 18, 13
111. JavaScript frameworks • do you need them?, really? • customize your build to your needs • use alternatives what to do always Tuesday, June 18, 13
112. 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
113. Classic techniques • script at the bottom, or better: * async loading * use html5 new attributes what to do always <script async defer src=""></script> HTML5 Tuesday, June 18, 13
114. Reduce the DOM • Keep it really simple • For in nite scrolling • Use object pools • Use iframes what to do always Tuesday, June 18, 13
115. 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
116. Improve perception • mouse vs touch events • e 300ms delay • xed viewport? • FastClick solution what to do always Tuesday, June 18, 13
117. 4- what to do always - follow classic techniques, use desktop tools - create a perception of speed - measure, test, measure test Tuesday, June 18, 13
118. 5- what to do sometimes Tuesday, June 18, 13
119. Most of the solutions and best practices are not for every kind of html5 project ( ) Tuesday, June 18, 13
120. 5- what to do sometimes - improve the experience - server communication - javascript - media - responsive images Tuesday, June 18, 13
121. 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
122. 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
123. Improve experience what to do sometimes Zombie tab for iOS DEMO Tuesday, June 18, 13
124. 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
125. Network communication what to do sometimes Web Sockets • less overhead • bidirectional • use with care: battery, reliability Tuesday, June 18, 13
126. 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
127. 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
128. 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
129. Custom cache first 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
130. Custom cache browser server request (with cookies) response basic html basic javascript updated resources Tuesday, June 18, 13
131. Custom cache second load browser server request (with cookies) response basic html basic javascript updated resources Tuesday, June 18, 13
132. Network communication what to do sometimes HTTP 2.0 • Near future • Today: SPDY; Chrome Tuesday, June 18, 13
133. 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
134. JavaScript what to do sometimes • Geolocation cache navigator.geolocation .getCurrentPosition(cbOK, cbKO, { maximumAge: 60000 }); JAVASCRIPT Tuesday, June 18, 13
135. Media what to do sometimes • CSS Sprites vs. inline elements vs. JSON Resource library Tuesday, June 18, 13
136. 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
137. 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
138. Media what to do sometimes • Progressive JPEGs • WebP • JPEG XR Alternative image formats Tuesday, June 18, 13
139. 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
140. 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
141. Screen densities using vector images <img src="photo.svg" width="300"> <svg></svg> @font-face {} what to do sometimes Tuesday, June 18, 13
142. Screen densities using javascript if (window.devicePixelRatio > 1.5) { // change URL } what to do sometimes Tuesday, June 18, 13
143. 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
144. 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
145. 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
146. 5- what to do sometimes - improve the experience - server comunication - javascript - media - screen densities Tuesday, June 18, 13
147. Picture from Simon Howden freedigitalphotos.net! uf! we've covered a lot! Tuesday, June 18, 13
148. 1- Mobile & Performance 2- Measuring 3- e worst 4- What to do... always 5- What to do... sometimes Tuesday, June 18, 13
149. performance and mobile - learn to measure - be simple, be aggressive - test every technique - keep measuring - change is the only constant Tuesday, June 18, 13
150. you can reach a good experience Pictures)from)freedigitalphotos.net) thank you! firt.mobi twitter: @firt www.mobilexweb.com rt.mobi/pmw Tuesday, June 18, 13