You’ve used all the server-side caching tricks in the book: memcache, APC, database cache and so on to squeeze every millisecond out, and now your site is as fast as it will ever get. Well guess again! These technologies are caching and creating the HTML which, if they done correctly, is only 10 – 20% of the user response time, so there is a lot of room for improvement. Learn how to optimize your JavaScript, CSS, Images, Cookies and a whole slew of other things that make frontend caching a magical place.

1. Frontend Caching
Helgi Þormar Þorbjörnsson
PHP Tek, Chicago, 26th May 2011
Thursday, 26 May 2011

2. Who am I?
Thursday, 26 May 2011

3. Who am I?
VP of Engineering at Orchestra.io
Thursday, 26 May 2011

4. Who am I?
VP of Engineering at Orchestra.io
Developer at PEAR
Thursday, 26 May 2011

5. Who am I?
VP of Engineering at Orchestra.io
Developer at PEAR
From Iceland
Thursday, 26 May 2011

6. Who am I?
VP of Engineering at Orchestra.io
Developer at PEAR
From Iceland
@h on Twitter
Thursday, 26 May 2011

7. Pareto Principle
20% 80%
Thursday, 26 May 2011

8. 80 / 20 Rule
20% 80%
20% of the population receives 80% of the income
Thursday, 26 May 2011

9. 80 / 20 Rule
20% 80%
20% of causes produce 80% of the effects
Thursday, 26 May 2011

10. 80% of response time is
spent downloading resources
Thursday, 26 May 2011

11. 4 Rules of Web
Performance
Thursday, 26 May 2011

12. Weight
Time
Processing
Perception
Thursday, 26 May 2011

13. Perception
Thursday, 26 May 2011

14. Make people think your site is fast
Thursday, 26 May 2011

15. When people can interact with the site
Thursday, 26 May 2011

16. Thursday, 26 May 2011

17. “It all depends on how we
look at things, and not how
they are in themselves.”
- Carl G. Jung
Thursday, 26 May 2011

18. Perception
50% of users arrive
on an empty cache
Thursday, 26 May 2011

19. Perception
Empty Cache Full Cache
28.0K 1 HTML Document
1.9K 1 Style Sheet File
59.5K 4 Javascript Files 28.0K 1 HTML Document
78.7K 24 Images 0.1K 2 Images
168.1K Total Size 28.1K Total Size
30 HTTP Requests 3 HTTP Requests
2.4s Response Time 0.9s Response Time
Thursday, 26 May 2011

20. Weight
Thursday, 26 May 2011

21. HTTP Requests
Thursday, 26 May 2011

22. HTTP Requests
Less is more
Thursday, 26 May 2011

23. HTTP Requests
Less is more
Fewer HTTP Requests
Thursday, 26 May 2011

24. HTTP Requests
Less is more
Fewer HTTP Requests
Easy to improve on
Thursday, 26 May 2011

25. Cookies
Thursday, 26 May 2011

26. Cookies
Sent with static content
Thursday, 26 May 2011

27. Cookies
Sent with static content
Slow upstream speed
Thursday, 26 May 2011

28. Cookies
Sent with static content
Slow upstream speed
Big cookies
Thursday, 26 May 2011

29. Experiment Time!
Cookie Size Response Time (Delta)
0 bytes 78 ms ( 0 ms)
500 bytes 79 ms ( +1 ms)
1000 bytes 94 ms (+16 ms)
1500 bytes 109 ms (+31 ms)
2000 bytes 125 ms (+47 ms)
2500 bytes 141 ms (+63 ms)
3000 bytes 156 ms (+78 ms)
Thursday, 26 May 2011

30. Experiment Time!
Cookie Size Response Time (Delta)
0 bytes 78 ms ( 0 ms)
500 bytes 79 ms ( +1 ms)
1000 bytes 94 ms (+16 ms)
1500 bytes 109 ms (+31 ms)
2000 bytes 125 ms (+47 ms)
2500 bytes 141 ms (+63 ms)
3000 bytes 156 ms (+78 ms)
Thursday, 26 May 2011

31. Experiment Time!
Cookie Size Response Time (Delta)
0 bytes 78 ms ( 0 ms)
500 bytes 79 ms ( +1 ms)
1000 bytes 94 ms (+16 ms)
1500 bytes 109 ms (+31 ms)
2000 bytes 125 ms (+47 ms)
2500 bytes 141 ms (+63 ms)
3000 bytes 156 ms (+78 ms)
Thursday, 26 May 2011

32. Cookies
Thursday, 26 May 2011

33. Cookies
Thursday, 26 May 2011

34. Cookies
Remove unnecessary cookies
Thursday, 26 May 2011

35. Cookies
Remove unnecessary cookies
Appropriate domain level
Thursday, 26 May 2011

