Slides for the workshop at Fluent 2015, San Francisco

1. extreme web
performance for
mobile devices
maximiliano @firtman
firt.mobi
San Francisco, April, 20th 2015

4. NEW
!
SOON!

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

7. questions
yes, please
QA at the end
(also Office Hours tomorrow 2.15)

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

10. first…
Web Performance Optimization
How important WPO is for conversion

11. 1- mobile web today*
*today: april 2015

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

13. web platforms

14. iOS and Android
web platforms

15. Adobe Digital Index
NetMarketShare
Akamai.io
Wikimedia Stats
StatCounter
MOVR by WURFL
web platformsLinks at firtman,github.io/fluent

16. web platformsOthers
4%
Windows Phone
3%
Opera
5%
iOS
50%
Android
38%

17. web platforms
iOS
50%
Safari
100%

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

19. web platforms
iOS
50%
7.x
19%
6.x
2%
8.x
79%
Source: Apple

20. web platforms
InApp iOS
5%
Safari iOS7
9%
Safari iOS8
36%
Android
38%

21. web platforms
Android
38%

22. web platforms
Android
38% ?

23. web platforms
Android
38% Browser
50%
Chrome
50%

25. -1% month

27. web platforms

28. web platforms

29. web platforms

30. LG G3

31. web platforms
Android
38%
Samsung
20%
Browser
30%
Chrome
50%

35. web platforms
iOS
50%
Android
38%

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

37. 1- mobile web today
- Understand the real ecosystem
- Android browsers
- Don’t think you are an average user
- Everything will change

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

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

40. immediate feedback <100ms
keeping user’s flow of thoughts <1s
perception
Jakob Nielsen - Usability Engineering

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

42. why do we need special
care on mobile?

43. CPU and GPU
Memory
differences

44. CPU and GPU
Memory
differences
5x

45. Wifi
differences

46. Wifi, public spaces?
differences

47. Cellular connections
differences

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

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

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

52. But that is going to change quickly…
(
)

53. 2019?
85% in USA and 30% in Europe
will be on 4G
(
)
Source: Ericsson Mobility Report

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

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

56. latency
request
bandwidth

57. Safari, Chrome, Android 91%

58. Safari, Chrome, Android 71%91%

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

60. responsive web design

62. Responsive Web Design
is a TOOL

63. Responsive Web Design
is NOT a GOAL

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

65. Users DO care if the site is
FAST

66. responsive web design
Source: guypo.com/rwd2014

67. responsive web design
Source: guypo.com/rwd2014
43% more requests
compared with a mobile site

68. responsive web design
Source: guypo.com/rwd2014
129% more data transfer
compared with a mobile site

69. responsive web design
Source: guypo.com/rwd2014
87% more CPU time
compared with a mobile site

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

71. 3- tools

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

73. Simulator & Emulator
Real device
where

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

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

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

77. DEMO

78. online tools

79. online tools

80. online tools

81. online tools

82. remote inspectors

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

84. Measuring
DEMO

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

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

87. html5 apis

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

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

91. Navigation Timing API
html5 apis
:)

92. Navigation Timing API
html5 apis
:/
.1

93. iOS SDK Release Notes for iOS 8.1
html5 apis

94. Navigation Timing API
html5 apis
DEMO

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

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

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

98. 4- initial loading & perception

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

106. DNS Lookup

107. TCP Connection

108. HTTP Request

109. Server Response

110. RENDERING!

111. RENDERING!

112. What!!??
a page load in 200ms?
(
)

113. No really, we just need the
PERCEPTION

114. We need to avoid

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

116. Basic browser behavior
HTML
JS CSS

117. HTML
JS CSS
BLOCKS PARSING BLOCKS RENDERING

119. = REDIRECTS

120. Redirects
• From 150 to 1000 ms per redirect

121. Redirects
mydomain.com -> m.mydomain.com

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

123. Redirects
DEMO

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

129. = APP BANNER

130. = APP SPAM

131. delta.com
• 1-5 seconds delay

132. delta.com
• 1-5 seconds delay

135. idontwantyourfuckingapp.tumblr.com

136. = APP BANNER

137. The 14K limit

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

139. What!!??
the page contents in 14Kb?
(
)

140. It’s 14Kb HTTP response
(so, compressed)
~70Kb

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

142. ATF in 1s
ATF

143. ATF in 1s = 1 RTT
ATF

144. ATF in 1s = 1 RTT ~ 14Kb
ATF

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

146. How to embrace ATF in 14Kb?
(
)

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

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

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

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

151. Web Fonts
• Blocks text rendering
• Fonts are bigger than 14Kb
• Remove characters
• Simplify glyphs
• Don’t use it on ATF
ATF

152. Responsive Web Design

153. Responsive Web Design
• Media queries block rendering (all of them)
• ATF content on mobile is unique

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

155. RESPONSIVE WEB DESIGN
is the future

156. We are not saying go m.*

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

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

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

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

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

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

163. 5- responsiveness & experience

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

165. Optimize your content for mobile
experience

167. Keep framerate high and consistent
• Keep framerate high and consistent
• Avoid DOM manipulations in loops/scroll
• Careful promoting GPU layers
consistent fps

168. remember 100ms immediate
feedback?

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

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

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

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

173. Distract the user

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

175. Scrolling
• avoid re-painting
• use touch overflow for momentum
• don’t use JavaScript scrollers

176. Your new enemy

177. NOT THE USER

178. YOUR DESIGNER

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

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

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

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

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

184. Slides, links and tests
firtman.github.io/fluent

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

186. 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!