Conference at Velocity Santa Clarar 2014

1. extreme web
performance for
mobile devices
maximiliano @firtman
firt.mobi

5. Slides, links and tests
firt.mobi/velocity

6. questions
yes, please
!
QA at the end

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

9. 1- mobile web today*
*today: june 2014

10. 1- mobile web today
- Web Platforms
- The problem of Android
- Webapps

11. web platforms

12. iOS and Android
web platforms

13. Adobe Digital Index
NetMarketShare
Akamai.io
Wikimedia Stats
StatCounter
web platformsLinks at firt.mobi/velocity

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

15. web platformsOthers
4%
Windows Phone
3%
Opera
5%
iOS!
50%
Android!
38%
Others?
• Firefox
• UC Browser
• Nokia Browser
• BlackBerry Browser

16. web platforms
iOS!
50%
Safari!
100%

17. web platforms
iOS!
50%
6.x!
11%
7.x!
89%
Source: Apple

18. web platforms
Safari iOS6
5%
Safari iOS7!
45%
Android!
38%

19. web platforms
Android!
38%

20. web platforms
Android!
38%
Browser!
64%
Chrome!
36%

21. web platforms

22. web platforms

23. web platforms
Android!
38%
Samsung!
32%
Browser!
32%
Chrome!
36%

24. web platforms
Android!
38%
4.4
4.1-4.3
4.0
2.3
Source: Android Dashboard

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

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

27. in a month… new phone

28. future

29. future

30. future

31. future

32. it’s not just about
browsers

33. webapps

34. full screen webapps
home screen webapps
webapps are also known as(
)

35. webapps
Browser’s engine!
1- Web.app (~Safari) on iOS
2- Chrome on Android
3- Firefox on Android and FxOS

36. webapps
native webapps

37. hybrid apps
packaged webapps
native webapps are also known as(
)

38. webapps
Web View

39. webapps
Web View on iOS
!
1- UIWebView on iOS 7
2- WKWebView on iOS 8

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

41. webapps
Web View on Windows
!
1- IE 10 on Windows (Phone) 8
2- IE 11 on Windows (Phone) 8.1

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

43. 2- mobile & performance
- Perception
- Differences
- Cellular networks
- Responsive Web Design
- Some data

44. immediate feedback 100ms
!
perception
Jakob Nielsen - Usability Engineering

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

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

47. “page slowdowns negatively affected
people’s long-term impression of the
entire brand”
perception
Source: Radware

48. why do we need special
care on mobile?

49. CPU and GPU
Memory
differences

50. CPU and GPU
Memory
differences
5x

51. Wifi
differences

52. Wifi, public spaces?
differences

53. Cellular connections
differences

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

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

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

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

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

59. latency
request
bandwidth

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. Page size
mobile vs desktop
responsive web design
Much smaller!
6%
Slightly smaller!
22%
Same Size!
72%
Source: guypo.com

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

70. 2- mobile and performance
- Perception: 1s threshold
- RTT latency
- Test on low hardware and 2G/3G
- Responsive Web Design
!

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!
12%
Android!
12%
Others!
4%
Windows Phone
3%
Opera
5%
Safari iOS6
5%
Safari iOS7!
45%
Chrome!
14%

75. emulators
Samsung!
12%
Android!
12%
Others!
4%
Windows Phone!
3%
Opera
5%
Safari iOS6
5%
Safari iOS7!
45%
Chrome!
14%

76. emulators
Samsung!
12%
Android!
12%
Others!
4%
Windows Phone
3%
Opera
5%
Safari iOS6
5%
Safari iOS7!
45%
Chrome!
14%

77. DEMO

78. online tools

79. online tools

80. remote inspectors

81. remote inspectors
Samsung!
12%
Android!
12%
Others!
4%
Windows Phone!
3%
Opera
5%
Safari iOS6
5%
Safari iOS7!
45%
Chrome!
14%

82. Measuring
DEMO

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

84. Connection simulators
• Charles Proxy
• Clumsy for Windows
• Network link conditioner from Xcode
• Net Limiter for Windows
• SlowyApp for Mac
tools

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

86. navigation timing api
Samsung!
12%
Android!
12%
Others!
4%
Windows Phone!
3%
Opera
5%
Safari iOS6!
5%
Safari iOS7!
45%
Chrome!
14%

88. Navigation Timing API
html5 apis
DEMO

89. Resource Timing API
• Information per resource
html5 apis

90. resource timing api
Samsung!
12%
Android!
12%
Others!
4%
Windows Phone!
3%
Opera
5%
Safari iOS6!
5%
Safari iOS7!
45%
Chrome!
14%

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
of 1s

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

103. Redirections
DEMO

104. Redirections
• From 1 to 5s
!

106. idontwantyourfuckingapp.tumblr.com

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

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

109. Basic browser behavior
HTML
JS CSS

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

111. The 14K limit

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

113. We need to separate
AVOBE THE FOLD
(ATF) content

114. ATF in 1s = 1 RTT ~ < 14Kb
ATF

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

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

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

118. Use illusion tricks
• Loading content animation
• Minimal-ui viewport ASAP (iOS 7.1+)
• Remember to keep the user engaged in 1s
ATF

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

120. Responsive Web Design

121. Responsive Web Design
ATF on mobile is not the same as on desktop

122. RWD

123. RWD

124. RWD

125. RWD
not how it works by default

126. RWD

127. RWD

128. RWD

129. DON’T rely on
RESPONSIVE WEB DESIGN
for first view

130. RESPONSIVE WEB DESIGN
is the future

131. We are not saying go m.*

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

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

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

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

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

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

138. 5- responsiveness & experience

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

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

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

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

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

144. remember 100ms immediate
feedback?

145. Immediate feedback
• The 300ms delay
!
• fixed viewport
• FastClick solution

146. Storage for immediate feedback
• web storage vs web sql vs indexeddb
• Finally IndexedDB on iOS 8!

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

148. Distract the user

149. Scrolling

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

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

152. Large scrolling areas
• Object pool
!

153. Infinite scroll
• DOM vs. iframe vs. object pool
• on iOS 8 new API (caution: on beta)

154. Your new enemy

155. NOT THE USER

156. YOUR DESIGNER

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

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

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

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

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

162. Slides, links and tests
firt.mobi/velocity

163. final thoughts
- measure and profile
- on real devices
- be simple, be aggressive

164. you can reach a good experience
Pictures)from)freedigitalphotos.net)
thank you!
twitter: @firt
mobilexweb.com
firt.mobi/pmw
Book signing:
Thu 10.45am