Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Extreme Web Performance for Mobile Devices

3,368 views

Published on

Session in Velocity 2015 Europe Amsterdam on Web Performance Optimization

Published in: Technology
  • Be the first to comment

Extreme Web Performance for Mobile Devices

  1. 1. Picture from Simon Howden freedigitalphotos.net! extreme web performance for mobile devices maximiliano @firtman firt.mobi Amsterdam, Oct 28 2015
  2. 2. EARLY DRAFT!
  3. 3. Slides, links and tests firtman.github.io/velocity
  4. 4. questions yes, please QA at the end
  5. 5. performance + mobile + web 1- Mobile Web today 2- Performance & Mobile 3- Tools 4- APIs & Specs 5- 8 Tips for Extreme Performance
  6. 6. 1- mobile web today* *today: october 2015
  7. 7. 1- mobile web today - Web Platforms - The Android’s problem - The WebView’s problem
  8. 8. web platforms
  9. 9. iOS and Android web platforms
  10. 10. NetMarketShare Akamai.io Wikimedia Stats StatCounter MOVR by WURFL Device Atlas web platformsLinks at firtman,github.io/velocity
  11. 11. Browsers only? web platforms
  12. 12. web view browsing Web View 25% Browser 75% Other 30% Twitter 5% Facebook 40% Chrome (iOS) 25% Source: MOVR Report
  13. 13. Let’s see some data web platforms
  14. 14. web platformsOthers 10% iOS 45% Android 45%
  15. 15. web platformsOthers 10% iOS 45% Android 45%
  16. 16. web platforms iOS 45% Safari 100% ?
  17. 17. web platforms Apps (WebView) 25% Safari 75% iOS 45%
  18. 18. web platforms 7.x 9% 8.x 30% 9.x 61% Source: Apple iOS 45%
  19. 19. web platformsOthers 10% iOS 45% Android 45%
  20. 20. web platforms Android 45%
  21. 21. web platforms Browser 33% Chrome 67% Android 45%
  22. 22. 1% month
  23. 23. web platforms
  24. 24. web platforms
  25. 25. web platforms
  26. 26. LG G3
  27. 27. web platforms Browser 2.x 3% Samsung 17% Browser 4.x 30% Chrome 50% Android 45%
  28. 28. web platformsOthers 10% iOS 45% Android 45%
  29. 29. web platformsOthers 10%
  30. 30. web platformsOthers 10% Others 15% Firefox 10% UC Browser 25% IE 25% Opera Mini 25%
  31. 31. web platformsOthers 10% iOS 45% Android 45%
  32. 32. 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%
  33. 33. web platforms Old WebKit 14% IE 3% Proxy 5% WebKit 46% Chromium 30%
  34. 34. 1- mobile web today - Understand the real ecosystem - The Android browsers - The WebView - Don’t think you are an average user
  35. 35. 2- mobile & performance - Perception - Differences - Cellular networks - Responsive Web Design
  36. 36. immediate feedback 100ms perception Jakob Nielsen - Usability Engineering
  37. 37. immediate feedback 100ms losing user’s flow of thoughts 1s perception Jakob Nielsen - Usability Engineering
  38. 38. 500ms delay, +26% user’s frustration perception Source: Radware
  39. 39. 40% of users abandon an article if it doesn't load after six seconds “ ” Danny Bernstein, Google
  40. 40. Pages loaded 3.9x faster with Crystal and used 53% less bandwidth “ ” Crystal, an iOS ad-blocker
  41. 41. perception Source: Google Developers RAIL
  42. 42. perception RAIL 100ms
  43. 43. perception RAIL 100ms 16ms
  44. 44. perception RAIL 100ms 16ms 50ms
  45. 45. perception RAIL 100ms 16ms 50ms 1s
  46. 46. why do we need special care on mobile?
  47. 47. Cellular connections differences
  48. 48. We have 4G! We don't need to worry about performance... ( )
  49. 49. cellular 0 25 50 75 100 US Western Europe Asia Global 4G 2G/3G Only 10% is on 4G globally
  50. 50. cellular 0 25 50 75 100 US Western Europe Asia Global 4G 2G/3G ~30% of the time 4G was not used
  51. 51. Real Bandwidth (Mbps) cellular networks 0 3.5 7 10.5 14 2G 3G Wifi 4G
  52. 52. RTT - latency cellular networks 2G 3G 4G Home 0 250 500 750 1000 Min Max
  53. 53. latency request bandwidth
  54. 54. Safari, Chrome, Android 88%93%
  55. 55. 1% 5% 4% Other non-Android, non-iOS 6% Safari, Chrome, Android 88%94%
  56. 56. responsive web design
  57. 57. Responsive Web Design is a TOOL
  58. 58. Responsive Web Design is NOT a GOAL
  59. 59. Users DON’T care if your site is RESPONSIVE (in terms of RWD)
  60. 60. Users DO care if the site is FAST
  61. 61. Wait there! Google said it will penalize non-responsive sites… ( )
  62. 62. Mmm…. NOT REALLY
  63. 63. 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
  64. 64. 3- tools
  65. 65. 3- tools - where - measuring loading times - measuring responsiveness - online tools - html5 apis
  66. 66. Simulator & Emulator Real device where
  67. 67. 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%
  68. 68. 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%
  69. 69. DEMO
  70. 70. online tools
  71. 71. online tools
  72. 72. online tools
  73. 73. online tools
  74. 74. remote inspectors
  75. 75. 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%
  76. 76. Measuring DEMO
  77. 77. Proxies / Network sniffers • Charles Proxy • Fiddler 
 tools Image from telerik fiddler
  78. 78. Connection simulators • Network link conditioner (Mac/iOS) • Charles Proxy • Clumsy for Windows • Net Limiter for Windows • SlowyApp for Mac • Chrome Developer Tools 
 tools
  79. 79. 3- tools - Learn where to test - Measure loading times - Measure responsiveness
  80. 80. 4- apis & specs for performance
  81. 81. Navigation Timing API • window.performance • Timestamps available 
 html5 apis
  82. 82. 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%
  83. 83. Navigation Timing API html5 apis DEMO
  84. 84. Resource Timing API • Information per resource 
 html5 apis
  85. 85. 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%
  86. 86. 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
  87. 87. 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%
  88. 88. Service Workers • Manage offline cache • Background sync • Push Notifications 
 html5 apis
  89. 89. 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%
  90. 90. Request Idle Callback • Do something when the browser is idle • Chrome 47+ (beta today) 
 html5 apis
  91. 91. HTTP Client Hints • HTTP Headers: dpr, viewport’s width • Chrome 46+ • New: save-data (future) 
 html5 apis
  92. 92. HTTP/2 • Performance from scratch • Header Compression • TCP connection reuse • Push to Cache • Early tests show 15-60% load time improvement 

  93. 93. HTTP/2 • TLS-based only today • Good compatibility • Upgrade your servers • Upgrade connections 

  94. 94. 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%
  95. 95. AMP-HTML
  96. 96. 4- apis & specs - HTML5 APIs - Look for the near future - HTTP/2 when possible
 - AMP new idea
  97. 97. 5- Extreme Performance Tips
  98. 98. Network Layer Stop Signs RWD as a goal HTML in 14k CSS ASAP JavaScript as dessert Fast UI Web Views
  99. 99. Image from developers.google.com
  100. 100. What!!? Do you expect a page load in 200ms? ( )
  101. 101. No really, we just need the PERCEPTION
  102. 102. Network Layer
  103. 103. Network Layer • Reduce DNS and HTTP requests • Domain Sharding • Gzip responses • 14Kb congestion window for achieve 1s
  104. 104. 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
  105. 105. Stop Signs
  106. 106. REDIRECTS
  107. 107. APP BANNER
  108. 108. CLIENT RENDERING
  109. 109. 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
  110. 110. 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
  111. 111. RWD as a Goal
  112. 112. RESPONSIVE WEB DESIGN is the future
  113. 113. We are not saying go m.*
  114. 114. 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
  115. 115. But we are front-end!
  116. 116. Time to rethink priorities and architecture 
 Server Client Frontend engineer 
 Backend engineer 

  117. 117. Server Client Frontend engineer 