36. Cookies
Remove unnecessary cookies
Appropriate domain level
Keep size low
Thursday, 26 May 2011

37. Cookies
Remove unnecessary cookies
Appropriate domain level
Keep size low
Set Expires
Thursday, 26 May 2011

38. Parallel Downloads
Thursday, 26 May 2011

39. Parallel Downloads
Be aware of max connection limits
Thursday, 26 May 2011

40. Parallel Downloads
Borrowed from BrowserScope.org
Thursday, 26 May 2011

41. Parallel Downloads
Borrowed from BrowserScope.org
Thursday, 26 May 2011

42. Parallel Downloads
One domain = 2 Parallel connections
Thursday, 26 May 2011

43. Parallel Downloads
One domain = 2 Parallel connections
HTML
Image
Image
Image
Image
Image
Image
Image
Image
0.4 0.8 1.2 1.6 2 2.4 Secs
Thursday, 26 May 2011

44. Parallel Downloads
Two domains = 4 Parallel connections
HTML
Image
Image
Image
Image
Image
Image
Image
Image
0.4 0.8 1.2 1.6 2 2.4 Secs
Thursday, 26 May 2011

45. Parallel Downloads
Too many hostnames can cause complications
Thursday, 26 May 2011

46. Parallel Downloads
Too many hostnames can cause complications
2 – 4 sub domains is a good average
Thursday, 26 May 2011

47. Combine Files
Combining 6 scripts into 1 eliminates 5 requests
Thursday, 26 May 2011

48. Combine Files
Combining 6 scripts into 1 eliminates 5 requests
Challenges:
develop as separate modules
combinations vs. loading more than needed
Thursday, 26 May 2011

49. Javascript
Doesn’t comply with
parallel download rules
Thursday, 26 May 2011

50. Javascript
Doesn’t comply with
parallel download rules
HTML
JS
Image
Image
Image
Image
Image
Image
Image
0.4 0.8 1.2 1.6 2 2.4 Secs
Thursday, 26 May 2011

51. Javascript
script defer attribute is not a solution
Thursday, 26 May 2011

52. Javascript
script defer attribute is not a solution
Solution - move them as low in the
page as possible
Thursday, 26 May 2011

53. Processing
Thursday, 26 May 2011

54. Processing
Thursday, 26 May 2011

55. Processing
Fake the delivery
Thursday, 26 May 2011

56. Processing
Fake the delivery
Lazy Loading
Thursday, 26 May 2011

57. Processing
Fake the delivery
Lazy Loading
Above the fold Loading
Thursday, 26 May 2011

58. Processing
Fake the delivery
Lazy Loading
Above the fold Loading
Delay Javascript Loading
Thursday, 26 May 2011

59. Processing
Thursday, 26 May 2011

60. Processing
Bonus - async attribute
Thursday, 26 May 2011

61. Processing
Bonus - async attribute
http://www.appelsiini.net/projects/lazyload
Thursday, 26 May 2011

62. JS Minification
Thursday, 26 May 2011

63. JS Minification
Crushes the file
Strips out all cruft
Voodoo Magic!
Thursday, 26 May 2011

64. JS Minfication
UglifyJS
Google Closure
YUI Compressor
Thursday, 26 May 2011

65. JS Minfication
UglifyJS
Google Closure
YUI Compressor
http://bit.ly/compression-rates
Thursday, 26 May 2011

66. CSS Minification
YUI Compressor
minifycss.com
OOCSS
Thursday, 26 May 2011

67. GZip
GZip can be used on
Thursday, 26 May 2011

68. GZip
GZip can be used on
JS
Thursday, 26 May 2011

69. GZip
GZip can be used on
JS
CSS
Thursday, 26 May 2011

70. GZip
GZip can be used on
JS
CSS
XML
Thursday, 26 May 2011

71. GZip
GZip can be used on
JS
CSS
XML
JSON
Thursday, 26 May 2011

72. GZip
GZip should not be used on
Thursday, 26 May 2011

73. GZip
GZip should not be used on
Images
Thursday, 26 May 2011

74. GZip
GZip should not be used on
Images
Document formats
Thursday, 26 May 2011

75. GZip
GZip should not be used on
Images
Document formats
Already compressed
Thursday, 26 May 2011

76. 404
robots.txt
favicon
Thursday, 26 May 2011

77. Images
Thursday, 26 May 2011

78. Images
favicon
Thursday, 26 May 2011

79. Images
favicon
CSS Sprites
Thursday, 26 May 2011

80. Images
favicon
CSS Sprites
inline base64
Thursday, 26 May 2011

81. Images
favicon
CSS Sprites
inline base64
Thursday, 26 May 2011

82. Images
Thursday, 26 May 2011

83. Images
Badly optimised
Thursday, 26 May 2011

