O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Extreme Web Performance for Mobile Device Fluent 2015

2.326 visualizações

Publicada em

Slides for the workshop at Fluent 2015, San Francisco

Publicada em: Tecnologia
  • Seja o primeiro a comentar

Extreme Web Performance for Mobile Device Fluent 2015

  1. 1. extreme web performance for mobile devices maximiliano @firtman firt.mobi San Francisco, April, 20th 2015
  2. 2. NEW ! SOON!
  3. 3. Slides, links and tests firtman.github.io/fluent
  4. 4. questions yes, please QA at the end (also Office Hours tomorrow 2.15)
  5. 5. performance + mobile + web 1- Mobile Web today 2- Performance & Mobile 3- Tools 4- Initial loading & perception 5- Responsiveness & experience
  6. 6. first… Web Performance Optimization How important WPO is for conversion
  7. 7. 1- mobile web today* *today: april 2015
  8. 8. 1- mobile web today - Web Platforms - The Android’s problem
  9. 9. web platforms
  10. 10. iOS and Android web platforms
  11. 11. Adobe Digital Index NetMarketShare Akamai.io Wikimedia Stats StatCounter MOVR by WURFL web platformsLinks at firtman,github.io/fluent
  12. 12. web platformsOthers 4% Windows Phone 3% Opera 5% iOS 50% Android 38%
  13. 13. web platforms iOS 50% Safari 100%
  14. 14. web platforms iOS 50% Apps (Web View) 12% Safari 88%
  15. 15. web platforms iOS 50% 7.x 19% 6.x 2% 8.x 79% Source: Apple
  16. 16. web platforms InApp iOS 5% Safari iOS7 9% Safari iOS8 36% Android 38%
  17. 17. web platforms Android 38%
  18. 18. web platforms Android 38% ?
  19. 19. web platforms Android 38% Browser 50% Chrome 50%
  20. 20. -1% month
  21. 21. web platforms
  22. 22. web platforms
  23. 23. web platforms
  24. 24. LG G3
  25. 25. web platforms Android 38% Samsung 20% Browser 30% Chrome 50%
  26. 26. web platforms iOS 50% Android 38%
  27. 27. web platforms Samsung 10% Android 14% Others 4% Windows Phone 3% Opera 5%InApp iOS 5% Safari iOS7 9% Safari iOS8 36% Chrome 15% Others?
 • Firefox • UC Browser • Nokia Browser • BlackBerry Browser
  28. 28. 1- mobile web today - Understand the real ecosystem - Android browsers - Don’t think you are an average user - Everything will change
  29. 29. 2- mobile & performance - Perception - Differences - Cellular networks - Responsive Web Design
  30. 30. immediate feedback 100ms perception Jakob Nielsen - Usability Engineering
  31. 31. immediate feedback <100ms keeping user’s flow of thoughts <1s perception Jakob Nielsen - Usability Engineering
  32. 32. 500ms delay, +26% user’s frustration perception Source: Radware
  33. 33. why do we need special care on mobile?
  34. 34. CPU and GPU Memory differences
  35. 35. CPU and GPU Memory differences 5x
  36. 36. Wifi differences
  37. 37. Wifi, public spaces? differences
  38. 38. Cellular connections differences
  39. 39. We have 4G! We don't need to worry about performance... ( )
  40. 40. cellular 0 25 50 75 100 US Western Europe Asia Global 4G 2G/3G Only 4% is on 4G globally
  41. 41. cellular 0 25 50 75 100 US Western Europe Asia Global 4G 2G/3G ~30% of the time 4G was not used
  42. 42. But that is going to change quickly… ( )
  43. 43. 2019?
 85% in USA and 30% in Europe
 will be on 4G ( ) Source: Ericsson Mobility Report
  44. 44. Real Bandwidth (Mbps) cellular networks 0 2 4 6 8 2G 3G Wifi 4G
  45. 45. RTT - latency cellular networks 2G 3G 4G Home 0 250 500 750 1000 Min Max
  46. 46. latency request bandwidth
  47. 47. Safari, Chrome, Android 91%
  48. 48. Safari, Chrome, Android 71%91%
  49. 49. 1% 7% 18% Other non-Android, non-iOS 10% Safari, Chrome, Android 71%91%
  50. 50. responsive web design
  51. 51. Responsive Web Design is a TOOL
  52. 52. Responsive Web Design is NOT a GOAL
  53. 53. Users DON’T care if your site is RESPONSIVE (in terms of RWD)
  54. 54. Users DO care if the site is FAST
  55. 55. responsive web design Source: guypo.com/rwd2014
  56. 56. responsive web design Source: guypo.com/rwd2014 43% more requests compared with a mobile site
  57. 57. responsive web design Source: guypo.com/rwd2014 129% more data transfer compared with a mobile site
  58. 58. responsive web design Source: guypo.com/rwd2014 87% more CPU time compared with a mobile site
  59. 59. 2- mobile and performance - Perception: 1s threshold - RTT latency - Test on low hardware and 2G/3G - RWD harms performance
  60. 60. 3- tools
  61. 61. 3- tools - where - measuring loading times - measuring responsiveness - online tools - html5 apis
  62. 62. Simulator & Emulator Real device where
  63. 63. emulators Samsung 10% Android 15% Others 4% Windows Phone 3% Opera 5% InApp Browser iOS 5% Safari iOS 45% Chrome 14%
  64. 64. emulators Samsung 10% Android 15% Others 4% Windows Phone 3% Opera 5% InApp Browser iOS 5% Safari iOS 45% Chrome 14%
  65. 65. emulators Samsung 10% Android 15% Others 4% Windows Phone 3% Opera 5% InApp Browser iOS 5% Safari iOS 45% Chrome 14%
  66. 66. DEMO
  67. 67. online tools
  68. 68. online tools
  69. 69. online tools
  70. 70. online tools
  71. 71. remote inspectors
  72. 72. remote inspectors Samsung 10% Android 14% Others 4% Windows Phone 3% Opera 5% InApp Browser iOS 5% Safari iOS 45% Chrome 15%
  73. 73. Measuring DEMO
  74. 74. Proxies / Network sniffers • Charles Proxy • Fiddler 
 tools Image from telerik fiddler
  75. 75. Connection simulators • Network link conditioner (Mac/iOS) • Charles Proxy • Clumsy for Windows • Net Limiter for Windows • SlowyApp for Mac • Chrome Developer Tools 
 tools
  76. 76. html5 apis
  77. 77. Navigation Timing API • window.performance • Timestamps available 
 html5 apis
  78. 78. navigation timing api Samsung 12% Android* 12% Others 4% Windows Phone 3% Opera 5% InApp Browser iOS 5% Safari iOS 45% Chrome 15% * Android browser only from 4.0
  79. 79. Navigation Timing API html5 apis :)
  80. 80. Navigation Timing API html5 apis :/ .1
  81. 81. iOS SDK Release Notes for iOS 8.1 html5 apis
  82. 82. Navigation Timing API html5 apis DEMO
  83. 83. Resource Timing API • Information per resource • Chrome and IE11 only 
 html5 apis
  84. 84. Network information API • Android Browser, Silk (spec #1) type • BlackBerry 10, old Firefox (spec #2) bandwidth • Firefox, Chrome for Android 38+ (spec #3) type 
 html5 apis
  85. 85. 3- tools - Learn where to test - Measure loading times - Measure responsiveness - HTML5 APIs
  86. 86. 4- initial loading & perception
  87. 87. 4- initial loading & perception - 1 second threshold - classic checklist - ATF and the rest - responsive web design - future visits
  88. 88. DNS Lookup
  89. 89. TCP Connection
  90. 90. HTTP Request
  91. 91. Server Response
  92. 92. RENDERING!
  93. 93. RENDERING!
  94. 94. What!!?? 
 a page load in 200ms? ( )
  95. 95. No really, we just need the PERCEPTION
  96. 96. We need to avoid
  97. 97. Basic browser behavior • Network Fetch • Parsing • Rendering
  98. 98. Basic browser behavior HTML JS CSS
  99. 99. HTML JS CSS BLOCKS PARSING BLOCKS RENDERING
  100. 100. = REDIRECTS
  101. 101. Redirects • From 150 to 1000 ms per redirect 

  102. 102. Redirects mydomain.com -> m.mydomain.com

  103. 103. Redirects • URL shorteners: t.co, g.co, bit.ly 

  104. 104. Redirects DEMO
  105. 105. 1. Facebook’s  l.php   2. bit.ly   3. aa.com   4. www.aa.com   5. www.aa.com/HomePage   6. mobile.aa.com   7. mobile.aa.com/HomePage
  106. 106. = APP BANNER
  107. 107. = APP SPAM
  108. 108. delta.com • 1-5 seconds delay 

  109. 109. delta.com • 1-5 seconds delay 

  110. 110. idontwantyourfuckingapp.tumblr.com
  111. 111. = APP BANNER
  112. 112. The 14K limit
  113. 113. The 14K limit • TCP slow start • Initial congestion window: ~14.6Kb • > 14Kb will create another roundtrip RTT
  114. 114. What!!?? 
 the page contents in 14Kb? ( )
  115. 115. It’s 14Kb HTTP response (so, compressed) ~70Kb
  116. 116. We need to separate ABOVE THE FOLD (ATF) content
  117. 117. ATF in 1s ATF
  118. 118. ATF in 1s = 1 RTT ATF
  119. 119. ATF in 1s = 1 RTT ~ 14Kb ATF
  120. 120. ATF in 1s = 1 RTT ~ 14Kb ATF HTML + CSS + JavaScript Images?
  121. 121. How to embrace ATF in 14Kb? ( )
  122. 122. Avoid JavaScript frameworks • Embrace Vanilla JS • If you really need them, load them after ATF • Think on alternatives or partial frameworks 
 ATF
  123. 123. Careful with Data URI in CSS • Images are non-blocking by default • Using Data URI in CSS creates blocking images • Use them only on non-ATF external CSS 
 ATF
  124. 124. Client side rendering • Careful with client-side frameworks • Try to render the initial view server-side • Render at least a basic view ATF
  125. 125. Client side rendering • Careful with client-side frameworks • Try to render the initial view server-side • Render at least a basic view ATF 5x
  126. 126. Web Fonts • Blocks text rendering • Fonts are bigger than 14Kb • Remove characters • Simplify glyphs • Don’t use it on ATF ATF
  127. 127. Responsive Web Design
  128. 128. Responsive Web Design • Media queries block rendering (all of them) • ATF content on mobile is unique
  129. 129. DON’T rely on RWD techniques only for first view
  130. 130. RESPONSIVE WEB DESIGN is the future
  131. 131. We are not saying go m.*
  132. 132. 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 to decide to send ATF only • WURFL or DeviceAtlas
  133. 133. After ATF is ready • Load rest of your content • Gain experience while rendering ATF: 
 current performance, screen density, bandwidth • Make decisions: HD/SD
  134. 134. Async scripts <script async src=""></script> HTML5
  135. 135. Defer non-ATF CSS • No defer or async attributes (yet) • Inject <link> after rendering • load, requestAnimationFrame
  136. 136. Speed future visits • Be cache friendly • Use Application Cache for ATF content • Create a custom cache
  137. 137. 4- initial loading & perception - ATF in 1s (illusion) - No redirects, GZip, no scripts - Only ATF CSS, careful with fonts - Defer anything else
  138. 138. 5- responsiveness & experience
  139. 139. 4- responsiveness & experience - experience - consistent frame rate - immediate feedback - scrolling - your new enemy
  140. 140. Optimize your content for mobile experience
  141. 141. Keep framerate high and consistent • Keep framerate high and consistent • Avoid DOM manipulations in loops/scroll • Careful promoting GPU layers consistent fps
  142. 142. remember 100ms immediate feedback?
  143. 143. Immediate feedback • The 300ms delay • mobile viewport (“user-scalable=no” on some browsers) • FastClick solution

  144. 144. Immediate feedback • Mobile Viewport on Chrome 
 
 <meta name=viewport 
 content="width=device-width"> HTML
  145. 145. Immediate feedback • Mobile Fixed Viewport on IE 
 
 <meta name=viewport 
 content="width=device-width,
 user-scalable=no" > HTML
  146. 146. Immediate feedback • CSS on IE html { -ms-touch-action: manipulation; touch-action: manipulation; } CSS
  147. 147. Distract the user
  148. 148. Storage for immediate feedback • web storage vs web sql vs indexeddb • think about async vs sync • Finally IndexedDB on iOS 8!
  149. 149. Scrolling • avoid re-painting • use touch overflow for momentum • don’t use JavaScript scrollers
  150. 150. Your new enemy
  151. 151. NOT THE USER
  152. 152. YOUR DESIGNER
  153. 153. Careful with some design features • GPU vs CPU repaint • Important on scroll, transitions & animations
  154. 154. Careful with some design features • Transforms: translate, scale, rotate and opacity GPU • border-radius, gradients, shadows, filters CPU repaint
  155. 155. 5- responsiveness & experience - 100s feedback - Consistent fps - Avoid CPU repaints - Embrace GPU smartly - Profile & test
  156. 156. Picture from Simon Howden freedigitalphotos.net! uf! we've covered a lot!
  157. 157. 1- Mobile Web today 2- Mobile Performance 3- Tools 4- Initial load & perception 5- Responsiveness & experience
  158. 158. Slides, links and tests firtman.github.io/fluent
  159. 159. 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
  160. 160. you can reach a good experience firtman@gmail.com @firt firt.mobi/pmwfirt.mobi/mh5 Book signing:
 Tue 18.00 Office Hours:
 Tue 14.15 50% OFF!

×