Session in Velocity 2015 Europe Amsterdam on Web Performance Optimization

1. Picture from Simon Howden freedigitalphotos.net!
extreme web
performance for
mobile devices
maximiliano @firtman
firt.mobi
Amsterdam, Oct 28 2015

3. EARLY DRAFT!

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

6. questions
yes, please
QA at the end

7. performance + mobile + web
1- Mobile Web today
2- Performance & Mobile
3- Tools
4- APIs & Specs
5- 8 Tips for Extreme Performance

9. 1- mobile web today*
*today: october 2015

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

11. web platforms

12. iOS and Android
web platforms

13. NetMarketShare
Akamai.io
Wikimedia Stats
StatCounter
MOVR by WURFL
Device Atlas
web platformsLinks at firtman,github.io/velocity

14. Browsers only?
web platforms

17. web view browsing
Web View
25%
Browser
75%
Other
30%
Twitter
5% Facebook
40%
Chrome (iOS)
25%
Source: MOVR Report

18. Let’s see some data
web platforms

19. web platformsOthers
10%
iOS
45%
Android
45%

20. web platformsOthers
10%
iOS
45%
Android
45%

21. web platforms
iOS
45%
Safari
100% ?

22. web platforms
Apps (WebView)
25%
Safari
75%
iOS
45%

23. web platforms
7.x
9%
8.x
30% 9.x
61%
Source: Apple
iOS
45%

24. web platformsOthers
10%
iOS
45%
Android
45%

25. web platforms
Android
45%

26. web platforms
Browser
33%
Chrome
67%
Android
45%

28. 1% month

30. web platforms

31. web platforms

32. web platforms

33. LG G3

34. web platforms
Browser 2.x
3%
Samsung
17%
Browser 4.x
30%
Chrome
50%
Android
45%

35. web platformsOthers
10%
iOS
45%
Android
45%

36. web platformsOthers
10%

37. web platformsOthers
10%
Others
15%
Firefox
10%
UC Browser
25%
IE
25%
Opera Mini
25%

38. web platformsOthers
10%
iOS
45%
Android
45%

39. web platforms
Android
15%
Samsung
7%
Others
2%
Windows Phone
3%
UC Browser
3%
Opera
3%
InApp iOS
12%
Safari iOS8
10%
Safari iOS9
23%
Chrome
23%

40. web platforms
Old WebKit
14%
IE
3%
Proxy
5%
WebKit
46%
Chromium
30%

41. 1- mobile web today
- Understand the real ecosystem
- The Android browsers
- The WebView
- Don’t think you are an average user

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

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

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

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

46. 40% of users abandon an article if it
doesn't load after six seconds
“
”
Danny Bernstein, Google

47. Pages loaded 3.9x faster with Crystal
and used 53% less bandwidth
“
”
Crystal, an iOS ad-blocker

48. perception
Source: Google Developers
RAIL

49. perception
RAIL
100ms

50. perception
RAIL
100ms 16ms

51. perception
RAIL
100ms 16ms 50ms

52. perception
RAIL
100ms 16ms 50ms 1s

53. why do we need special
care on mobile?

54. Cellular connections
differences

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

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

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

58. Real Bandwidth (Mbps)
cellular networks
0 3.5 7 10.5 14
2G 3G Wifi 4G

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

60. latency
request
bandwidth

61. Safari, Chrome, Android 88%93%

62. 1%
5%
4%
Other non-Android, non-iOS 6%
Safari, Chrome, Android 88%94%

63. responsive web design

65. Responsive Web Design
is a TOOL

66. Responsive Web Design
is NOT a GOAL

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

68. Users DO care if the site is
FAST

69. Wait there! Google said it will
penalize non-responsive sites…
(
)

70. Mmm….
NOT REALLY

72. 2- mobile and performance
- Perception: RAIL, 100ms / 1s
- RTT latency
- RWD as a goal might be a problem
- Test on low hardware and 2G/3G

73. 3- tools

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

75. Simulator & Emulator
Real device
where

