A presentation I did at work, just going through the basics of uptimizing client-side performance. It's almost work safe.

1. Website Performance

2. WEBSITE PERFORMANCE 18%

3. Presenting the problem

4. Presenting the problem Total Weight 1.1 Mb

5. Presenting the problem 1140 Kb

6. Presenting the problem 1 167 360 bytes

7. Presenting the problem 9 338 880 bit

8. Presenting the problem That’s one tired hamster

9. Presenting the problem What to do?

10. Presenting the problem Upgrade hardware?

11. Presenting the problem Knowledge!

12. Presenting the problem Analyzing the situation

13. Presenting the problem Saving Bandwidth

14. Saving bandwidth Clean Markup Reduce code to content ratio Proper semantics Webstandards Minify HTML Minifying http://www.arla.dk/ could save 13.3 Kb (26% reduction) Optimize Images & Flash Choose the right image format No image scaling in HTML Compress with the right tools Smush.it™ Smushed23.30% or 50.26 KB from the size of your image(s) PngCrush, PngOptimizer....

15. Saving bandwidth How do I uptimize a GIF? Make it a PNG!

16. Saving bandwidth Minify JavaScript There is 303kB worth of JavaScript. Minifying could save 290.5kB (95.9% reduction) Minify CSS There is 261 Kb of CSS Minifying could reduce size by 59.8Kb (23% reduction) Enable Compression Compressing JS and CSS with gzip could reduce their transfer size by 463.4Kb all together (77% reduction)

17. Saving Bandwidth Total Weight: 1140.8K Total Weight: 657.6K

18. Presenting the problem Caching

19. Saving bandwidth Caching of Static Content Add Expires headers There are 51 static components without a far-future expiration date Configure entity tags (ETags) There are 53 components with misconfiguredEtags Caching of AJAX calls Save XMLHTTP requests http://www.arla.dk/Mine-sider/Indkobsliste/ Build Cacheable URL’s Remove the query string and encode the parameters into the URL. Not: http://www.arla.dk/ScaleAndCrop?size=178x99&url=dish.jpg But: http://www.arla.dk/ScaleAndCrop/178/99/dish.jpg Be sure to handle deployment and versioning

20. Saving Bandwidth Total Weight: 1140.8K Total Weight: 70.1K

21. Saving bandwidth 70.1Kb = 0.5sec (Download time on average ADSL)

22. Saving bandwidth Server Requests

23. Server Requests Server Requests

24. Server Requests Combine Files Combine external CSS Combine external JavaScript YUI Compressor arla.allinone.min.v.123234543678.css arla.allinone.min.v.123786743543.js

25. Server Requests Use Sprites Combine all CSS background-images into one file:background-position: -130px -435; A pain but there are tools. http://www.stevesouders.com/blog/2009/09/14/spriteme/

26. Server Requests Parallelize downloads

27. Server Requests Serve static content from cookieless domains

28. Server Requests But don’t overdo it Generally 2-4 domains does the trick Main script and css files in the header should be served from the same domain as the main content. ARLA case img.arlastatic.dk (cookieless)/images/150x94/28470829817f4880891989f96ee08f1e_150x94.jpg gfx. arlastatic.dk (cookieless)/css/gfx/icons/linkArrowSmallGreen.gif crop.arla.dk/ScaleAndCrop?size=178x999999&background=0&cachetimeout=60&i...

29. Server Requests browserscope.org

30. SERVER REQUESTS Total Weight: 1140.8K Total Weight: 70.1K

31. Prioritizing Content

32. Prioritizing Content 3rd party content Twitter, Analytics, FaceBook, Digg Mashable has 40+ widgets document.write() FRAG tag (document fragment) Design patterns Asynchronous load of content http://arla.dk/opskrifter/pasta-med-basilikum-og-ost http://mashable.com Optimistic approach Everything works all the time.

33. Prioritizing Content HTML JS/CSS IMAGES Defer Javascript Maybe / maybe not - make it a conscious decision Or append it: var js = document.createElement(’script’);js.src = ’arla.allinone.v.153409870.js’;var h = document.getElementsByTagName(’head’)[0]h.appendChild(js); HTML JS/CSS IMAGES

34. Mobile?

35. MOBILE Guessing that half of it applies Files too large wont be cached AppCache jQTouch are onepage apps No more than 4 connections total DNS Lookups are costly

36. Talk to me!