Downloaded 42 times
Uploaded byMaximiliano Firtman
Extreme Web Performance for Mobile Devices - Velocity NY
The document discusses optimizing web performance for mobile devices. It covers mobile web platforms and browsers, the importance of performance on mobile, tools for measuring performance, optimizing initial loading and above-the-fold content within 1 second, and maintaining responsiveness. The key recommendations are to measure on real devices, avoid redirects, reduce requests, load above-the-fold content quickly and defer the rest, and prioritize simplicity over complex designs and frameworks.
More Related Content
Similar to Extreme Web Performance for Mobile Devices - Velocity NY
Extreme Web Performance for Mobile Devices - Velocity NY
- 1. extreme web performancefor mobile devices maximiliano @firtman firt.mobi New York, Sep 15 2014
- 5. Slides, links andtests 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 webtoday* *today: september 2014
- 10. 1- mobile webtoday - Web Platforms - The Android’s problem
- 11.
- 12. web platforms iOSand Android
- 13. Links at firt.mobi/velocityweb platforms Adobe Digital Index NetMarketShare Akamai.io Wikimedia Stats StatCounter MOVR by WURFL
- 14. web platforms WindowsPhone Others 4% 3% Opera 5% iOS! 50% Android! 38%
- 15. web platforms WindowsPhone 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 SafariiOS6 5% Safari iOS7! 45% Android! 38%
- 19.
- 20. web platforms Android! 38% Browser! 64% Chrome! 36%
- 22.
- 23.
- 24.
- 25.
- 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 WindowsPhone 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 webtoday - 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 feedback100ms losing user’s flow of thoughts 1s Jakob Nielsen - Usability Engineering
- 34. perception 500ms delay,+26% user’s frustration Source: Radware
- 35. why do weneed 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.
- 40. differences Wifi, publicspaces?
- 41.
- 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 RealBandwidth (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
- 47.
- 48.
- 50. Responsive Web Design is a TOOL
- 51. Responsive Web Design is NOT a GOAL
- 52. Users DON’T careif your site is RESPONSIVE (in terms of RWD)
- 53. Users DO careif the site is FAST
- 54. Page size mobilevs desktop responsive web design Much smaller! 6% Slightly smaller! 22% Same Size! 72% Source: guypo.com
- 55. Superbowl advertisers mobileapproach responsive web design Responsive site! 50% Desktop! 7% Mobile ! 43% Source: blogs.keynote.com
- 58. 2- mobile andperformance - Perception: 1s threshold - RTT latency - Test on low hardware and 2G/3G !
- 59.
- 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.
- 66.
- 67.
- 68.
- 69. remote inspectors Android! 14% Samsung! 10% Others! 4% Windows Phone! 3% Opera 5% Safari iOS6 5% Safari iOS7! 45% Chrome! 14%
- 70.
- 71. Proxies / Networksniffers • 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
- 88.
- 90. What!!? Do youexpect a page load in 200ms? ( )
- 91. No really, wejust need the PERCEPTION
- 92.
- 94.
- 95. Redirects • From150 to 1000 ms per redirect • mydomain.com -> m.mydomain.com • URL shorteners
- 96.
- 98.
- 99. • From 1to 5s
- 100.
- 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.
- 105. The 14K limit RTT • TCP slow start • Initial congestion window: ~14.6Kb (compressed) • > 14Kb will create another roundtrip
- 106. We need toseparate 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 DataURI 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
- 115.
- 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 notsaying 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 isready • Load rest of your content • Gain experience while rendering ATF: current performance, screen density, bandwidth • Make decisions: HD/SD
- 122. Async scripts <scriptasync 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 Keepframerate 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.
- 139. Storage for immediatefeedback • 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.
- 142. Scrolling • avoidre-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.
- 147.
- 148.
- 149. Careful with somedesign features • GPU vs CPU repaint • Important on scroll, transitions & animations
- 150. Careful with somedesign 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 somedesign 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 covereda lot! Picture from Simon Howden freedigitalphotos.net!
- 155. 1- Mobile Webtoday 2- Mobile Performance 3- Tools 4- Initial load & perception 5- Responsiveness & experience
- 156. Slides, links andtests 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 reacha good experience Book signing: firt.mobi/pmw Wed 10.45am Office Hours: Tue 10.45am twitter: @firt mobilexweb.com Pictures)from)freedigitalphotos.net)