76. emulators
Android
14%
Samsung
7%
Others
2%
Windows Phone
3%
UC Browser
3%
Opera
3%
InApp iOS
14%
Safari iOS8
10%
Safari iOS9
22%
Chrome
23%

77. emulators
Android
14%
Samsung
7%
Others
2%
Windows Phone
3%
UC Browser
3%
Opera
3%
InApp iOS
14%
Safari iOS8
10%
Safari iOS9
22%
Chrome
23%

78. DEMO

79. online tools

80. online tools

81. online tools

82. online tools

83. remote inspectors

84. remote inspectors
Android
14%
Samsung
7%
Others
2%
Windows Phone
3%
UC Browser
3%
Opera
3%
InApp iOS
14%
Safari iOS8
10%
Safari iOS9
22%
Chrome
23%

85. Measuring
DEMO

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

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

88. 3- tools
- Learn where to test
- Measure loading times
- Measure responsiveness

89. 4- apis & specs
for performance

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

91. navigation timing api
* Android browser only from 4.0
Android
14%
Samsung
7%
Others
2%
Windows Phone
3%
UC Browser
3%
Opera
3%
InApp iOS
14%
Safari iOS8
10%
Safari iOS9
22%
Chrome
23%

92. Navigation Timing API
html5 apis
DEMO

93. Resource Timing API
• Information per resource
html5 apis

94. resource timing
Android
14%
Samsung
7%
Others
2%
Windows Phone
3%
UC Browser
3%
Opera
3%
InApp iOS
14%
Safari iOS8
10%
Safari iOS9
22%
Chrome
23%

