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

1. extreme web
performance for
mobile devices
maximiliano @firtman
firt.mobi
Barcelona, Nov 19 2014

4. NEW!
SOON!

6. Slides, links and tests
firtman.github.io/velocity

7. questions
yes, please
QA at the end
(en español también)

8. performance + mobile + web
1- Mobile Web today
2- Performance & Mobile
3- Tools
4- Initial loading & perception
5- Responsiveness & experience

10. 1- mobile web today*
*today: november 2014

11. 1- mobile web today
- Web Platforms
- The Android’s problem

12. web platforms

13. web platforms
iOS and Android

14. Links at firtman,github.io/velocity web platforms
Adobe Digital Index
NetMarketShare
Akamai.io
Wikimedia Stats
StatCounter
MOVR by WURFL

15. web platforms
Windows Phone
Others
4%
3%
Opera
5%
iOS
50%
Android
38%

16. web platforms
iOS
50%
Safari
100%

17. web platforms
iOS
50%
Apps (Web View)
12%
Safari
88%

18. web platforms
iOS
50%
7.x
40%
6.x
5%
8.x
55%
Source: Apple

19. web platforms
InApp iOS
5%
Safari iOS7
20%
Android
38%
Safari iOS8
25%

20. web platforms
Android
38%

21. web platforms
Android
38%
Browser
60%
Chrome
40%

23. 1% month

25. web platforms

26. web platforms

27. web platforms

28. LG G3

29. web platforms
Android
38%
Samsung
20%
Browser
40%
Chrome
40%

33. web platforms
iOS
50%
Android
38%

34. 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

35. 1- mobile web today
- Understand the real ecosystem
- Android browsers
- Don’t think you are an average user
- May change future

36. 2- mobile & performance
- Perception
- Differences
- Cellular networks
- Responsive Web Design

37. perception
immediate feedback 100ms
Jakob Nielsen - Usability Engineering

38. perception
immediate feedback 100ms
losing user’s flow of thoughts 1s
Jakob Nielsen - Usability Engineering

39. perception
500ms delay, +26% user’s frustration
Source: Radware

40. why do we need special
care on mobile?

41. CPU and GPU
Memory
differences

42. CPU and GPU
Memory
differences
5x

43. Wifi
differences

44. differences
Wifi, public spaces?

45. differences
Cellular connections

46. We have 4G! We don't need to
worry about performance...
(
)

47. cellular
100
75
50
25
0
4G 2G/3G
Only 4% is on 4G globally
US Western Europe Asia Global

48. cellular
100
75
50
25
0
4G 2G/3G
~30% of the time 4G was not used
US Western Europe Asia Global

49. cellular networks
Real Bandwidth (Mbps)
2G 3G Wifi 4G
0 2 4 6 8

50. RTT - latency
cellular networks
2G
3G
4G
Home
Min Max
0 250 500 750 1000

51. latency
request
bandwidth

52. Safari, Chrome, Android 91% 71%

53. Safari, Chrome, Android 91% 71%
1%
7%
18%
Other non-Android, non-iOS 10%

54. responsive web design

56. Responsive Web Design
is a TOOL

57. Responsive Web Design
is NOT a GOAL

58. Users DON’T care if your site is
RESPONSIVE
(in terms of RWD)

59. Users DO care if the site is
FAST

60. Page size
mobile vs desktop
responsive web design
Much smaller
6%
Slightly smaller
22%
Same Size
72%
Source: guypo.com

61. Superbowl advertisers
mobile approach
responsive web design
Responsive site
50%
Desktop
7%
Mobile
43%
Source: blogs.keynote.com

64. 2- mobile and performance
- Perception: 1s threshold
- RTT latency
- Test on low hardware and 2G/3G

65. 3- tools

66. 3- tools
- where
- measuring loading times
- measuring responsiveness
- online tools
- html5 apis

67. Simulator & Emulator
Real device
where

68. emulators
Samsung
10%
Android
15%
Others
4%
Windows Phone
3%
Opera
5%
InApp Browser iOS
5%
Safari iOS
45%
Chrome
14%

69. emulators
Samsung
10%
Android
15%
Others
4%
Windows Phone
3%
Opera
5%
InApp Browser iOS
5%
Safari iOS
45%
Chrome
14%

70. emulators
Samsung
10%
Android
15%
Others
4%
Windows Phone
3%
Opera
5%
InApp Browser iOS
5%
Safari iOS
45%
Chrome
14%

71. DEMO

72. online tools

73. online tools

74. online tools

75. online tools

76. remote inspectors

77. remote inspectors
Android
14%
Samsung
10%
Others
4%
Windows Phone
3%
Opera
5%
InApp Browser iOS
5%
Safari iOS
45%
Chrome
15%

78. Measuring
DEMO

79. Proxies / Network sniffers
• Charles Proxy
• Fiddler
tools
Image from telerik fiddler

80. Connection simulators
tools
• Network link conditioner (Mac/iOS)
• Charles Proxy
• Clumsy for Windows
• Net Limiter for Windows
• SlowyApp for Mac
• Chrome Developer Tools

81. html5 apis

82. Navigation Timing API
• window.performance
• Timestamps available
html5 apis

83. 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

85. Navigation Timing API
html5 apis
:)

86. Navigation Timing API
html5 apis
:/ .1

87. html5 apis
iOS SDK Release Notes for iOS 8.1

88. Navigation Timing API
html5 apis
DEMO

89. Resource Timing API
• Information per resource
• Chrome and IE11 only
html5 apis

90. 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

91. 3- tools
- Learn where to test
- Measure loading times
- Measure responsiveness
- HTML5 APIs

92. 4- initial loading & perception

93. 4- initial loading & perception
- 1 second threshold
- classic checklist
- ATF and the rest
- responsive web design
- future visits

