extreme web performance for mobile devices maximiliano @firtman firt.mobi
Slides, links and tests firt.mobi/velocity
questions yes, please ! QA at the end
performance + mobile + web 1- Mobile Web today 2- Performance & Mobile 3- Tools 4- Initial loading & perception 5- Respons...
1- mobile web today* *today: june 2014
1- mobile web today - Web Platforms - The problem of Android - Webapps
web platforms
iOS and Android web platforms
Adobe Digital Index NetMarketShare Akamai.io Wikimedia Stats StatCounter web platformsLinks at firt.mobi/velocity
web platformsOthers 4% Windows Phone 3% Opera 5% iOS! 50% Android! 38%
web platformsOthers 4% Windows Phone 3% Opera 5% iOS! 50% Android! 38% Others?
 • Firefox • UC Browser • Nokia Browser • B...
web platforms iOS! 50% Safari! 100%
web platforms iOS! 50% 6.x! 11% 7.x! 89% Source: Apple
web platforms Safari iOS6 5% Safari iOS7! 45% Android! 38%
web platforms Android! 38%
web platforms Android! 38% Browser! 64% Chrome! 36%
web platforms
web platforms
web platforms Android! 38% Samsung! 32% Browser! 32% Chrome! 36%
web platforms Android! 38% 4.4 4.1-4.3 4.0 2.3 Source: Android Dashboard
web platformsOthers 4% Windows Phone 3% Opera 5% iOS! 50% Android! 38%
web platforms Samsung! 12% Android! 12% Others 4% Windows Phone 3% Opera 5% Safari iOS6 5% Safari iOS7! 45% Chrome! 14% Ot...
in a month… new phone
future
future
future
future
it’s not just about browsers
webapps
full screen webapps home screen webapps webapps are also known as( )
webapps Browser’s engine! 1- Web.app (~Safari) on iOS 2- Chrome on Android 3- Firefox on Android and FxOS
webapps native webapps
hybrid apps packaged webapps native webapps are also known as( )
webapps Web View
webapps Web View on iOS ! 1- UIWebView on iOS 7 2- WKWebView on iOS 8
webapps Web View on Android! 1- WebKit from 2.x to 4.3 2- Chromium 30 on 4.4 3- Chromium on Samsung 4- Chromium on Fire OS
webapps Web View on Windows ! 1- IE 10 on Windows (Phone) 8 2- IE 11 on Windows (Phone) 8.1
1- mobile web today - Understand the real ecosystem - Android browsers - Don’t think you are an average user - Webapp solu...
2- mobile & performance - Perception - Differences - Cellular networks - Responsive Web Design - Some data
immediate feedback 100ms ! perception Jakob Nielsen - Usability Engineering
immediate feedback 100ms losing user’s flow of thoughts 1s perception Jakob Nielsen - Usability Engineering
500ms delay, +26% user’s frustration perception Source: Radware
“page slowdowns negatively affected people’s long-term impression of the entire brand” perception Source: Radware
why do we need special care on mobile?
CPU and GPU Memory differences
CPU and GPU Memory differences 5x
Wifi differences
Wifi, public spaces? differences
Cellular connections differences
We have 4G! We don't need to worry about performance... ( )
cellular 0 25 50 75 100 US Western Europe Asia Global 4G 2G/3G Only 2.2% is on 4G globally
cellular 0 25 50 75 100 US Western Europe Asia Global 4G 2G/3G ~40% of the time 4G was not used
Real Bandwidth (Mbps) cellular networks 0 2 4 6 8 2G 3G Wifi 4G
RTT - latency cellular networks 2G 3G 4G Home 0 250 500 750 1000 Min Max
latency request bandwidth
responsive web design
Responsive Web Design is a TOOL
Responsive Web Design is NOT a GOAL
Users DON’T care if your site is RESPONSIVE (in terms of RWD)
Users DO care if the site is FAST
Page size mobile vs desktop responsive web design Much smaller! 6% Slightly smaller! 22% Same Size! 72% Source: guypo.com
Superbowl advertisers mobile approach responsive web design Responsive site! 50% Desktop! 7% Mobile ! 43% Source: blogs.ke...
2- mobile and performance - Perception: 1s threshold - RTT latency - Test on low hardware and 2G/3G - Responsive Web Desig...
3- tools
3- tools - where - measuring loading times - measuring responsiveness - online tools - html5 apis
Simulator & Emulator Real device where
emulators Samsung! 12% Android! 12% Others! 4% Windows Phone 3% Opera 5% Safari iOS6 5% Safari iOS7! 45% Chrome! 14%
emulators Samsung! 12% Android! 12% Others! 4% Windows Phone! 3% Opera 5% Safari iOS6 5% Safari iOS7! 45% Chrome! 14%
emulators Samsung! 12% Android! 12% Others! 4% Windows Phone 3% Opera 5% Safari iOS6 5% Safari iOS7! 45% Chrome! 14%
DEMO
online tools
online tools
remote inspectors
remote inspectors Samsung! 12% Android! 12% Others! 4% Windows Phone! 3% Opera 5% Safari iOS6 5% Safari iOS7! 45% Chrome! ...
Measuring DEMO
Proxies / Network sniffers • Charles Proxy • Fiddler 
 tools Image from telerik fiddler
