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 
maximiliano @firtman 
firt.mobi 
Barcelona, Nov 19 2014
NEW! 
SOON!
Slides, links and tests 
firtman.github.io/velocity
questions 
yes, please 
QA at the end 
(en español también)
performance + mobile + web 
1- Mobile Web today 
2- Performance & Mobile 
3- Tools 
4- Initial loading & perception 
5- Re...
1- mobile web today* 
*today: november 2014
1- mobile web today 
- Web Platforms 
- The Android’s problem
web platforms
web platforms 
iOS and Android
Links at firtman,github.io/velocity web platforms 
Adobe Digital Index 
NetMarketShare 
Akamai.io 
Wikimedia Stats 
StatCo...
web platforms 
Windows Phone 
Others 
4% 
3% 
Opera 
5% 
iOS 
50% 
Android 
38%
web platforms 
iOS 
50% 
Safari 
100%
web platforms 
iOS 
50% 
Apps (Web View) 
12% 
Safari 
88%
web platforms 
iOS 
50% 
7.x 
40% 
6.x 
5% 
8.x 
55% 
Source: Apple
web platforms 
InApp iOS 
5% 
Safari iOS7 
20% 
Android 
38% 
Safari iOS8 
25%
web platforms 
Android 
38%
web platforms 
Android 
38% 
Browser 
60% 
Chrome 
40%
1% month
web platforms
web platforms
web platforms
LG G3
web platforms 
Android 
38% 
Samsung 
20% 
Browser 
40% 
Chrome 
40%
web platforms 
iOS 
50% 
Android 
38%
web platforms 
Android 
15% 
Samsung 
10% 
Windows Phone 
Others 
4% 
3% 
Opera 
InApp iOS 5% 
5% 
Safari iOS7 
20% 
Safar...
1- mobile web today 
- Understand the real ecosystem 
- Android browsers 
- Don’t think you are an average user 
- May cha...
2- mobile & performance 
- Perception 
- Differences 
- Cellular networks 
- Responsive Web Design
perception 
immediate feedback 100ms 
Jakob Nielsen - Usability Engineering
perception 
immediate feedback 100ms 
losing user’s flow of thoughts 1s 
Jakob Nielsen - Usability Engineering
perception 
500ms delay, +26% user’s frustration 
Source: Radware
why do we need special 
care on mobile?
CPU and GPU 
Memory 
differences
CPU and GPU 
Memory 
differences 
5x
Wifi 
differences
differences 
Wifi, public spaces?
differences 
Cellular connections
We have 4G! We don't need to 
worry about performance... 
( 
)
cellular 
100 
75 
50 
25 
0 
4G 2G/3G 
Only 4% is on 4G globally 
US Western Europe Asia Global
cellular 
100 
75 
50 
25 
0 
4G 2G/3G 
~30% of the time 4G was not used 
US Western Europe Asia Global
cellular networks 
Real Bandwidth (Mbps) 
2G 3G Wifi 4G 
0 2 4 6 8
RTT - latency 
cellular networks 
2G 
3G 
4G 
Home 
Min Max 
0 250 500 750 1000
latency 
request 
bandwidth
Safari, Chrome, Android 91% 71%
Safari, Chrome, Android 91% 71% 
1% 
7% 
18% 
Other non-Android, non-iOS 10%
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: guyp...
Superbowl advertisers 
mobile approach 
responsive web design 
Responsive site 
50% 
Desktop 
7% 
Mobile 
43% 
Source: blo...
2- mobile and performance 
- Perception: 1s threshold 
- RTT latency 
- Test on low hardware and 2G/3G
3- tools
3- tools 
- where 
- measuring loading times 
- measuring responsiveness 
- online tools 
- html5 apis
Simulator & Emulator 
Real device 
where
emulators 
Samsung 
10% 
Android 
15% 
Others 
4% 
Windows Phone 
3% 
Opera 
5% 
InApp Browser iOS 
5% 
Safari iOS 
45% 
C...
emulators 
Samsung 
10% 
Android 
15% 
Others 
4% 
Windows Phone 
3% 
Opera 
5% 
InApp Browser iOS 
5% 
Safari iOS 
45% 
C...
emulators 
Samsung 
10% 
Android 
15% 
Others 
4% 
Windows Phone 
3% 
Opera 
5% 
InApp Browser iOS 
5% 
Safari iOS 
45% 
C...
DEMO
online tools
online tools
online tools
online tools
remote inspectors
remote inspectors 
Android 
14% 
Samsung 
10% 
Others 
4% 
Windows Phone 
3% 
Opera 
5% 
InApp Browser iOS 
5% 
Safari iOS...
Measuring 
DEMO
Proxies / Network sniffers 
• Charles Proxy 
• Fiddler 
tools 
Image from telerik fiddler
Connection simulators 
tools 
• Network link conditioner (Mac/iOS) 
• Charles Proxy 
• Clumsy for Windows 
• Net Limiter f...
html5 apis
Navigation Timing API 
• window.performance 
• Timestamps available 
html5 apis
navigation timing api 
Android* 
12% 
Samsung 
12% 
Others 
4% 
Windows Phone 
3% 
Opera 
5% 
InApp Browser iOS 
5% 
Safar...
Navigation Timing API 
html5 apis 
:)
Navigation Timing API 
html5 apis 
:/ .1
html5 apis 
iOS SDK Release Notes for iOS 8.1
Navigation Timing API 
html5 apis 
DEMO
Resource Timing API 
• Information per resource 
• Chrome and IE11 only 
html5 apis
Network information API 
html5 apis 
• Android Browser, Silk (spec #1) type 
• BlackBerry 10, old Firefox (spec #2) bandwi...
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 
-...
Image from developers.google.com
What!!? Do you expect a page load 
in 200ms? 
( 
)
No really, we just need the 
PERCEPTION
Let’s see 
HOW
= REDIRECTS
Redirects 
• From 150 to 1000 ms per redirect 
• mydomain.com -> m.mydomain.com 
• URL shorteners
Redirects 
DEMO
= APP BANNER
= APP SPAM
• From 1 to 5s
idontwantyourfuckingapp.tumblr.com
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 
RTT 
• TCP slow start 
• Initial congestion window: ~14.6Kb (compressed) 
• > 14Kb will create another roun...
We need to separate 
ABOVE THE FOLD (ATF) 
content
ATF in 1s = 1 RTT ~ < 14Kb 
HTML + CSS + JavaScript 
Images? 
ATF
Avoid JavaScript frameworks 
ATF 
• Embrace Vanilla JS 
• If you really need them, load them after ATF 
• Think on alterna...
Careful with Data URI in CSS 
ATF 
• Images are non-blocking by default 
• Using Data URI in CSS creates blocking images 
...
Compress resources 
• Use Gzip in HTTP 
• For text-based files only
Client side rendering 
ATF 
• Careful with client-side frameworks 
• Try to render the initial view server-side 
• Render ...
Client side rendering 
ATF 
• Careful with client-side frameworks 
• Try to render the initial view server-side 
• Render ...
Web Fonts 
• Blocks text rendering 
• Fonts are bigger than 14Kb 
• Use them with care 
• Remove characters 
• Simplify gl...
Responsive Web Design
Responsive Web Design 
• Media queries block rendering (all of them) 
• ATF content on mobile is not the same
DON’T rely on 
RWD techniques only 
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 
...
After ATF is ready 
• Load rest of your content 
• Gain experience while rendering ATF: 
current performance, screen densi...
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 fo...
5- responsiveness & experience
4- responsiveness & experience 
- consistent frame rate 
- immediate feedback 
- scrolling 
- your new enemy
consistent fps 
Keep framerate high and consistent 
• Main UI thread as free as possible 
• Avoid repainting (software bit...
JavaScript 
framerate 
• Avoid DOM manipulations inside loops/scroll 
var e = document.querySelector("#test"); 
for (var i...
CSS 
framerate 
• Promote GPU layers smartly 
selector { 
-webkit-transform: translateZ(0); 
-webkit-perspective: 1000; 
}...
Animations 
framerate 
• Don’t animate from JavaScript for basic stuff 
• Use requestAnimationFrame
remember 100ms immediate 
feedback?
Immediate feedback 
• The 300ms delay 
• mobile viewport (“user-scalable=no” on some browsers) 
• FastClick solution
Immediate feedback 
• FastClick solution
Immediate feedback 
• Mobile Viewport on Chrome 
<meta name=viewport 
content="width=device-width"> 
HTML
Immediate feedback 
• Mobile Fixed Viewport on IE 
<meta name=viewport 
content="width=device-width, 
user-scalable=no" > ...
Immediate feedback 
• CSS on IE 
html { 
-ms-touch-action: manipulation; 
touch-action: manipulation; 
} 
CSS
Distract the user
Storage for immediate feedback 
• web storage vs web sql vs indexeddb 
• think about async vs sync 
• Finally IndexedDB on...
navigator.geolocation 
JAVASCRIPT 
.getCurrentPosition(cbOK, cbKO, 
{ maximumAge: 60000 }); 
Geolocation cache
Scrolling
Scrolling 
• avoid re-painting 
• use touch overflow for momentum 
• don’t use JavaScript scrollers 
• on large scrolling ...
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 
• changes on iOS8
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, sha...
5- responsiveness & experience 
- 100s feedback 
- Consistent fps 
- Avoid CPU repaints 
- Embrace GPU smartly 
- Profile ...
uf! we've 
covered a lot! 
Picture from Simon Howden freedigitalphotos.net!
1- Mobile Web today 
2- Mobile Performance 
3- Tools 
4- Initial load & perception 
5- Responsiveness & experience
Slides, links and tests 
firtman.github.io/velocity
final thoughts 
- measure and profile on the real world 
- don’t redirect, reduce requests 
- atf content in 1s, defer the...
you can reach a good experience 
firtman@gmail.com 
@firt 
firt.mobi/mh5 firt.mobi/pmw 
50% OFF!
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
Próximos SlideShares
Carregando em…5
×

Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014

2.216 visualizações

Publicada em

Slides for the workshop "Extreme Web Performance for Mobile Devices" at Velocity Barcelona 2014

Publicada em: Tecnologia
  • Seja o primeiro a comentar

Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014

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

×