As we build richer, more complex web applications it’s easy to forget that speed is the cornerstone of user experience. Bing have found that a 2 second delay reduces revenue by 4%. Google know that half a second delay drops traffic by 20%. AOL have shown that users with a speedy experience stay 50% longer than users who have to wait. The evidence is clear – speed matters. What’s more, most latency comes from the front-end, not the backend so the fixes are not specific to a particular platform. This session will examine a range of techniques from DOM & CSS tricks to web server and HTTP tweaks that can help improve front-end performance by 25-50%. Whether you’re looking to save bandwidth, increase your conversion rate, retain visitors, save time or just make your users happy – the speed of your site matters.

1. Speed Matters
Mark Stanton
@MarkStanto

2. 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

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

4. 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 ...

5. Case Study

6. IE6
21.8s

7. Firefox3
18.6s

8. Image Optimisation
755KB
Reduction!

9. Image Optimisation
24 bit PNG
512KB
Reduction!

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

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

12. JS to Bottom
Page Ready
1 sec Faster!

13. Cache Control
• ETags
• Expires

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

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

16. 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!

17. 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!

18. Minify
24KB
Reduction!

19. Minify

20. 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!

21. Split Components
Across Domains
2.5 sec
Faster in IE6!

22. Sprites
139KB
Reduction!
35 Fewer
Requests!

23. Restructure Content

24. Restructure Content
• Logo into HTML
• Lazy load rotators

25. Restructure Content
Page Ready
5 sec Faster!

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

27. Huh?
100 ms
Faster!

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

29. IE6 - Original
21.8s

30. IE6 - Final
6.0s

31. Firefox3 - Original
18.6s

32. Firefox3 - Final
4.1s

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

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

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

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

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

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

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

40. Pop Quiz

41. Pop Quiz

42. Pop Quiz