Connection simulators • Charles Proxy • Clumsy for Windows • Network link conditioner from Xcode • Net Limiter for Windows...
Navigation Timing API • window.performance • Timestamps available 
 html5 apis
navigation timing api Samsung! 12% Android! 12% Others! 4% Windows Phone! 3% Opera 5% Safari iOS6! 5% Safari iOS7! 45% Chr...
Navigation Timing API html5 apis DEMO
Resource Timing API • Information per resource 
 html5 apis
resource timing api Samsung! 12% Android! 12% Others! 4% Windows Phone! 3% Opera 5% Safari iOS6! 5% Safari iOS7! 45% Chrom...
3- tools - Learn where to test - Measure loading times - Measure responsiveness - HTML5 APIs !
4- initial loading & perception
4- initial loading & perception - 1 second threshold - classic checklist - ATF and the rest - responsive web design - futu...
Image from developers.google.com
What!!? Do you expect a page load in 200ms? ( )
No really, we just need the PERCEPTION of 1s
Redirects • From 150 to 1000 ms per redirect • mydomain.com -> m.mydomain.com • URL shorteners 

Redirections DEMO
Redirections • From 1 to 5s ! 

idontwantyourfuckingapp.tumblr.com
Compress resources • Use Gzip in HTTP • For text-based files only 

Basic browser behavior • Network Fetch • Parsing • Rendering
Basic browser behavior HTML JS CSS
Basic browser behavior HTML JS CSS BLOCKS PARSING BLOCKS RENDERING
The 14K limit
The 14K limit • TCP slow start • Initial congestion window: ~14.6Kb (compressed) • > 14Kb will create another roundtrip
We need to separate AVOBE THE FOLD (ATF) content
ATF in 1s = 1 RTT ~ < 14Kb ATF
Data URI in CSS • Images are non-blocking by default • Using Data URI in CSS creates blocking images • Use them only on no...
Client side rendering • Careful with client-side frameworks • Try to render the initial view server-side • Render at least...
Client side rendering • Careful with client-side frameworks • Try to render the initial view server-side • Render at least...
Use illusion tricks • Loading content animation • Minimal-ui viewport ASAP (iOS 7.1+) • Remember to keep the user engaged ...
Web Fonts • Blocks text rendering • Fonts are bigger than 14Kb • Use them with care • Remove characters ATF
Responsive Web Design
Responsive Web Design ATF on mobile is not the same as on desktop 

