Speed Matters
Mark Stanton
@MarkStanto

Does Speed Matter?
• 2 sec delay reduces revenue by 4%
• 1/2 sec drops traffic by 20%
• fastest 10% of users stay 50%
longer than the slowest 10%
• 10ms = one man-year per day

Terminology
• Empty cache / Primed cache
• Refresh / Revisit
• Page ready / Page complete
• Throughput / Latency

HTTP in 60 seconds
• Initial Request
GET /assets/logo.png HTTP/1.1
Host: wds-demo.gruden.int
User-Agent: Mozilla/5.0...
HTTP/1.x 200 OK
Server: Apache/2.2.11...
Last-Modified: Wed, 09 Sep 2009 17:36:00 GMT
Content-Length: 4067
Content-Type: image/png
• Subsequent Requests
GET /assets/logo.png HTTP/1.1
Host: wds-demo.gruden.int
User-Agent: Mozilla/5.0...
If-Modified-Since: Wed, 09 Sep 2009 17:36:00 GMT
HTTP/1.x 304 Not Modified
Server: Apache/1.3.41 ...

Case Study

IE6
21.8s

Firefox3
18.6s

Image Optimisation
755KB
Reduction!

Image Optimisation
24 bit PNG
512KB
Reduction!

Combine JS
• Before:
• After:
7 Fewer
Requests!

Combine CSS
• Before:
• After:
6 Fewer
Requests!

JS to Bottom
Page Ready
1 sec Faster!

Cache Control
• ETags
• Expires

Cache Control
• Etag: "1c014-287d-f824c1c0"
• If-None-Match: "1c014-287d-f824c1c0"
• 304 Not Modified

Cache Control
• Expires: Wed, 08 Oct 2010 02:03:51 GMT
• 304 Not Modified

Cache Control
• Before:
<VirtualHost *:80>
ServerName wds-demo.gruden.int
DocumentRoot ...
ErrorLog /private/var/log/apache2/wds-demo-error_log
CustomLog /private/var/log/apache2/wds-demo-access_log common
</VirtualHost>
• After:
<VirtualHost *:80>
ServerName wds-demo.gruden.int
DocumentRoot ...
ErrorLog /private/var/log/apache2/wds-demo-error_log
CustomLog /private/var/log/apache2/wds-demo-access_log common
ExpiresActive on
ExpiresDefault "access plus 1 year"
FileETag none
</VirtualHost>
90% Fewer
304s!

Cache Control
• Cache-Control: "max-age=0, no-cache, no-
store, must-revalidate"
• Pragma: "no-cache"
• Expires: "Wed, 11 Jan 1984 05:00:00 GMT"
Doh!

Minify
24KB
Reduction!

Minify

GZip
• Before:
<VirtualHost *:80>
ServerName wds-demo.gruden.int
DocumentRoot ...
...
ExpiresActive on
ExpiresDefault "access plus 1 year"
FileETag none
</VirtualHost>
• After:
<VirtualHost *:80>
ServerName wds-demo.gruden.int
DocumentRoot ...
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/javascript
...
ExpiresActive on
ExpiresDefault "access plus 1 year" 96KB
FileETag none
</VirtualHost> Reduction!

Split Components
Across Domains
2.5 sec
Faster in IE6!

Sprites
139KB
Reduction!
35 Fewer
Requests!

Restructure Content

Restructure Content
• Logo into HTML
• Lazy load rotators

Restructure Content
Page Ready
5 sec Faster!

CSS Selectors
• Before:
• After:
100 ms
Faster!

Huh?
100 ms
Faster!

Summary
• Optimised Images • Minify
• Combined JS • GZip
• Combined CSS • Split Domains
• JS to the Bottom • Sprites
• Cache Control: Expires • Restructure Content

IE6 - Original
21.8s

IE6 - Final
6.0s

Firefox3 - Original
18.6s

Firefox3 - Final
4.1s

Tools
• Firefox Plugins
• Firebug
• YSlow
• Page Speed
• Cache Status
• LiveHTTPHeaders
• Charles Proxy

Tools
• http://compressorrater.thruhere.net/
• http://developer.yahoo.com/yslow/smushit/
• http://spriteme.org/
• http://spritegen.website-performance.org/

Tools
• http://spritegen.website-performance.org/
• http://spriteme.org/
• http://developer.yahoo.com/yslow/smushit/
• http://compressorrater.thruhere.net/

Hat Tip
• http://stevesouders.com/
• http://developer.yahoo.com/performance/

Conclusion
• Look for low hanging fruit
• Make incremental improvements
• Incorporate into your process

Conclusion
• Small upfront investment - continuous benefit
• Reduced bandwidth
• Reduced load times
• Everyone lives happily ever after

Thanks
• http://delicious.com/markstanton/speed-talk
• @MarkStanto

Pop Quiz

Pop Quiz

Pop Quiz