98. Image from developers.google.com

100. What!!? Do you expect a page load
in 200ms?
(
)

101. No really, we just need the
PERCEPTION

102. Let’s see
HOW

104. = REDIRECTS

105. Redirects
• From 150 to 1000 ms per redirect
• mydomain.com -> m.mydomain.com
• URL shorteners

106. Redirects
DEMO

108. = APP BANNER

109. = APP SPAM

110. • From 1 to 5s

111. idontwantyourfuckingapp.tumblr.com

112. Basic browser behavior
• Network Fetch
• Parsing
• Rendering

113. Basic browser behavior
HTML
JS CSS

114. Basic browser behavior
HTML
JS CSS
BLOCKS PARSING BLOCKS RENDERING

115. The 14K limit

116. The 14K limit
RTT
• TCP slow start
• Initial congestion window: ~14.6Kb (compressed)
• > 14Kb will create another roundtrip

117. We need to separate
ABOVE THE FOLD (ATF)
content

118. ATF in 1s = 1 RTT ~ < 14Kb
HTML + CSS + JavaScript
Images?
ATF

119. Avoid JavaScript frameworks
ATF
• Embrace Vanilla JS
• If you really need them, load them after ATF
• Think on alternatives or partial frameworks

120. 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

121. Compress resources
• Use Gzip in HTTP
• For text-based files only

122. Client side rendering
ATF
• Careful with client-side frameworks
• Try to render the initial view server-side
• Render at least a basic view

123. Client side rendering
ATF
• Careful with client-side frameworks
• Try to render the initial view server-side
• Render at least a basic view
5x

124. Web Fonts
• Blocks text rendering
• Fonts are bigger than 14Kb
• Use them with care
• Remove characters
• Simplify glyphs
ATF

125. Responsive Web Design

126. Responsive Web Design
• Media queries block rendering (all of them)
• ATF content on mobile is not the same

127. DON’T rely on
RWD techniques only
for first view

128. RESPONSIVE WEB DESIGN
is the future

129. We are not saying go m.*

130. 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

131. After ATF is ready
• Load rest of your content
• Gain experience while rendering ATF:
current performance, screen density, bandwidth
• Make decisions: HD/SD

132. Async scripts
<script async src=""></script> HTML5

133. Defer non-ATF CSS
• No defer or async attributes (yet)
• Inject <link> after rendering
• load, requestAnimationFrame

134. Speed future visits
• Be cache friendly
• Use Application Cache for ATF content
• Create a custom cache

135. 4- initial loading & perception
- ATF in 1s (illusion)
- No redirects, GZip, no scripts
- Only ATF CSS, careful with fonts
- Defer anything else

136. 5- responsiveness & experience

137. 4- responsiveness & experience
- consistent frame rate
- immediate feedback
- scrolling
- your new enemy

138. consistent fps
Keep framerate high and consistent
• Main UI thread as free as possible
• Avoid repainting (software bitmap calculations)

139. JavaScript
framerate
• Avoid DOM manipulations inside loops/scroll
var e = document.querySelector("#test");
for (var i=0; i<100; i++) {
// change e attributes
});
JAVASCRIPT

140. CSS
framerate
• Promote GPU layers smartly
selector {
-webkit-transform: translateZ(0);
-webkit-perspective: 1000;
}
selector {
z-index: 10;
}
CSS

141. Animations
framerate
• Don’t animate from JavaScript for basic stuff
• Use requestAnimationFrame

142. remember 100ms immediate
feedback?

143. Immediate feedback
• The 300ms delay
• mobile viewport (“user-scalable=no” on some browsers)
• FastClick solution

144. Immediate feedback
• FastClick solution

145. Immediate feedback
• Mobile Viewport on Chrome
<meta name=viewport
content="width=device-width">
HTML

146. Immediate feedback
• Mobile Fixed Viewport on IE
<meta name=viewport
content="width=device-width,
user-scalable=no" >
HTML

147. Immediate feedback
• CSS on IE
html {
-ms-touch-action: manipulation;
touch-action: manipulation;
}
CSS

148. Distract the user

149. Storage for immediate feedback
• web storage vs web sql vs indexeddb
• think about async vs sync
• Finally IndexedDB on iOS 8!

150. navigator.geolocation
JAVASCRIPT
.getCurrentPosition(cbOK, cbKO,
{ maximumAge: 60000 });
Geolocation cache

151. Scrolling

152. Scrolling
• avoid re-painting
• use touch overflow for momentum
• don’t use JavaScript scrollers
• on large scrolling areas: copy native

153. Large scrolling areas
Let’s copy native frameworks:
• iOS: UITableView
• Android: ListView & Adapters

154. Large scrolling areas
• Object pool

155. Infinite scroll
• DOM vs. iframe vs. object pool
• changes on iOS8

156. Your new enemy

157. NOT THE USER

158. YOUR DESIGNER

159. Careful with some design features
• GPU vs CPU repaint
• Important on scroll, transitions & animations

160. Careful with some design features
• Transforms: translate, scale, rotate and opacity GPU
• border-radius, gradients, shadows, filters CPU repaint

161. 5- responsiveness & experience
- 100s feedback
- Consistent fps
- Avoid CPU repaints
- Embrace GPU smartly
- Profile & test

162. uf! we've
covered a lot!
Picture from Simon Howden freedigitalphotos.net!

163. 1- Mobile Web today
2- Mobile Performance
3- Tools
4- Initial load & perception
5- Responsiveness & experience

164. Slides, links and tests
firtman.github.io/velocity

165. 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

166. you can reach a good experience
firtman@gmail.com
@firt
firt.mobi/mh5 firt.mobi/pmw
50% OFF!