Presentation at Velocity Conference 2014 New York USA

1. extreme web
performance for
mobile devices
maximiliano @firtman
firt.mobi
New York, Sep 15 2014

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

6. questions
yes, please
!
QA at the end
office hours tomorrow

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: september 2014

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

11. web platforms

12. web platforms
iOS and Android

13. Links at firt.mobi/velocity web platforms
Adobe Digital Index
NetMarketShare
Akamai.io
Wikimedia Stats
StatCounter
MOVR by WURFL

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

15. web platforms
Windows Phone
Others
4%
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%

22. web platforms

23. web platforms

24. web platforms

25. LG G3

26. web platforms
Android!
38%
Samsung!
22%
Browser!
42%
Chrome!
36%

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

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

29. web platforms
Samsung!
10%
Android!
15%
Others
4%
Windows Phone
3%
Opera
5%
Safari iOS6
5%
Safari iOS7!
45%
Chrome!
14%
Others?
• Firefox
• UC Browser
• Nokia Browser
• BlackBerry Browser

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

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

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

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

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

35. why do we need special
care on mobile?

36. CPU and GPU
Memory
differences

37. CPU and GPU
Memory
differences
5x

38. Long tail persists
differences
Source: MOVR by ScientiaMobile

39. Wifi
differences

40. differences
Wifi, public spaces?

41. differences
Cellular connections

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

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

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

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

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

47. latency
request
bandwidth

48. responsive web design

50. Responsive Web Design
is a TOOL

51. Responsive Web Design
is NOT a GOAL

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

53. Users DO care if the site is
FAST

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

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

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

59. 3- tools

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

61. Simulator & Emulator
Real device
where

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

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

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

65. DEMO

66. online tools

67. online tools

68. remote inspectors

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

70. Measuring
DEMO

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

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

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

74. navigation timing api
Android*!
12%
Samsung!
12%
Others!
4%
Windows Phone!
3%
Opera
5%
Safari iOS6!
5%
Safari iOS7!
45%
Chrome!
14%
* Android browser only from 4.0

76. Navigation Timing API
html5 apis
In just 2 days…

77. navigation timing api
Android!
12%
Samsung!
12%
Others!
4%
Windows Phone!
3%
Opera
5%
Safari iOS6/7!
15%
Safari iOS8!
35%
Chrome!
14%
in a few weeks…

78. Navigation Timing API
html5 apis
DEMO

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

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

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

82. 4- initial loading & perception

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

88. Image from developers.google.com

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

91. No really, we just need the
PERCEPTION

92. Let’s see
HOW

94. = REDIRECTS

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

96. Redirects
DEMO

98. = APP BANNER

99. • From 1 to 5s

100. idontwantyourfuckingapp.tumblr.com

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

102. Basic browser behavior
HTML
JS CSS

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

104. The 14K limit

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

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

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

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

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

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

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

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

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

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

115. Responsive Web Design

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

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

118. RESPONSIVE WEB DESIGN
is the future

119. We are not saying go m.*

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

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

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

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

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

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

126. 5- responsiveness & experience

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

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

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

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

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

132. remember 100ms immediate
feedback?

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

134. Immediate feedback
!
• FastClick solution

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

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

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

138. Distract the user

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

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

141. Scrolling

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

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

144. Large scrolling areas
• Object pool
!

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

146. Your new enemy

147. NOT THE USER

148. YOUR DESIGNER

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

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

151. 300 CSS pixels
device px px ratio
300 1.00
390 1.30
450 1.50
600 2.00
672 2.24
900 3.00
1200 4.00
!
Firefox OS
Nexus 7
Galaxy SII
iPhone 5/6
BB Z10
iPhone 6 Plus
LG G3

152. Careful with some design features
• Deliver super high resolution images

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

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

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

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

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

158. you can reach a good experience
Book signing: firt.mobi/pmw
Wed 10.45am
Office Hours:
Tue 10.45am
twitter: @firt
mobilexweb.com
Pictures)from)freedigitalphotos.net)