Extreme Web Performance for Mobile Devices - Velocity NY
•
4 gostaram•3,233 visualizações
Presentation at Velocity Conference 2014 New York USA
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Destaque (20)
Semelhante a Extreme Web Performance for Mobile Devices - Velocity NY
Semelhante a Extreme Web Performance for Mobile Devices - Velocity NY (20)
Mais de Maximiliano Firtman
Mais de Maximiliano Firtman (20)
Último
Último (20)
Extreme Web Performance for Mobile Devices - Velocity NY
- 1. extreme web performance for mobile devices maximiliano @firtman firt.mobi New York, Sep 15 2014
- 5. Slides, links and tests firtman.github.io/velocity
- 6. questions yes, please ! QA at the end office hours tomorrow
- 7. performance + mobile + web 1- Mobile Web today 2- Performance & Mobile 3- Tools 4- Initial loading & perception 5- Responsiveness & experience
- 9. 1- mobile web today* *today: september 2014
- 10. 1- mobile web today - Web Platforms - The Android’s problem
- 11. web platforms
- 12. web platforms iOS and Android
- 13. Links at firt.mobi/velocity web platforms Adobe Digital Index NetMarketShare Akamai.io Wikimedia Stats StatCounter MOVR by WURFL
- 14. web platforms Windows Phone Others 4% 3% Opera 5% iOS! 50% Android! 38%
- 15. web platforms Windows Phone Others 4% 3% Opera 5% iOS! 50% Android! 38% Others? • Firefox • UC Browser • Nokia Browser • BlackBerry Browser
- 16. web platforms iOS! 50% Safari! 100%
- 17. web platforms iOS! 50% 6.x! 11% 7.x! 89% Source: Apple
- 18. web platforms Safari iOS6 5% Safari iOS7! 45% Android! 38%
- 19. web platforms Android! 38%
- 20. web platforms Android! 38% Browser! 64% Chrome! 36%
- 22. web platforms
- 23. web platforms
- 24. web platforms
- 25. LG G3
- 26. web platforms Android! 38% Samsung! 22% Browser! 42% Chrome! 36%
- 27. web platforms Android! 38% 4.4 2.3 4.1-4.3 4.0 Source: Android Dashboard
- 28. web platforms Windows Phone Others 4% 3% Opera 5% iOS! 50% Android! 38%
- 29. web platforms Samsung! 10% Android! 15% Others 4% Windows Phone 3% Opera 5% Safari iOS6 5% Safari iOS7! 45% Chrome! 14% Others? • Firefox • UC Browser • Nokia Browser • BlackBerry Browser
- 30. 1- mobile web today - Understand the real ecosystem - Android browsers - Don’t think you are an average user - May change future
- 31. 2- mobile & performance - Perception - Differences - Cellular networks - Responsive Web Design
- 32. immediate feedback 100ms ! perception Jakob Nielsen - Usability Engineering
- 33. perception immediate feedback 100ms losing user’s flow of thoughts 1s Jakob Nielsen - Usability Engineering
- 34. perception 500ms delay, +26% user’s frustration Source: Radware
- 35. why do we need special care on mobile?
- 36. CPU and GPU Memory differences
- 37. CPU and GPU Memory differences 5x
- 38. Long tail persists differences Source: MOVR by ScientiaMobile
- 39. Wifi differences
- 40. differences Wifi, public spaces?
- 42. We have 4G! We don't need to worry about performance... ( )
- 43. cellular 100 75 50 25 0 4G 2G/3G Only 4% is on 4G globally US Western Europe Asia Global
- 44. cellular 100 75 50 25 0 4G 2G/3G ~30% of the time 4G was not used US Western Europe Asia Global
- 45. cellular networks Real Bandwidth (Mbps) 2G 3G Wifi 4G 0 2 4 6 8
- 46. RTT - latency cellular networks 2G 3G 4G Home Min Max 0 250 500 750 1000
- 50. Responsive Web Design is a TOOL
- 51. Responsive Web Design is NOT a GOAL
- 52. Users DON’T care if your site is RESPONSIVE (in terms of RWD)
- 53. Users DO care if the site is FAST
- 54. Page size mobile vs desktop responsive web design Much smaller! 6% Slightly smaller! 22% Same Size! 72% Source: guypo.com
- 55. Superbowl advertisers mobile approach responsive web design Responsive site! 50% Desktop! 7% Mobile ! 43% Source: blogs.keynote.com
- 58. 2- mobile and performance - Perception: 1s threshold - RTT latency - Test on low hardware and 2G/3G !
- 59. 3- tools
- 60. 3- tools - where - measuring loading times - measuring responsiveness - online tools - html5 apis
- 61. Simulator & Emulator Real device where
- 62. emulators Samsung! 10% Android! 14% Others! 4% Windows Phone 3% Opera 5% Safari iOS6 5% Safari iOS7! 45% Chrome! 14%
- 63. emulators Samsung! 10% Android! 14% Others! 4% Windows Phone! 3% Opera 5% Safari iOS6 5% Safari iOS7! 45% Chrome! 14%
- 64. emulators Samsung! 10% Android! 14% Others! 4% Windows Phone 3% Opera 5% Safari iOS6 5% Safari iOS7! 45% Chrome! 14%
- 65. DEMO
- 66. online tools
- 67. online tools
- 69. remote inspectors Android! 14% Samsung! 10% Others! 4% Windows Phone! 3% Opera 5% Safari iOS6 5% Safari iOS7! 45% Chrome! 14%
- 70. Measuring DEMO
- 71. Proxies / Network sniffers • Charles Proxy • Fiddler tools Image from telerik fiddler
- 72. Connection simulators tools • Network link conditioner (Mac/iOS) • Charles Proxy • Clumsy for Windows • Net Limiter for Windows • SlowyApp for Mac • Chrome Developer Tools
- 73. Navigation Timing API • window.performance • Timestamps available html5 apis
- 74. navigation timing api Android*! 12% Samsung! 12% Others! 4% Windows Phone! 3% Opera 5% Safari iOS6! 5% Safari iOS7! 45% Chrome! 14% * Android browser only from 4.0
- 76. Navigation Timing API html5 apis In just 2 days…
- 77. navigation timing api Android! 12% Samsung! 12% Others! 4% Windows Phone! 3% Opera 5% Safari iOS6/7! 15% Safari iOS8! 35% Chrome! 14% in a few weeks…
- 78. Navigation Timing API html5 apis DEMO
- 79. Resource Timing API • Information per resource • Chrome and IE11 only html5 apis
- 80. 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
- 81. 3- tools - Learn where to test - Measure loading times - Measure responsiveness - HTML5 APIs !
- 82. 4- initial loading & perception
- 83. 4- initial loading & perception - 1 second threshold - classic checklist - ATF and the rest - responsive web design - future visits
- 90. What!!? Do you expect a page load in 200ms? ( )
- 91. No really, we just need the PERCEPTION
- 92. Let’s see HOW
- 94. = REDIRECTS
- 95. Redirects • From 150 to 1000 ms per redirect • mydomain.com -> m.mydomain.com • URL shorteners
- 96. Redirects DEMO
- 98. = APP BANNER
- 99. • From 1 to 5s
- 101. Basic browser behavior • Network Fetch • Parsing • Rendering
- 102. Basic browser behavior HTML JS CSS
- 103. Basic browser behavior HTML JS CSS BLOCKS PARSING BLOCKS RENDERING
- 104. The 14K limit
- 105. The 14K limit RTT • TCP slow start • Initial congestion window: ~14.6Kb (compressed) • > 14Kb will create another roundtrip
- 106. We need to separate ABOVE THE FOLD (ATF) content
- 107. ATF in 1s = 1 RTT ~ < 14Kb ! ! HTML + CSS + JavaScript Images? ATF
- 108. Avoid JavaScript frameworks ATF • Embrace Vanilla JS • If you really need them, load them after ATF • Think on alternatives or partial frameworks
- 109. 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
- 110. Compress resources • Use Gzip in HTTP • For text-based files only
- 111. Client side rendering ATF • Careful with client-side frameworks • Try to render the initial view server-side • Render at least a basic view
- 112. Client side rendering ATF • Careful with client-side frameworks • Try to render the initial view server-side • Render at least a basic view 5x
- 113. Use illusion tricks ATF • Loading content animation • Minimal-ui viewport ASAP (RIP) • Remember to keep the user engaged in 1s
- 114. Web Fonts • Blocks text rendering • Fonts are bigger than 14Kb • Use them with care • Remove characters • Simplify glyphs ATF
- 116. Responsive Web Design • Media queries block rendering (all of them) • ATF content on mobile is not the same
- 117. DON’T rely on RWD techniques only for first view
- 118. RESPONSIVE WEB DESIGN is the future
- 119. We are not saying go m.*
- 120. 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
- 121. After ATF is ready • Load rest of your content • Gain experience while rendering ATF: current performance, screen density, bandwidth • Make decisions: HD/SD
- 122. Async scripts <script async src=""></script> HTML5
- 123. Defer non-ATF CSS • No defer or async attributes (yet) • Inject <link> after rendering • load, requestAnimationFrame
- 124. Speed future visits • Be cache friendly • Use Application Cache for ATF content • Create a custom cache
- 125. 4- initial loading & perception - ATF in 1s (illusion) - No redirects, GZip, no scripts - Only ATF CSS, careful with fonts - Defer anything else !
- 126. 5- responsiveness & experience
- 127. 4- responsiveness & experience - consistent frame rate - immediate feedback - scrolling - your new enemy
- 128. consistent fps Keep framerate high and consistent • Main UI thread as free as possible • Avoid repainting (software bitmap calculations)
- 129. JavaScript framerate • Avoid DOM manipulations inside loops/scroll var e = document.querySelector("#test"); for (var i=0; i<100; i++) { // change e attributes }); JAVASCRIPT
- 130. CSS framerate • Promote GPU layers smartly selector { -webkit-transform: translateZ(0); -webkit-perspective: 1000; } ! selector { z-index: 10; } CSS
- 131. Animations framerate • Don’t animate from JavaScript for basic stuff • Use requestAnimationFrame
- 132. remember 100ms immediate feedback?
- 133. Immediate feedback • The 300ms delay ! • mobile viewport (“user-scalable=no” on some browsers) • FastClick solution
- 134. Immediate feedback ! • FastClick solution
- 135. Immediate feedback ! • Mobile Viewport on Chrome <meta name=viewport content="width=device-width"> HTML
- 136. Immediate feedback ! • Mobile Fixed Viewport on IE <meta name=viewport content="width=device-width, user-scalable=no" > HTML
- 137. Immediate feedback ! • CSS on IE html { -ms-touch-action: manipulation; touch-action: manipulation; } CSS
- 138. Distract the user
- 139. Storage for immediate feedback • web storage vs web sql vs indexeddb • think about async vs sync • Finally IndexedDB on iOS 8!
- 140. navigator.geolocation JAVASCRIPT .getCurrentPosition(cbOK, cbKO, { maximumAge: 60000 }); Geolocation cache
- 141. Scrolling
- 142. Scrolling • avoid re-painting • use touch overflow for momentum • don’t use JavaScript scrollers • on large scrolling areas: copy native
- 143. Large scrolling areas Let’s copy native frameworks: • iOS: UITableView • Android: ListView & Adapters
- 144. Large scrolling areas • Object pool !
- 145. Infinite scroll • DOM vs. iframe vs. object pool • changes on iOS8
- 146. Your new enemy
- 147. NOT THE USER
- 148. YOUR DESIGNER
- 149. Careful with some design features • GPU vs CPU repaint • Important on scroll, transitions & animations
- 150. Careful with some design features • Transforms: translate, scale, rotate and opacity GPU • border-radius, gradients, shadows, filters CPU repaint
- 151. 300 CSS pixels device px px ratio 300 1.00 390 1.30 450 1.50 600 2.00 672 2.24 900 3.00 1200 4.00 ! Firefox OS Nexus 7 Galaxy SII iPhone 5/6 BB Z10 iPhone 6 Plus LG G3
- 152. Careful with some design features • Deliver super high resolution images
- 153. 5- responsiveness & experience - 100s feedback - Consistent fps - Avoid CPU repaints - Embrace GPU smartly - Profile & test !
- 154. uf! we've covered a lot! Picture from Simon Howden freedigitalphotos.net!
- 155. 1- Mobile Web today 2- Mobile Performance 3- Tools 4- Initial load & perception 5- Responsiveness & experience
- 156. Slides, links and tests firtman.github.io/velocity
- 157. 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
- 158. you can reach a good experience Book signing: firt.mobi/pmw Wed 10.45am Office Hours: Tue 10.45am twitter: @firt mobilexweb.com Pictures)from)freedigitalphotos.net)