95. Network information API
• Android Browser, Silk (spec #1) type
• BlackBerry 10 (spec #2) bandwidth
• Firefox, Chrome 38+ (spec #3) type & events
• Chrome 47+ (spec #4) type & estimated bw
html5 apis

96. net info api
* Different specs available
Android
14%
Samsung
7%
Others
2%
Windows Phone
3%
UC Browser
3%
Opera
3%
InApp iOS
14%
Safari iOS8
10%
Safari iOS9
22%
Chrome
23%

97. Service Workers
• Manage offline cache
• Background sync
• Push Notifications
html5 apis

98. service workers
Android
14%
Samsung
7%
Others
2%
Windows Phone
3%
UC Browser
3%
Opera
3%
InApp iOS
14%
Safari iOS8
10%
Safari iOS9
22%
Chrome
23%

99. Request Idle Callback
• Do something when the browser is idle
• Chrome 47+ (beta today)
html5 apis

100. HTTP Client Hints
• HTTP Headers: dpr, viewport’s width
• Chrome 46+
• New: save-data (future)
html5 apis

101. HTTP/2
• Performance from scratch
• Header Compression
• TCP connection reuse
• Push to Cache
• Early tests show 15-60% load time improvement

102. HTTP/2
• TLS-based only today
• Good compatibility
• Upgrade your servers
• Upgrade connections

103. http/2
Android
14%
Samsung
7%
Others
2%
Windows Phone
3%
UC Browser
3%
Opera
3%
InApp iOS
14%
Safari iOS8
10%
Safari iOS9
22%
Chrome
23%

105. AMP-HTML

107. 4- apis & specs
- HTML5 APIs
- Look for the near future
- HTTP/2 when possible
- AMP new idea

108. 5- Extreme Performance Tips

109. Network Layer
Stop Signs
RWD as a goal
HTML in 14k
CSS ASAP
JavaScript as dessert
Fast UI
Web Views

114. Image from developers.google.com

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

117. No really, we just need the
PERCEPTION

118. Network Layer

119. Network Layer
• Reduce DNS and HTTP requests
• Domain Sharding
• Gzip responses
• 14Kb congestion window for achieve 1s

120. Network Layer
• Reduce DNS and HTTP requests
• Domain Sharding
• Gzip responses
• 14Kb congestion window for achieve 1s
HTTP/2
HTTP/2
HTTP/2
HTTP/2

121. Stop Signs

122. REDIRECTS

123. APP BANNER

124. CLIENT
RENDERING

125. Stop Signs
• Reduce redirects (100ms to 1s each)
(social networks have one or two)
• Don’t create custom app banners
• Don’t use client side rendering for first view

126. Stop Signs
• Reduce redirects (100ms to 1s each)
(social networks have one or two)
• Don’t create custom app banners
• Don’t use client side rendering for first view
HTTP/2
HTTP/2
HTTP/2

127. RWD as a Goal

128. RESPONSIVE WEB DESIGN
is the future

129. We are not saying go m.*

130. Responsive Web Design
• Using same URL 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. But we are front-end!

132. Time to rethink priorities and architecture
Server
Client Frontend engineer
Backend engineer

133. Server
Client Frontend engineer
Backend engineer
Frontend server

134. HTML in 14Kb

135. • ATF in 1s = 1 RTT ~ < 14Kb (compressed)
• > 14Kb will create another roundtrip
• HTML + CSS + JavaScript
• Images?

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

137. Distract the user

138. HTML in 14Kb
• ATF content in 14Kb
• Create an AMP-HTML version if applicable
• Speed future visits
• HD/SD contexts

139. HTML in 14Kb
• ATF content in 14Kb
• Create an AMP-HTML version if applicable
• Speed future visits
• HD/SD contexts
HTTP/2
HTTP/2
HTTP/2
HTTP/2

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

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

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

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

144. CSS ASAP

145. Basic browser behavior
HTML
JS CSS

146. Basic browser behavior
HTML
JS CSS
BLOCKS RENDERING

147. CSS ASAP
• Don’t rely on media queries only
• Inline ATF CSS
• Load async the rest
• Push them on HTTP/2
• Use only one CSS file

148. CSS ASAP
• Don’t rely on media queries only
• Inline ATF CSS
• Load async the rest
• Push them on HTTP/2
• Use only one CSS file
HTTP/2
HTTP/2
HTTP/2
HTTP/2
HTTP/2

149. JavaScript as dessert

150. Basic browser behavior
HTML
JS CSS
BLOCKS PARSING

151. Avoid JavaScript frameworks
• Embrace Vanilla JS
• Load it async
• Join everything in one JS file
• Keep 60fps frame rate consistent
JavaScript

152. • Embrace Vanilla JS
• Load it async
• Join everything in one JS file
• Keep 60fps frame rate consistent
Avoid JavaScript frameworks
JavaScript
HTTP/2
HTTP/2
HTTP/2

153. Fast UI

154. • Images are non-blocking by default
• Don’t use Data URI => blocking
• Responsive Images
• Remember HD/SD
• User SVG when possible
• New Formats: WebP, APNG
Image and UI

155. Your new enemy

156. NOT THE USER

157. YOUR DESIGNER

158. Careful with some design features
• GPU vs CPU repaint
• Important on scroll, transitions & animations
• Transforms and opacity GPU
• border-radius, gradients, shadows, filters CPU repaint

159. Web Views

160. Web Views
• Too many on Android
• WebKit, Chromium, Amazon, Samsung
• Two on iOS: old and new

161. Web Views
• Less performant
• Don’t share sessions with the browser
• No HTTP/2 support on most of them

162. Fast Web Views on Android
• Project Crosswalk for local content
• Chrome Custom Tabs for browsing

163. Fast Web Views on iOS
• Project Crosswalk for local content
• WKWebView (iOS 9+)
• Safari View Controller for browsing (iOS 9+)

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

165. Improve Network
Avoid Stop Signs
Avoid RWD as a goal
HTML in 14k
CSS ASAP
JavaScript as dessert
Fast UI
Fast Web Views

166. 1- Mobile Web today
2- Mobile Performance
3- Tools
4- New APIs & Specs
5- Extreme Performance Tips

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

168. 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, be smart

169. you can reach a good experience
firtman@gmail.com
@firt
firt.mobi/hpmwfirt.mobi/mh5