RWD
RWD
RWD
RWD not how it works by default
RWD
RWD
RWD
DON’T rely on RESPONSIVE WEB DESIGN for first view
RESPONSIVE WEB DESIGN is the future
We are not saying go m.*
Responsive Web Design • Using same URL for mobile/desktop still a good a idea • Mix it with RESS / adaptive web design • L...
After ATF is ready • Load rest of your content • Use ATF experience: 
 current performance, screen density, bandwidth • Ma...
Async scripts <script async src=""></script> HTML5
Defer non-ATF CSS • No defer or async attributes (yet) • Inject <link> after rendering • load, requestAnimationFrame
Speed future visits • Be cache friendly • Use Application Cache for ATF content • Create a custom cache
4- initial loading & perception - ATF in 1s (illusion) - No redirects, GZip, no scripts - Only ATF CSS, careful with fonts...
5- responsiveness & experience
4- responsiveness & experience - consistent frame rate - immediate feedback - scrolling - your new enemy
Keep framerate high and consistent • Main UI thread as free as possible • Avoid repainting (software bitmap calculations) ...
JavaScript framerate • Avoid DOM manipulations inside loops/scroll 
 
 var e = document.querySelector("#test");
 for (var ...
CSS framerate • Promote GPU layers smartly 
 selector { -webkit-transform: translateZ(0); -webkit-perspective: 1000; } ! s...
Animations framerate • Don’t animate from JavaScript for basic stuff • Use requestAnimationFrame 

remember 100ms immediate feedback?
Immediate feedback • The 300ms delay ! • fixed viewport • FastClick solution

Storage for immediate feedback • web storage vs web sql vs indexeddb • Finally IndexedDB on iOS 8!
navigator.geolocation
 .getCurrentPosition(cbOK, cbKO, { maximumAge: 60000 }); JAVASCRIPT Geolocation cache
Distract the user
Scrolling
Scrolling • avoid re-painting • use touch overflow for momentum • don’t use JavaScript scrollers • on large scrolling area...
Large scrolling areas Let’s copy native frameworks: • iOS: UITableView • Android: ListView & Adapters
Large scrolling areas • Object pool !
Infinite scroll • DOM vs. iframe vs. object pool • on iOS 8 new API (caution: on beta)
Your new enemy
NOT THE USER
YOUR DESIGNER
Careful with some design features • GPU vs CPU repaint • Important on scroll, transitions & animations
Careful with some design features • Transforms: translate, scale, rotate and opacity GPU • border-radius, gradients, shado...
5- responsiveness & experience - 100s feedback - Consistent fps - Avoid CPU repaints - Embrace GPU smartly - Profile & tes...
Picture from Simon Howden freedigitalphotos.net! uf! we've covered a lot!
1- Mobile Web today 2- Mobile Performance 3- Tools 4- Initial load & perception 5- Responsiveness & experience
Slides, links and tests firt.mobi/velocity
final thoughts - measure and profile - on real devices - be simple, be aggressive
you can reach a good experience Pictures)from)freedigitalphotos.net) thank you! twitter: @firt mobilexweb.com firt.mobi/p...
Extreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile Devices
Upcoming SlideShare
Loading in …5
×

Extreme Web Performance for Mobile Devices

34,409 views

Published on

Conference at Velocity Santa Clarar 2014

Published in: Software, Technology, Design
1 Comment
35 Likes
Statistics
Notes
no profile picture user
Show More
No Downloads
Views
Total views
34,409
On SlideShare
0
From Embeds
0
Number of Embeds
468
Actions
Shares
0
Downloads
217
Comments
1
Likes
35
Embeds 0
No embeds

No notes for slide

