Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
4 likes2,616 views
This document summarizes key points about optimizing performance for mobile web: 1. Mobile platforms are dominated by iOS and Android, with different browsers on each (Safari, Chrome). Understanding the ecosystem is important for testing and optimization. 2. Perception of speed is critical - aim for responses within 1 second. Mobile hardware is less powerful so optimization is needed. Tools like emulators, remote inspectors, and APIs help measure performance. 3. For initial loading, focus on getting above-the-fold content within 1 second using techniques like avoiding redirects, gzipping files, separating critical CSS, and deferring non-essential assets.
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
- 1. extreme web performance for mobile devices maximiliano @firtman firt.mobi Barcelona, Nov 19 2014
- 4. NEW! SOON!
- 6. Slides, links and tests firtman.github.io/velocity
- 7. questions yes, please QA at the end (en español también)
- 8. performance + mobile + web 1- Mobile Web today 2- Performance & Mobile 3- Tools 4- Initial loading & perception 5- Responsiveness & experience
- 10. 1- mobile web today* *today: november 2014
- 11. 1- mobile web today - Web Platforms - The Android’s problem
- 12. web platforms
- 13. web platforms iOS and Android
- 14. Links at firtman,github.io/velocity web platforms Adobe Digital Index NetMarketShare Akamai.io Wikimedia Stats StatCounter MOVR by WURFL
- 15. web platforms Windows Phone Others 4% 3% Opera 5% iOS 50% Android 38%
- 16. web platforms iOS 50% Safari 100%
- 17. web platforms iOS 50% Apps (Web View) 12% Safari 88%
- 18. web platforms iOS 50% 7.x 40% 6.x 5% 8.x 55% Source: Apple
- 19. web platforms InApp iOS 5% Safari iOS7 20% Android 38% Safari iOS8 25%
- 20. web platforms Android 38%
- 21. web platforms Android 38% Browser 60% Chrome 40%
- 23. 1% month
- 25. web platforms
- 26. web platforms
- 27. web platforms
- 28. LG G3
- 29. web platforms Android 38% Samsung 20% Browser 40% Chrome 40%
- 33. web platforms iOS 50% Android 38%
- 34. web platforms Android 15% Samsung 10% Windows Phone Others 4% 3% Opera InApp iOS 5% 5% Safari iOS7 20% Safari iOS8 25% Chrome 14% Others? • Firefox • UC Browser • Nokia Browser • BlackBerry Browser
- 35. 1- mobile web today - Understand the real ecosystem - Android browsers - Don’t think you are an average user - May change future
- 36. 2- mobile & performance - Perception - Differences - Cellular networks - Responsive Web Design
- 37. perception immediate feedback 100ms Jakob Nielsen - Usability Engineering
- 38. perception immediate feedback 100ms losing user’s flow of thoughts 1s Jakob Nielsen - Usability Engineering
- 39. perception 500ms delay, +26% user’s frustration Source: Radware
- 40. why do we need special care on mobile?
- 41. CPU and GPU Memory differences
- 42. CPU and GPU Memory differences 5x
- 43. Wifi differences
- 44. differences Wifi, public spaces?
- 46. We have 4G! We don't need to worry about performance... ( )
- 47. cellular 100 75 50 25 0 4G 2G/3G Only 4% is on 4G globally US Western Europe Asia Global
- 48. cellular 100 75 50 25 0 4G 2G/3G ~30% of the time 4G was not used US Western Europe Asia Global
- 49. cellular networks Real Bandwidth (Mbps) 2G 3G Wifi 4G 0 2 4 6 8
- 50. RTT - latency cellular networks 2G 3G 4G Home Min Max 0 250 500 750 1000
- 52. Safari, Chrome, Android 91% 71%
- 53. Safari, Chrome, Android 91% 71% 1% 7% 18% Other non-Android, non-iOS 10%
- 56. Responsive Web Design is a TOOL
- 57. Responsive Web Design is NOT a GOAL
- 58. Users DON’T care if your site is RESPONSIVE (in terms of RWD)
- 59. Users DO care if the site is FAST
- 60. Page size mobile vs desktop responsive web design Much smaller 6% Slightly smaller 22% Same Size 72% Source: guypo.com
- 61. Superbowl advertisers mobile approach responsive web design Responsive site 50% Desktop 7% Mobile 43% Source: blogs.keynote.com
- 64. 2- mobile and performance - Perception: 1s threshold - RTT latency - Test on low hardware and 2G/3G
- 65. 3- tools
- 66. 3- tools - where - measuring loading times - measuring responsiveness - online tools - html5 apis
- 67. Simulator & Emulator Real device where
- 68. emulators Samsung 10% Android 15% Others 4% Windows Phone 3% Opera 5% InApp Browser iOS 5% Safari iOS 45% Chrome 14%
- 69. emulators Samsung 10% Android 15% Others 4% Windows Phone 3% Opera 5% InApp Browser iOS 5% Safari iOS 45% Chrome 14%
- 70. emulators Samsung 10% Android 15% Others 4% Windows Phone 3% Opera 5% InApp Browser iOS 5% Safari iOS 45% Chrome 14%
- 71. DEMO
- 72. online tools
- 73. online tools
- 74. online tools
- 75. online tools
- 77. remote inspectors Android 14% Samsung 10% Others 4% Windows Phone 3% Opera 5% InApp Browser iOS 5% Safari iOS 45% Chrome 15%
- 78. Measuring DEMO
- 79. Proxies / Network sniffers • Charles Proxy • Fiddler tools Image from telerik fiddler
- 80. Connection simulators tools • Network link conditioner (Mac/iOS) • Charles Proxy • Clumsy for Windows • Net Limiter for Windows • SlowyApp for Mac • Chrome Developer Tools
- 81. html5 apis
- 82. Navigation Timing API • window.performance • Timestamps available html5 apis
- 83. navigation timing api Android* 12% Samsung 12% Others 4% Windows Phone 3% Opera 5% InApp Browser iOS 5% Safari iOS 45% Chrome 15% * Android browser only from 4.0
- 85. Navigation Timing API html5 apis :)
- 86. Navigation Timing API html5 apis :/ .1
- 87. html5 apis iOS SDK Release Notes for iOS 8.1
- 88. Navigation Timing API html5 apis DEMO
- 89. Resource Timing API • Information per resource • Chrome and IE11 only html5 apis
- 90. Network information API html5 apis • Android Browser, Silk (spec #1) type • BlackBerry 10, old Firefox (spec #2) bandwidth • Firefox, Chrome for Android 38+ (spec #3) type
- 91. 3- tools - Learn where to test - Measure loading times - Measure responsiveness - HTML5 APIs
- 92. 4- initial loading & perception
- 93. 4- initial loading & perception - 1 second threshold - classic checklist - ATF and the rest - responsive web design - future visits
- 100. What!!? Do you expect a page load in 200ms? ( )
- 101. No really, we just need the PERCEPTION
- 102. Let’s see HOW
- 104. = REDIRECTS
- 105. Redirects • From 150 to 1000 ms per redirect • mydomain.com -> m.mydomain.com • URL shorteners
- 106. Redirects DEMO
- 108. = APP BANNER
- 109. = APP SPAM
- 110. • From 1 to 5s
- 112. Basic browser behavior • Network Fetch • Parsing • Rendering
- 113. Basic browser behavior HTML JS CSS
- 114. Basic browser behavior HTML JS CSS BLOCKS PARSING BLOCKS RENDERING
- 115. The 14K limit
- 116. The 14K limit RTT • TCP slow start • Initial congestion window: ~14.6Kb (compressed) • > 14Kb will create another roundtrip
- 117. We need to separate ABOVE THE FOLD (ATF) content
- 118. ATF in 1s = 1 RTT ~ < 14Kb HTML + CSS + JavaScript Images? ATF
- 119. Avoid JavaScript frameworks ATF • Embrace Vanilla JS • If you really need them, load them after ATF • Think on alternatives or partial frameworks
- 120. Careful with Data URI in CSS ATF • Images are non-blocking by default • Using Data URI in CSS creates blocking images • Use them only on non-ATF external CSS
- 121. Compress resources • Use Gzip in HTTP • For text-based files only
- 122. Client side rendering ATF • Careful with client-side frameworks • Try to render the initial view server-side • Render at least a basic view
- 123. Client side rendering ATF • Careful with client-side frameworks • Try to render the initial view server-side • Render at least a basic view 5x
- 124. Web Fonts • Blocks text rendering • Fonts are bigger than 14Kb • Use them with care • Remove characters • Simplify glyphs ATF
- 126. Responsive Web Design • Media queries block rendering (all of them) • ATF content on mobile is not the same
- 127. DON’T rely on RWD techniques only for first view
- 128. RESPONSIVE WEB DESIGN is the future
- 129. We are not saying go m.*
- 130. Responsive Web Design • Using same URL for mobile/desktop still a good a idea • Mix it with RESS / adaptive web design • Load media queries CSS async • Use server-side libraries • WURFL or DeviceAtlas
- 131. After ATF is ready • Load rest of your content • Gain experience while rendering ATF: current performance, screen density, bandwidth • Make decisions: HD/SD
- 132. Async scripts <script async src=""></script> HTML5
- 133. Defer non-ATF CSS • No defer or async attributes (yet) • Inject <link> after rendering • load, requestAnimationFrame
- 134. Speed future visits • Be cache friendly • Use Application Cache for ATF content • Create a custom cache
- 135. 4- initial loading & perception - ATF in 1s (illusion) - No redirects, GZip, no scripts - Only ATF CSS, careful with fonts - Defer anything else
- 136. 5- responsiveness & experience
- 137. 4- responsiveness & experience - consistent frame rate - immediate feedback - scrolling - your new enemy
- 138. consistent fps Keep framerate high and consistent • Main UI thread as free as possible • Avoid repainting (software bitmap calculations)
- 139. JavaScript framerate • Avoid DOM manipulations inside loops/scroll var e = document.querySelector("#test"); for (var i=0; i<100; i++) { // change e attributes }); JAVASCRIPT
- 140. CSS framerate • Promote GPU layers smartly selector { -webkit-transform: translateZ(0); -webkit-perspective: 1000; } selector { z-index: 10; } CSS
- 141. Animations framerate • Don’t animate from JavaScript for basic stuff • Use requestAnimationFrame
- 142. remember 100ms immediate feedback?
- 143. Immediate feedback • The 300ms delay • mobile viewport (“user-scalable=no” on some browsers) • FastClick solution
- 144. Immediate feedback • FastClick solution
- 145. Immediate feedback • Mobile Viewport on Chrome <meta name=viewport content="width=device-width"> HTML
- 146. Immediate feedback • Mobile Fixed Viewport on IE <meta name=viewport content="width=device-width, user-scalable=no" > HTML
- 147. Immediate feedback • CSS on IE html { -ms-touch-action: manipulation; touch-action: manipulation; } CSS
- 148. Distract the user
- 149. Storage for immediate feedback • web storage vs web sql vs indexeddb • think about async vs sync • Finally IndexedDB on iOS 8!
- 150. navigator.geolocation JAVASCRIPT .getCurrentPosition(cbOK, cbKO, { maximumAge: 60000 }); Geolocation cache
- 151. Scrolling
- 152. Scrolling • avoid re-painting • use touch overflow for momentum • don’t use JavaScript scrollers • on large scrolling areas: copy native
- 153. Large scrolling areas Let’s copy native frameworks: • iOS: UITableView • Android: ListView & Adapters
- 154. Large scrolling areas • Object pool
- 155. Infinite scroll • DOM vs. iframe vs. object pool • changes on iOS8
- 156. Your new enemy
- 157. NOT THE USER
- 158. YOUR DESIGNER
- 159. Careful with some design features • GPU vs CPU repaint • Important on scroll, transitions & animations
- 160. Careful with some design features • Transforms: translate, scale, rotate and opacity GPU • border-radius, gradients, shadows, filters CPU repaint
- 161. 5- responsiveness & experience - 100s feedback - Consistent fps - Avoid CPU repaints - Embrace GPU smartly - Profile & test
- 162. uf! we've covered a lot! Picture from Simon Howden freedigitalphotos.net!
- 163. 1- Mobile Web today 2- Mobile Performance 3- Tools 4- Initial load & perception 5- Responsiveness & experience
- 164. Slides, links and tests firtman.github.io/velocity
- 165. final thoughts - measure and profile on the real world - don’t redirect, reduce requests - atf content in 1s, defer the rest - be simple, be aggressive
- 166. you can reach a good experience firtman@gmail.com @firt firt.mobi/mh5 firt.mobi/pmw 50% OFF!