Extreme Web Performance for Mobile Devices
11 likes4,198 views
This document summarizes a presentation about extreme performance for mobile web. It discusses understanding the mobile web ecosystem today, focusing on performance differences for mobile and tools to measure performance. It also covers HTML5 APIs and specifications for performance as well as tips for extreme performance including optimizing the network layer, reducing redirects and stop signs, prioritizing responsive design, minimizing above-the-fold content, loading CSS asynchronously, treating JavaScript as optional, and ensuring fast user interfaces. The overall message is that perception of performance is more important than actual load times and focuses on techniques to optimize for mobile.
Extreme Web Performance for Mobile Devices
- 1. Picture from Simon Howden freedigitalphotos.net! extreme web performance for mobile devices maximiliano @firtman firt.mobi Amsterdam, Oct 28 2015
- 3. EARLY DRAFT!
- 5. Slides, links and tests firtman.github.io/velocity
- 6. questions yes, please QA at the end
- 7. performance + mobile + web 1- Mobile Web today 2- Performance & Mobile 3- Tools 4- APIs & Specs 5- 8 Tips for Extreme Performance
- 9. 1- mobile web today* *today: october 2015
- 10. 1- mobile web today - Web Platforms - The Android’s problem - The WebView’s problem
- 11. web platforms
- 12. iOS and Android web platforms
- 13. NetMarketShare Akamai.io Wikimedia Stats StatCounter MOVR by WURFL Device Atlas web platformsLinks at firtman,github.io/velocity
- 17. web view browsing Web View 25% Browser 75% Other 30% Twitter 5% Facebook 40% Chrome (iOS) 25% Source: MOVR Report
- 18. Let’s see some data web platforms
- 23. web platforms 7.x 9% 8.x 30% 9.x 61% Source: Apple iOS 45%
- 28. 1% month
- 30. web platforms
- 31. web platforms
- 32. web platforms
- 33. LG G3
- 34. web platforms Browser 2.x 3% Samsung 17% Browser 4.x 30% Chrome 50% Android 45%
- 39. web platforms Android 15% Samsung 7% Others 2% Windows Phone 3% UC Browser 3% Opera 3% InApp iOS 12% Safari iOS8 10% Safari iOS9 23% Chrome 23%
- 41. 1- mobile web today - Understand the real ecosystem - The Android browsers - The WebView - Don’t think you are an average user
- 42. 2- mobile & performance - Perception - Differences - Cellular networks - Responsive Web Design
- 43. immediate feedback 100ms perception Jakob Nielsen - Usability Engineering
- 44. immediate feedback 100ms losing user’s flow of thoughts 1s perception Jakob Nielsen - Usability Engineering
- 45. 500ms delay, +26% user’s frustration perception Source: Radware
- 46. 40% of users abandon an article if it doesn't load after six seconds “ ” Danny Bernstein, Google
- 47. Pages loaded 3.9x faster with Crystal and used 53% less bandwidth “ ” Crystal, an iOS ad-blocker
- 53. why do we need special care on mobile?
- 55. We have 4G! We don't need to worry about performance... ( )
- 56. cellular 0 25 50 75 100 US Western Europe Asia Global 4G 2G/3G Only 10% is on 4G globally
- 57. cellular 0 25 50 75 100 US Western Europe Asia Global 4G 2G/3G ~30% of the time 4G was not used
- 58. Real Bandwidth (Mbps) cellular networks 0 3.5 7 10.5 14 2G 3G Wifi 4G
- 59. RTT - latency cellular networks 2G 3G 4G Home 0 250 500 750 1000 Min Max
- 61. Safari, Chrome, Android 88%93%
- 62. 1% 5% 4% Other non-Android, non-iOS 6% Safari, Chrome, Android 88%94%
- 65. Responsive Web Design is a TOOL
- 66. Responsive Web Design is NOT a GOAL
- 67. Users DON’T care if your site is RESPONSIVE (in terms of RWD)
- 68. Users DO care if the site is FAST
- 69. Wait there! Google said it will penalize non-responsive sites… ( )
- 70. Mmm…. NOT REALLY
- 72. 2- mobile and performance - Perception: RAIL, 100ms / 1s - RTT latency - RWD as a goal might be a problem - Test on low hardware and 2G/3G
- 73. 3- tools
- 74. 3- tools - where - measuring loading times - measuring responsiveness - online tools - html5 apis
- 75. Simulator & Emulator Real device where
- 76. emulators Android 14% Samsung 7% Others 2% Windows Phone 3% UC Browser 3% Opera 3% InApp iOS 14% Safari iOS8 10% Safari iOS9 22% Chrome 23%
- 77. emulators Android 14% Samsung 7% Others 2% Windows Phone 3% UC Browser 3% Opera 3% InApp iOS 14% Safari iOS8 10% Safari iOS9 22% Chrome 23%
- 78. DEMO
- 79. online tools
- 80. online tools
- 81. online tools
- 82. online tools
- 84. remote inspectors Android 14% Samsung 7% Others 2% Windows Phone 3% UC Browser 3% Opera 3% InApp iOS 14% Safari iOS8 10% Safari iOS9 22% Chrome 23%
- 85. Measuring DEMO
- 86. Proxies / Network sniffers • Charles Proxy • Fiddler tools Image from telerik fiddler
- 87. Connection simulators • Network link conditioner (Mac/iOS) • Charles Proxy • Clumsy for Windows • Net Limiter for Windows • SlowyApp for Mac • Chrome Developer Tools tools
- 88. 3- tools - Learn where to test - Measure loading times - Measure responsiveness
- 89. 4- apis & specs for performance
- 90. Navigation Timing API • window.performance • Timestamps available html5 apis
- 91. navigation timing api * Android browser only from 4.0 Android 14% Samsung 7% Others 2% Windows Phone 3% UC Browser 3% Opera 3% InApp iOS 14% Safari iOS8 10% Safari iOS9 22% Chrome 23%
- 92. Navigation Timing API html5 apis DEMO
- 93. Resource Timing API • Information per resource html5 apis
- 94. resource timing Android 14% Samsung 7% Others 2% Windows Phone 3% UC Browser 3% Opera 3% InApp iOS 14% Safari iOS8 10% Safari iOS9 22% Chrome 23%
- 95. Network information API • Android Browser, Silk (spec #1) type • BlackBerry 10 (spec #2) bandwidth • Firefox, Chrome 38+ (spec #3) type & events • Chrome 47+ (spec #4) type & estimated bw html5 apis
- 96. net info api * Different specs available Android 14% Samsung 7% Others 2% Windows Phone 3% UC Browser 3% Opera 3% InApp iOS 14% Safari iOS8 10% Safari iOS9 22% Chrome 23%
- 97. Service Workers • Manage offline cache • Background sync • Push Notifications html5 apis
- 98. service workers Android 14% Samsung 7% Others 2% Windows Phone 3% UC Browser 3% Opera 3% InApp iOS 14% Safari iOS8 10% Safari iOS9 22% Chrome 23%
- 99. Request Idle Callback • Do something when the browser is idle • Chrome 47+ (beta today) html5 apis
- 100. HTTP Client Hints • HTTP Headers: dpr, viewport’s width • Chrome 46+ • New: save-data (future) html5 apis
- 101. HTTP/2 • Performance from scratch • Header Compression • TCP connection reuse • Push to Cache • Early tests show 15-60% load time improvement
- 102. HTTP/2 • TLS-based only today • Good compatibility • Upgrade your servers • Upgrade connections
- 103. http/2 Android 14% Samsung 7% Others 2% Windows Phone 3% UC Browser 3% Opera 3% InApp iOS 14% Safari iOS8 10% Safari iOS9 22% Chrome 23%
- 105. AMP-HTML
- 107. 4- apis & specs - HTML5 APIs - Look for the near future - HTTP/2 when possible - AMP new idea
- 108. 5- Extreme Performance Tips
- 109. Network Layer Stop Signs RWD as a goal HTML in 14k CSS ASAP JavaScript as dessert Fast UI Web Views
- 116. What!!? Do you expect a page load in 200ms? ( )
- 117. No really, we just need the PERCEPTION
- 118. Network Layer
- 119. Network Layer • Reduce DNS and HTTP requests • Domain Sharding • Gzip responses • 14Kb congestion window for achieve 1s
- 120. Network Layer • Reduce DNS and HTTP requests • Domain Sharding • Gzip responses • 14Kb congestion window for achieve 1s HTTP/2 HTTP/2 HTTP/2 HTTP/2
- 121. Stop Signs
- 122. REDIRECTS
- 123. APP BANNER
- 124. CLIENT RENDERING
- 125. Stop Signs • Reduce redirects (100ms to 1s each) (social networks have one or two) • Don’t create custom app banners • Don’t use client side rendering for first view
- 126. Stop Signs • Reduce redirects (100ms to 1s each) (social networks have one or two) • Don’t create custom app banners • Don’t use client side rendering for first view HTTP/2 HTTP/2 HTTP/2
- 127. RWD as a Goal
- 128. RESPONSIVE WEB DESIGN is the future
- 129. We are not saying go m.*
- 130. Responsive Web Design • Using same URL 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. But we are front-end!
- 132. Time to rethink priorities and architecture Server Client Frontend engineer Backend engineer
- 133. Server Client Frontend engineer Backend engineer Frontend server
- 134. HTML in 14Kb
- 135. • ATF in 1s = 1 RTT ~ < 14Kb (compressed) • > 14Kb will create another roundtrip • HTML + CSS + JavaScript • Images?
- 136. We need to separate ABOVE THE FOLD (ATF) content
- 137. Distract the user
- 138. HTML in 14Kb • ATF content in 14Kb • Create an AMP-HTML version if applicable • Speed future visits • HD/SD contexts
- 139. HTML in 14Kb • ATF content in 14Kb • Create an AMP-HTML version if applicable • Speed future visits • HD/SD contexts HTTP/2 HTTP/2 HTTP/2 HTTP/2
- 140. Immediate feedback • The 300ms delay • mobile viewport (“user-scalable=no” on some browsers) • FastClick solution
- 141. Immediate feedback • Mobile Viewport on Chrome <meta name=viewport content="width=device-width"> HTML
- 142. Immediate feedback • Mobile Fixed Viewport on IE <meta name=viewport content="width=device-width, user-scalable=no" > HTML
- 143. Immediate feedback • CSS on IE html { -ms-touch-action: manipulation; touch-action: manipulation; } CSS
- 144. CSS ASAP
- 145. Basic browser behavior HTML JS CSS
- 146. Basic browser behavior HTML JS CSS BLOCKS RENDERING
- 147. CSS ASAP • Don’t rely on media queries only • Inline ATF CSS • Load async the rest • Push them on HTTP/2 • Use only one CSS file
- 148. CSS ASAP • Don’t rely on media queries only • Inline ATF CSS • Load async the rest • Push them on HTTP/2 • Use only one CSS file HTTP/2 HTTP/2 HTTP/2 HTTP/2 HTTP/2
- 150. Basic browser behavior HTML JS CSS BLOCKS PARSING
- 151. Avoid JavaScript frameworks • Embrace Vanilla JS • Load it async • Join everything in one JS file • Keep 60fps frame rate consistent JavaScript
- 152. • Embrace Vanilla JS • Load it async • Join everything in one JS file • Keep 60fps frame rate consistent Avoid JavaScript frameworks JavaScript HTTP/2 HTTP/2 HTTP/2
- 153. Fast UI
- 154. • Images are non-blocking by default • Don’t use Data URI => blocking • Responsive Images • Remember HD/SD • User SVG when possible • New Formats: WebP, APNG Image and UI
- 155. Your new enemy
- 156. NOT THE USER
- 157. YOUR DESIGNER
- 158. Careful with some design features • GPU vs CPU repaint • Important on scroll, transitions & animations • Transforms and opacity GPU • border-radius, gradients, shadows, filters CPU repaint
- 159. Web Views
- 160. Web Views • Too many on Android • WebKit, Chromium, Amazon, Samsung • Two on iOS: old and new
- 161. Web Views • Less performant • Don’t share sessions with the browser • No HTTP/2 support on most of them
- 162. Fast Web Views on Android • Project Crosswalk for local content • Chrome Custom Tabs for browsing
- 163. Fast Web Views on iOS • Project Crosswalk for local content • WKWebView (iOS 9+) • Safari View Controller for browsing (iOS 9+)
- 164. Picture from Simon Howden freedigitalphotos.net! uf! we've covered a lot!
- 165. Improve Network Avoid Stop Signs Avoid RWD as a goal HTML in 14k CSS ASAP JavaScript as dessert Fast UI Fast Web Views
- 166. 1- Mobile Web today 2- Mobile Performance 3- Tools 4- New APIs & Specs 5- Extreme Performance Tips
- 167. Slides, links and tests firtman.github.io/velocity
- 168. 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, be smart
- 169. you can reach a good experience firtman@gmail.com @firt firt.mobi/hpmwfirt.mobi/mh5