More Related Content Similar to Frontend caching - PHP Day, Italy, 2011 (14) More from Helgi Þormar Þorbjörnsson (14) Frontend caching - PHP Day, Italy, 20111. Frontend Caching
Helgi Þormar Þorbjörnsson
PhpDay, Italy, Verona, 14th May 2011
Saturday, 14 May 2011
3. Who am I?
VP of Engineering at Orchestra.io
Saturday, 14 May 2011
4. Who am I?
VP of Engineering at Orchestra.io
Developer at PEAR
Saturday, 14 May 2011
5. Who am I?
VP of Engineering at Orchestra.io
Developer at PEAR
From Iceland
Saturday, 14 May 2011
6. Who am I?
VP of Engineering at Orchestra.io
Developer at PEAR
From Iceland
@h on Twitter
Saturday, 14 May 2011
8. 80 / 20 Rule
20% 80%
20% of the population receives 80% of the income
Saturday, 14 May 2011
9. 80 / 20 Rule
20% 80%
20% of causes produce 80% of the effects
Saturday, 14 May 2011
10. 80% of response time is
spent downloading resources
Saturday, 14 May 2011
11. 4 Rules of Web
Performance
Saturday, 14 May 2011
12. Weight
Time
Processing
Perception
Saturday, 14 May 2011
17. “It all depends on how we
look at things, and not how
they are in themselves.”
- Carl G. Jung
Saturday, 14 May 2011
18. Perception
50% of users arrive
on an empty cache
Saturday, 14 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
Saturday, 14 May 2011
23. HTTP Requests
Less is more
Fewer HTTP Requests
Saturday, 14 May 2011
24. HTTP Requests
Less is more
Fewer HTTP Requests
Easy to improve on
Saturday, 14 May 2011
26. Cookies
Sent with static content
Saturday, 14 May 2011
27. Cookies
Sent with static content
Slow upstream speed
Saturday, 14 May 2011
28. Cookies
Sent with static content
Slow upstream speed
Big cookies
Saturday, 14 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)
Saturday, 14 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)
Saturday, 14 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)
Saturday, 14 May 2011
34. Cookies
Remove unnecessary cookies
Saturday, 14 May 2011
35. Cookies
Remove unnecessary cookies
Appropriate domain level
Saturday, 14 May 2011
36. Cookies
Remove unnecessary cookies
Appropriate domain level
Keep size low
Saturday, 14 May 2011
37. Cookies
Remove unnecessary cookies
Appropriate domain level
Keep size low
Set Expires
Saturday, 14 May 2011
40. Parallel Downloads
Be aware of max connection limits
CNAME to point multiple sub domains to the same IP
Saturday, 14 May 2011
41. Parallel Downloads
Be aware of max connection limits
CNAME to point multiple sub domains to the same IP
Saturday, 14 May 2011
45. 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
Saturday, 14 May 2011
46. 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
Saturday, 14 May 2011
48. Parallel Downloads
Too many hostnames can cause complications
2 – 4 sub domains is a good average
Saturday, 14 May 2011
49. Combine Files
Combining 6 scripts into 1 eliminates 5 requests
Saturday, 14 May 2011
50. Combine Files
Combining 6 scripts into 1 eliminates 5 requests
Challenges:
develop as separate modules
combinations vs. loading more than needed
Saturday, 14 May 2011
51. Javascript
Doesn’t comply with
parallel download rules
Saturday, 14 May 2011
52. 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
Saturday, 14 May 2011
53. Javascript
script defer attribute is not a solution
Saturday, 14 May 2011
54. Javascript
script defer attribute is not a solution
Solution - move them as low in the
page as possible
Saturday, 14 May 2011
57. Processing
Fake the delivery
Saturday, 14 May 2011
58. Processing
Fake the delivery
Lazy Loading
Saturday, 14 May 2011
59. Processing
Fake the delivery
Lazy Loading
Above the fold Loading
Saturday, 14 May 2011
60. Processing
Fake the delivery
Lazy Loading
Above the fold Loading
Delay Javascript Loading
Saturday, 14 May 2011
62. Processing
Bonus - async attribute
Saturday, 14 May 2011
63. Processing
Bonus - async attribute
http://www.appelsiini.net/projects/lazyload
Saturday, 14 May 2011
65. JS Minification
Crushes the file
Strips out all cruft
Voodoo Magic!
Saturday, 14 May 2011
66. JS Minfication
UglifyJS
Google Closure
YUI Compressor
Saturday, 14 May 2011
67. JS Minfication
UglifyJS
Google Closure
YUI Compressor
http://bit.ly/compression-rates
Saturday, 14 May 2011
69. GZip
GZip can be used on
Saturday, 14 May 2011
70. GZip
GZip can be used on
JS
Saturday, 14 May 2011
71. GZip
GZip can be used on
JS
CSS
Saturday, 14 May 2011
72. GZip
GZip can be used on
JS
CSS
XML
Saturday, 14 May 2011
73. GZip
GZip can be used on
JS
CSS
XML
JSON
Saturday, 14 May 2011
74. GZip
GZip should not be used on
Saturday, 14 May 2011
75. GZip
GZip should not be used on
Images
Saturday, 14 May 2011
76. GZip
GZip should not be used on
Images
Document formats
Saturday, 14 May 2011
77. GZip
GZip should not be used on
Images
Document formats
Already compressed
Saturday, 14 May 2011
78. 404
robots.txt
favicon
Saturday, 14 May 2011
80. Images
favicon
Saturday, 14 May 2011
81. Images
favicon
CSS Sprites
Saturday, 14 May 2011
82. Images
favicon
CSS Sprites
Saturday, 14 May 2011
84. Images
Badly optimised
Saturday, 14 May 2011
85. Images
Badly optimised
Thumbnails
Saturday, 14 May 2011
86. Images
Badly optimised
Thumbnails
PNGs compressed up to 50%
Saturday, 14 May 2011
87. PNG Optimise
OptiPNG
pngwolf
pngcrush
jpegtran
Saturday, 14 May 2011
90. SSL
Extra roundtrips
Saturday, 14 May 2011
91. SSL
Extra roundtrips
More resources for servers
Saturday, 14 May 2011
92. SSL
Extra roundtrips
More resources for servers
Worth it, tho!
Saturday, 14 May 2011
95. Tread the users’ path
Test on slower connections
Slow proxies
Saturday, 14 May 2011
98. Tread the users’ path
Tables / Phones
Airline connections
Saturday, 14 May 2011
99. Tread the users’ path
Tables / Phones
Airline connections
Public places
Saturday, 14 May 2011
101. CDN
Single domain
Saturday, 14 May 2011
102. CDN
Single domain
Smart routing
Saturday, 14 May 2011
103. CDN
Single domain
Smart routing
Data is closer to end user
Saturday, 14 May 2011
106. CDN on a Budget
Saturday, 14 May 2011
107. CDN on a Budget
S3
Saturday, 14 May 2011
110. Query vs. Filename
revisions
Cache far in future
Revisioning forces downloads
Saturday, 14 May 2011
111. Query vs. Filename
revisions
Cache far in future
Revisioning forces downloads
Saturday, 14 May 2011
114. Query revisions
Easy and convenient
Usually not recommended
Saturday, 14 May 2011
115. Query revisions
Easy and convenient
Usually not recommended
Bad proxies are a problem
Saturday, 14 May 2011
119. Filename revisions
Requires more work
Recommended
During build, using md5 hash
Saturday, 14 May 2011
121. Compromise
Create a version function
Saturday, 14 May 2011
122. Compromise
Create a version function
Put on all resources
Saturday, 14 May 2011
123. Compromise
Create a version function
Put on all resources
mod_rewrite magic
Saturday, 14 May 2011
124. Compromise
Create a version function
Put on all resources
mod_rewrite magic
http://bit.ly/query_rev_comp
Saturday, 14 May 2011
129. Browser Tools
Firebug
YSlow
PageSpeed
Chrome Inspector
Saturday, 14 May 2011
132. Other Tools
HTTPWatch.com
WebPageTest.org
Saturday, 14 May 2011
133. Other Tools
HTTPWatch.com
WebPageTest.org
HTTPArchive.org
Saturday, 14 May 2011
134. Other Tools
HTTPWatch.com
WebPageTest.org
HTTPArchive.org
Yottaa.com
Saturday, 14 May 2011
137. Other Tools
WonderProxy.com
pagespeed.googlelabs.com
Saturday, 14 May 2011
138. Other Tools
WonderProxy.com
pagespeed.googlelabs.com
BrowserScope.com
Saturday, 14 May 2011
139. Other Tools
WonderProxy.com
pagespeed.googlelabs.com
BrowserScope.com
html5boilerplate.com
Saturday, 14 May 2011
140. “Knowledge rests not upon truth
alone, but upon error also”
- Carl G. Jung
Saturday, 14 May 2011
141. Questions?
helgi@orchestra.io
Twitter: @h
Joind.in: http://joind.in/2987
Saturday, 14 May 2011