Backend engineer 
 Frontend server
  118. 118. HTML in 14Kb
  119. 119. • ATF in 1s = 1 RTT ~ < 14Kb (compressed) • > 14Kb will create another roundtrip • HTML + CSS + JavaScript • Images?
  120. 120. We need to separate ABOVE THE FOLD (ATF) content
  121. 121. Distract the user
  122. 122. HTML in 14Kb • ATF content in 14Kb • Create an AMP-HTML version if applicable • Speed future visits • HD/SD contexts
  123. 123. 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
  124. 124. Immediate feedback • The 300ms delay • mobile viewport (“user-scalable=no” on some browsers) • FastClick solution

  125. 125. Immediate feedback • Mobile Viewport on Chrome 
 
 <meta name=viewport 
 content="width=device-width"> HTML
  126. 126. Immediate feedback • Mobile Fixed Viewport on IE 
 
 <meta name=viewport 
 content="width=device-width,
 user-scalable=no" > HTML
  127. 127. Immediate feedback • CSS on IE html { -ms-touch-action: manipulation; touch-action: manipulation; } CSS
  128. 128. CSS ASAP
  129. 129. Basic browser behavior HTML JS CSS
  130. 130. Basic browser behavior HTML JS CSS BLOCKS RENDERING
  131. 131. 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
  132. 132. 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
  133. 133. JavaScript as dessert
  134. 134. Basic browser behavior HTML JS CSS BLOCKS PARSING
  135. 135. Avoid JavaScript frameworks • Embrace Vanilla JS • Load it async • Join everything in one JS file • Keep 60fps frame rate consistent 
 JavaScript
  136. 136. • 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
  137. 137. Fast UI
  138. 138. • 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
  139. 139. Your new enemy
  140. 140. NOT THE USER
  141. 141. YOUR DESIGNER
  142. 142. 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
  143. 143. Web Views
  144. 144. Web Views • Too many on Android • WebKit, Chromium, Amazon, Samsung • Two on iOS: old and new
  145. 145. Web Views • Less performant • Don’t share sessions with the browser • No HTTP/2 support on most of them
  146. 146. Fast Web Views on Android • Project Crosswalk for local content • Chrome Custom Tabs for browsing
  147. 147. Fast Web Views on iOS • Project Crosswalk for local content • WKWebView (iOS 9+) • Safari View Controller for browsing (iOS 9+)
  148. 148. Picture from Simon Howden freedigitalphotos.net! uf! we've covered a lot!
  149. 149. Improve Network Avoid Stop Signs Avoid RWD as a goal HTML in 14k CSS ASAP JavaScript as dessert Fast UI Fast Web Views
  150. 150. 1- Mobile Web today 2- Mobile Performance 3- Tools 4- New APIs & Specs 5- Extreme Performance Tips
  151. 151. Slides, links and tests firtman.github.io/velocity
  152. 152. 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
  153. 153. you can reach a good experience firtman@gmail.com @firt firt.mobi/hpmwfirt.mobi/mh5

×