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 Devices - Velocity NY

2.674 visualizações

Publicada em

Presentation at Velocity Conference 2014 New York USA

Publicada em: Software
  • Seja o primeiro a comentar

Extreme Web Performance for Mobile Devices - Velocity NY

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

×