Mais conteúdo relacionado Mais de Helgi Þormar Þorbjörnsson (11) Frontend Caching, PHPTek 2011, Chicago1. Frontend Caching
Helgi Þormar Þorbjörnsson
PHP Tek, Chicago, 26th May 2011
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
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
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
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
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
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
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
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
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
60. Processing
Bonus - async attribute
Thursday, 26 May 2011
61. Processing
Bonus - async attribute
http://www.appelsiini.net/projects/lazyload
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
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
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
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
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
94. Tread the users’ path
Test on slower connections
Slow proxies
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
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
105. CDN on a Budget
Thursday, 26 May 2011
106. CDN on a Budget
S3
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
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
118. Filename revisions
Requires more work
Recommended
During build, using md5 hash
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
128. Browser Tools
Firebug
YSlow
PageSpeed
Chrome Inspector
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
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