This is a presentation I gave at the Frontenders event in Valencia on September 12th. It reveals the most common performance traits of the mobile web and discusses 7 techniques that enable developers to improve the page load and rendering time of their web sites.

1. The mobile web:
At a snail‘s pace
@marcelkalveram
marcelkalveram.com

2. 3 Performance Traits
Network Download Rendering

3. The latency problem
SYN
ACK
ACK

4. +

5. SYN
GET
ACK

6. +

7. Data
„RTT is the length of time it takes for a signal to be sent plus the length of time
it takes for an acknowledgment of that signal to be received“ (Source: Wikipedia)

8. 0.32s 3.2s
16

9. requests

10. ... a performance bottleneck
0
1000
2000
3000
4000
1Mbps 5Mbps 10Mbps
Page load time vs. increasing bandwidth
Page load time
(ms)
Source: www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck

11. 3 Performance Traits
Network Download Rendering

12. The web is getting heavier
550
740
930
1.120
1.310
1.500
MAY2011
MAY2012
MAY2013
Average download size of a website
kilobytes
Source: httparchive.org/trends.php

13. 0.61s 3.2s

14. 3 Performance Traits
Network Download Rendering

15. A speed benchmark
vs.
iPhone

16. 5
2012
Intel

17. Celeron

18. 440
2006
Source: browser.primatelabs.com/processor-benchmarks

19. Rendering

20. is

21. very

22. expensive

23. in

24. terms

25. of

26.
performance,

27. and

28. is

29. one

30. of

31. the

32. main

33. causes

34.
of

35. slow

36. DOM

37. scripts,

38. especially

39. on

40. devices

41.
with

42. low

43. processing

44. power,

45. such

46. as

47. phones.

48. 3 Performance Traits
Network Download Rendering

49. A common request
25%

50. of

51. the

52.
Users

53. abandon

54.
the

55. page
4

56. sec
Source: blog.kissmetrics.com/loading-time
2013

57. average
for

58. mobile
7.5

59. sec

60. 7 Performance Tips
Image Source:dorrys.com/moving-snails-pace

61. 1Avoid redirects

62. window.location.href

63. =
m.interesting-website.com
www.interesting-
website.com
Hi!

64. Do

65. you

66. want

67. to

68.
download

69. our

70. app?
...
Image source: www.ragecollection.com/guide

71. 2Reduce requests

72. }
42
Average

73. number

74.
of

75. resources

76.
per

77. page.
Modern

78. browsers
can

79. download

80.
4

81. files

82. in

83. parallel
Concatenate assets
Source: developers.google.com/speed/articles/web-metrics

84. Combine CSS with preprocessors
compass --watch sass/style.scss:css/style.css
Inline JavaScript and CSS files smaller than 4kb
script ... /script and style ... /style
Use sprite images with similar color palettes
wearekiss.com/spritepad, spritecow.com
General rules

85. 3Optimize images

86. Images
62 % Other
10 %
Flash
6 %
JS
16 %
CSS
3 %
Html
4 %
Oh

87. god

88. JPG...
Source: www.lukew.com/ff/entry.asp?1684

89. Choose wisely...

90. Image optimization
kraken.io smush.itImageOptim
Web-based Mac-only Uploads/URLs
15% 10% 5%

91. 4Shrink page weight

92. Drop big frameworks
jQuery
93kB
zepto
27kB
MooTools
90kB
sizzle
18kB
~80%
~70%

93. microjs.com

94. 5Use Caching

95. Caching
Expires
IfModule mod_expires.c
ExpiresActive on
ExpiresByType text/html „access plus 5 minutes“
ExpiresByType image/jpg „access plus 6 months“
ExpiresByType image/gif „access plus 6 months“
ExpiresByType image/png „access plus 6 months“
ExpiresByType image/jpg „access plus 6 months“
ExpiresByType text/css „access plus 6 months“
ExpiresByType text/javascript „access plus 6 months“
ExpiresByType text/x-javascript „access plus 6 months“
ExpiresByType text/x-icon „access plus 1 year“
/IfModule
Source: The Smashing Mobile Book - Optimizing For Mobile (Page 192)
up

96. to

97. 90%

98. faster

99. page

100. load

101. time

102. localStorage cache
key-value storedownload code
Asset loaded?
YESNO

103. Example
script id=“jQuery“/script
var jQfile;
if (‘jqFile’ in window.localStorage) {
jqFile = window.localStorage.getItem(‘jqFile’);
}
else {
jqFile = getJQFile();
window.localStorage.setItem(‘jqFile’, jqFile);
}
document.getElementById(‘jQuery’).text = jqFile;
Source: The Smashing Mobile Book - Optimizing For Mobile (Page 201)

104. uncached
200kB
cached
30kb
Microsoft has reduced its footprint from 200kB on the first file request
to 30kB for subsequent requests by using localStorage.

105. 6Improve startup time

106. Browser

107. waits

108. for

109. JavaScript

110. to

111. be

112. parsed

113. Correct CSS/JS order
html
head
// CSS goes here
link rel=“stylehseet“ href=“iCanLoadFirst.css” /
/head
body
...
img src=”iCanDownloadBeforeTheJavaScript.jpg” /
...
script src=”require.js”/script
/body
Doesn‘t

114. block

115. 7Avoid reflows

116. Applying styles
var el =
document.getElementById(‘foo’);
el.style.color = ’#fff’;
el.style.backgroundColor = ’#000’;
el.style.borderColor = ’#fe0’;
var el =
document.getElementById(‘foo’);
el.className = ‘bar’;
Bad Good
3

117. reflows 1

118. reflow

119. Dynamic addition
Bad Good
var ul =
document.getElementsByTagName(ul)[0];
var elems = [
document.createElement(li),
document.createElement(li),
document.createElement(li),
...
];
var ul =
document.getElementsByTagName(ul)[0];
ul.appendChild( fragment.cloneNode() );
var elems = [
document.createElement(li),
document.createElement(li),
document.createElement(li),
...
];
for ( var e = 0; e elems.length; e++ ) {
ul.appendChild( elems[e].cloneNode() );
}
var fragment =
document.createDocumentFragment();
n

120. reflows 1

121. reflow
for ( var e = 0; e elems.length; e++ ) {
fragment.appendChild( elems[e] );
}

122. Recap

123. 3 Performance Traits
Network Download Rendering

124. The next time you feel
that your site is going at
a snail‘s pace...

126. Reduce requests
Avoid reflows
Optimize images
Avoid redirects
Shrink page weight
Improve startup time
Use caching

127. If you can‘t remember...

128. KEEP
CALM
AND
SNAILS-PACE.COM

129. Thanks for
your attention!
Ask

130. a

131. question
...or

132. have

133. a

134. beer!