Extreme Web Performance for Mobile Devices

  1. extreme web performance for mobile devices maximiliano @firtman firt.mobi
  2. Slides, links and tests firt.mobi/velocity
  3. questions yes, please ! QA at the end
  4. performance + mobile + web 1- Mobile Web today 2- Performance & Mobile 3- Tools 4- Initial loading & perception 5- Responsiveness & experience
  5. 1- mobile web today* *today: june 2014
  6. 1- mobile web today - Web Platforms - The problem of Android - Webapps
  7. web platforms
  8. iOS and Android web platforms
  9. Adobe Digital Index NetMarketShare Akamai.io Wikimedia Stats StatCounter web platformsLinks at firt.mobi/velocity
  10. web platformsOthers 4% Windows Phone 3% Opera 5% iOS! 50% Android! 38%
  11. web platformsOthers 4% Windows Phone 3% Opera 5% iOS! 50% Android! 38% Others?
 • Firefox • UC Browser • Nokia Browser • BlackBerry Browser
  12. web platforms iOS! 50% Safari! 100%
  13. web platforms iOS! 50% 6.x! 11% 7.x! 89% Source: Apple
  14. web platforms Safari iOS6 5% Safari iOS7! 45% Android! 38%
  15. web platforms Android! 38%
  16. web platforms Android! 38% Browser! 64% Chrome! 36%
  17. web platforms
  18. web platforms
  19. web platforms Android! 38% Samsung! 32% Browser! 32% Chrome! 36%
  20. web platforms Android! 38% 4.4 4.1-4.3 4.0 2.3 Source: Android Dashboard
  21. web platformsOthers 4% Windows Phone 3% Opera 5% iOS! 50% Android! 38%
  22. web platforms Samsung! 12% Android! 12% Others 4% Windows Phone 3% Opera 5% Safari iOS6 5% Safari iOS7! 45% Chrome! 14% Others?
 • Firefox • UC Browser • Nokia Browser • BlackBerry Browser
  23. in a month… new phone
  24. future
  25. future
  26. future
  27. future
  28. it’s not just about browsers
  29. webapps
  30. full screen webapps home screen webapps webapps are also known as( )
  31. webapps Browser’s engine! 1- Web.app (~Safari) on iOS 2- Chrome on Android 3- Firefox on Android and FxOS
  32. webapps native webapps
  33. hybrid apps packaged webapps native webapps are also known as( )
  34. webapps Web View
  35. webapps Web View on iOS ! 1- UIWebView on iOS 7 2- WKWebView on iOS 8
  36. webapps Web View on Android! 1- WebKit from 2.x to 4.3 2- Chromium 30 on 4.4 3- Chromium on Samsung 4- Chromium on Fire OS
  37. webapps Web View on Windows ! 1- IE 10 on Windows (Phone) 8 2- IE 11 on Windows (Phone) 8.1
  38. 1- mobile web today - Understand the real ecosystem - Android browsers - Don’t think you are an average user - Webapp solutions - May change future
  39. 2- mobile & performance - Perception - Differences - Cellular networks - Responsive Web Design - Some data
  40. immediate feedback 100ms ! perception Jakob Nielsen - Usability Engineering
  41. immediate feedback 100ms losing user’s flow of thoughts 1s perception Jakob Nielsen - Usability Engineering
  42. 500ms delay, +26% user’s frustration perception Source: Radware
  43. “page slowdowns negatively affected people’s long-term impression of the entire brand” perception Source: Radware
  44. why do we need special care on mobile?
  45. CPU and GPU Memory differences
  46. CPU and GPU Memory differences 5x
  47. Wifi differences
  48. Wifi, public spaces? differences
  49. Cellular connections differences
  50. We have 4G! We don't need to worry about performance... ( )
  51. cellular 0 25 50 75 100 US Western Europe Asia Global 4G 2G/3G Only 2.2% is on 4G globally
  52. cellular 0 25 50 75 100 US Western Europe Asia Global 4G 2G/3G ~40% of the time 4G was not used
  53. Real Bandwidth (Mbps) cellular networks 0 2 4 6 8 2G 3G Wifi 4G
  54. RTT - latency cellular networks 2G 3G 4G Home 0 250 500 750 1000 Min Max
  55. latency request bandwidth
  56. responsive web design
  57. Responsive Web Design is a TOOL
  58. Responsive Web Design is NOT a GOAL
  59. Users DON’T care if your site is RESPONSIVE (in terms of RWD)
  60. Users DO care if the site is FAST
  61. Page size mobile vs desktop responsive web design Much smaller! 6% Slightly smaller! 22% Same Size! 72% Source: guypo.com
  62. Superbowl advertisers mobile approach responsive web design Responsive site! 50% Desktop! 7% Mobile ! 43% Source: blogs.keynote.com
  63. 2- mobile and performance - Perception: 1s threshold - RTT latency - Test on low hardware and 2G/3G - Responsive Web Design !
  64. 3- tools
  65. 3- tools - where - measuring loading times - measuring responsiveness - online tools - html5 apis
  66. Simulator & Emulator Real device where
  67. emulators Samsung! 12% Android! 12% Others! 4% Windows Phone 3% Opera 5% Safari iOS6 5% Safari iOS7! 45% Chrome! 14%
  68. emulators Samsung! 12% Android! 12% Others! 4% Windows Phone! 3% Opera 5% Safari iOS6 5% Safari iOS7! 45% Chrome! 14%
  69. emulators Samsung! 12% Android! 12% Others! 4% Windows Phone 3% Opera 5% Safari iOS6 5% Safari iOS7! 45% Chrome! 14%
  70. DEMO
  71. online tools
  72. online tools
  73. remote inspectors
  74. remote inspectors Samsung! 12% Android! 12% Others! 4% Windows Phone! 3% Opera 5% Safari iOS6 5% Safari iOS7! 45% Chrome! 14%
  75. Measuring DEMO
  76. Proxies / Network sniffers • Charles Proxy • Fiddler 
 tools Image from telerik fiddler
  77. Connection simulators • Charles Proxy • Clumsy for Windows • Network link conditioner from Xcode • Net Limiter for Windows • SlowyApp for Mac 
 tools
  78. Navigation Timing API • window.performance • Timestamps available 
 html5 apis
  79. navigation timing api Samsung! 12% Android! 12% Others! 4% Windows Phone! 3% Opera 5% Safari iOS6! 5% Safari iOS7! 45% Chrome! 14%
  80. Navigation Timing API html5 apis DEMO
  81. Resource Timing API • Information per resource 
 html5 apis
  82. resource timing api Samsung! 12% Android! 12% Others! 4% Windows Phone! 3% Opera 5% Safari iOS6! 5% Safari iOS7! 45% Chrome! 14%
  83. 3- tools - Learn where to test - Measure loading times - Measure responsiveness - HTML5 APIs !
  84. 4- initial loading & perception
  85. 4- initial loading & perception - 1 second threshold - classic checklist - ATF and the rest - responsive web design - future visits
  86. Image from developers.google.com
  87. What!!? Do you expect a page load in 200ms? ( )
  88. No really, we just need the PERCEPTION of 1s
  89. Redirects • From 150 to 1000 ms per redirect • mydomain.com -> m.mydomain.com • URL shorteners 

  90. Redirections DEMO
  91. Redirections • From 1 to 5s ! 

  92. idontwantyourfuckingapp.tumblr.com
  93. Compress resources • Use Gzip in HTTP • For text-based files only 

  94. Basic browser behavior • Network Fetch • Parsing • Rendering
  95. Basic browser behavior HTML JS CSS
  96. Basic browser behavior HTML JS CSS BLOCKS PARSING BLOCKS RENDERING
  97. The 14K limit
  98. The 14K limit • TCP slow start • Initial congestion window: ~14.6Kb (compressed) • > 14Kb will create another roundtrip
  99. We need to separate AVOBE THE FOLD (ATF) content
  100. ATF in 1s = 1 RTT ~ < 14Kb ATF
  101. 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
  102. Client side rendering • Careful with client-side frameworks • Try to render the initial view server-side • Render at least a basic view ATF
  103. Client side rendering • Careful with client-side frameworks • Try to render the initial view server-side • Render at least a basic view ATF 5x
  104. Use illusion tricks • Loading content animation • Minimal-ui viewport ASAP (iOS 7.1+) • Remember to keep the user engaged in 1s ATF
  105. Web Fonts • Blocks text rendering • Fonts are bigger than 14Kb • Use them with care • Remove characters ATF
  106. Responsive Web Design
  107. Responsive Web Design ATF on mobile is not the same as on desktop 

  108. RWD
  109. RWD
  110. RWD
  111. RWD not how it works by default
  112. RWD
  113. RWD
  114. RWD
  115. DON’T rely on RESPONSIVE WEB DESIGN for first view
  116. RESPONSIVE WEB DESIGN is the future
  117. We are not saying go m.*
  118. 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
  119. After ATF is ready • Load rest of your content • Use ATF experience: 
 current performance, screen density, bandwidth • Make decisions: HD/SD
  120. Async scripts <script async src=""></script> HTML5
  121. Defer non-ATF CSS • No defer or async attributes (yet) • Inject <link> after rendering • load, requestAnimationFrame
  122. Speed future visits • Be cache friendly • Use Application Cache for ATF content • Create a custom cache
  123. 4- initial loading & perception - ATF in 1s (illusion) - No redirects, GZip, no scripts - Only ATF CSS, careful with fonts - Defer anything else !
  124. 5- responsiveness & experience
  125. 4- responsiveness & experience - consistent frame rate - immediate feedback - scrolling - your new enemy
  126. Keep framerate high and consistent • Main UI thread as free as possible • Avoid repainting (software bitmap calculations) consistent fps
  127. JavaScript framerate • Avoid DOM manipulations inside loops/scroll 
 
 var e = document.querySelector("#test");
 for (var i=0; i<100; i++) { // change e attributes }); JAVASCRIPT
  128. CSS framerate • Promote GPU layers smartly 
 selector { -webkit-transform: translateZ(0); -webkit-perspective: 1000; } ! selector { z-index: 10; } CSS
  129. Animations framerate • Don’t animate from JavaScript for basic stuff • Use requestAnimationFrame 

  130. remember 100ms immediate feedback?
  131. Immediate feedback • The 300ms delay ! • fixed viewport • FastClick solution

  132. Storage for immediate feedback • web storage vs web sql vs indexeddb • Finally IndexedDB on iOS 8!
  133. navigator.geolocation
 .getCurrentPosition(cbOK, cbKO, { maximumAge: 60000 }); JAVASCRIPT Geolocation cache
  134. Distract the user
  135. Scrolling
  136. Scrolling • avoid re-painting • use touch overflow for momentum • don’t use JavaScript scrollers • on large scrolling areas: copy native
  137. Large scrolling areas Let’s copy native frameworks: • iOS: UITableView • Android: ListView & Adapters
  138. Large scrolling areas • Object pool !
  139. Infinite scroll • DOM vs. iframe vs. object pool • on iOS 8 new API (caution: on beta)
  140. Your new enemy
  141. NOT THE USER
  142. YOUR DESIGNER
  143. Careful with some design features • GPU vs CPU repaint • Important on scroll, transitions & animations
  144. Careful with some design features • Transforms: translate, scale, rotate and opacity GPU • border-radius, gradients, shadows, filters CPU repaint
  145. 5- responsiveness & experience - 100s feedback - Consistent fps - Avoid CPU repaints - Embrace GPU smartly - Profile & test !
  146. Picture from Simon Howden freedigitalphotos.net! uf! we've covered a lot!
  147. 1- Mobile Web today 2- Mobile Performance 3- Tools 4- Initial load & perception 5- Responsiveness & experience
  148. Slides, links and tests firt.mobi/velocity
  149. final thoughts - measure and profile - on real devices - be simple, be aggressive
  150. you can reach a good experience Pictures)from)freedigitalphotos.net) thank you! twitter: @firt mobilexweb.com firt.mobi/pmw Book signing:
 Thu 10.45am

×