84. Images
Badly optimised
Thumbnails
Thursday, 26 May 2011

85. Images
Badly optimised
Thumbnails
PNGs compressed up to 50%
Thursday, 26 May 2011

86. PNG Optimise
OptiPNG
pngwolf
pngcrush
jpegtran
Thursday, 26 May 2011

87. Time
Thursday, 26 May 2011

88. SSL
Thursday, 26 May 2011

89. SSL
Extra roundtrips
Thursday, 26 May 2011

90. SSL
Extra roundtrips
More resources for servers
Thursday, 26 May 2011

91. SSL
Extra roundtrips
More resources for servers
Worth it, tho!
Thursday, 26 May 2011

92. Tread the users’ path
Thursday, 26 May 2011

93. Tread the users’ path
Test on slower connections
Thursday, 26 May 2011

94. Tread the users’ path
Test on slower connections
Slow proxies
Thursday, 26 May 2011

95. Tread the users’ path
Thursday, 26 May 2011

96. Tread the users’ path
Tables / Phones
Thursday, 26 May 2011

97. Tread the users’ path
Tables / Phones
Airline connections
Thursday, 26 May 2011

98. Tread the users’ path
Tables / Phones
Airline connections
Public places
Thursday, 26 May 2011

99. CDN
Thursday, 26 May 2011

100. CDN
Single domain
Thursday, 26 May 2011

101. CDN
Single domain
Smart routing
Thursday, 26 May 2011

102. CDN
Single domain
Smart routing
Data is closer to end user
Thursday, 26 May 2011

103. CDN
Thursday, 26 May 2011

104. CDN
Thursday, 26 May 2011

105. CDN on a Budget
Thursday, 26 May 2011

106. CDN on a Budget
S3
Thursday, 26 May 2011

107. Query vs. Filename
revisions
Thursday, 26 May 2011

108. Query vs. Filename
revisions
Cache far in future
Thursday, 26 May 2011

109. Query vs. Filename
revisions
Cache far in future
Revisioning forces downloads
Thursday, 26 May 2011

110. Query vs. Filename
revisions
Cache far in future
Revisioning forces downloads
Thursday, 26 May 2011

111. Query revisions
Thursday, 26 May 2011

112. Query revisions
Easy and convenient
Thursday, 26 May 2011

113. Query revisions
Easy and convenient
Usually not recommended
Thursday, 26 May 2011

114. Query revisions
Easy and convenient
Usually not recommended
Bad proxies are a problem
Thursday, 26 May 2011

115. Filename revisions
Thursday, 26 May 2011

116. Filename revisions
Requires more work
Thursday, 26 May 2011

117. Filename revisions
Requires more work
Recommended
Thursday, 26 May 2011

118. Filename revisions
Requires more work
Recommended
During build, using md5 hash
Thursday, 26 May 2011

119. Compromise
Thursday, 26 May 2011

120. Compromise
Create a version function
Thursday, 26 May 2011

121. Compromise
Create a version function
Put on all resources
Thursday, 26 May 2011

122. Compromise
Create a version function
Put on all resources
mod_rewrite magic
Thursday, 26 May 2011

123. Compromise
Create a version function
Put on all resources
mod_rewrite magic
http://bit.ly/query_rev_comp
Thursday, 26 May 2011

124. Browser Tools
Thursday, 26 May 2011

125. Browser Tools
Firebug
Thursday, 26 May 2011

126. Browser Tools
Firebug
YSlow
Thursday, 26 May 2011

127. Browser Tools
Firebug
YSlow
PageSpeed
Thursday, 26 May 2011

128. Browser Tools
Firebug
YSlow
PageSpeed
Chrome Inspector
Thursday, 26 May 2011

129. Other Tools
Thursday, 26 May 2011

130. Other Tools
HTTPWatch.com
Thursday, 26 May 2011

131. Other Tools
HTTPWatch.com
WebPageTest.org
Thursday, 26 May 2011

132. Other Tools
HTTPWatch.com
WebPageTest.org
HTTPArchive.org
Thursday, 26 May 2011

133. Other Tools
HTTPWatch.com
WebPageTest.org
HTTPArchive.org
chartbeat.com
Thursday, 26 May 2011

134. Other Tools
Thursday, 26 May 2011

135. Other Tools
WonderProxy.com
Thursday, 26 May 2011

136. Other Tools
WonderProxy.com
BrowserScope.com
Thursday, 26 May 2011

137. Other Tools
WonderProxy.com
BrowserScope.com
html5boilerplate.com
Thursday, 26 May 2011

138. “Knowledge rests not upon truth
alone, but upon error also”
- Carl G. Jung
Thursday, 26 May 2011

139. Questions?
@h
helgi@orchestra.io
Joind.in: http://joind.in/3401
Thursday, 26 May 2011