Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Website Performance<br />
WEBSITE PERFORMANCE<br />18%<br />
Presenting the problem<br />
Presenting the problem<br />Total Weight<br /> 1.1 Mb<br />
Presenting the problem<br />1140 Kb<br />
Presenting the problem<br />1 167 360 bytes<br />
Presenting the problem<br />9 338 880 bit<br />
Presenting the problem<br />That’s one tired hamster<br />
Presenting the problem<br />What to do?<br />
Presenting the problem<br />Upgrade hardware?<br />
Presenting the problem<br />Knowledge!<br />
Presenting the problem<br />Analyzing the situation<br />
Presenting the problem<br />Saving Bandwidth<br />
Saving bandwidth<br />Clean Markup<br />Reduce code to content ratio<br />Proper semantics<br />Webstandards<br />Minify H...
Saving bandwidth<br />How do I uptimize a GIF?<br />Make it a<br />PNG!<br />
Saving bandwidth<br />Minify JavaScript<br />There is 303kB worth of JavaScript. <br />Minifying could save 290.5kB (95.9%...
Saving Bandwidth<br />Total Weight: 1140.8K<br />Total Weight: 657.6K<br />
Presenting the problem<br />Caching<br />
Saving bandwidth<br />Caching of Static Content<br />Add Expires headers<br />There are 51 static components without a far...
Saving Bandwidth<br />Total Weight: 1140.8K<br />Total Weight: 70.1K<br />
Saving bandwidth<br />70.1Kb = 0.5sec<br />(Download time on average ADSL)<br />
Saving bandwidth<br />Server Requests<br />
Server Requests<br />Server Requests<br />
Server Requests<br />Combine Files<br />Combine external CSS<br />Combine external JavaScript<br />YUI Compressor<br />arl...
Server Requests<br />Use Sprites<br />Combine all CSS background-images into one file:background-position: -130px -435;<br...
Server Requests<br />Parallelize downloads<br />
Server Requests<br />Serve static content from cookieless domains<br />
Server Requests<br />But don’t overdo it<br />Generally 2-4 domains does the trick<br />Main script and css files in the h...
Server Requests<br />browserscope.org<br />
SERVER REQUESTS<br />Total Weight: 1140.8K<br />Total Weight: 70.1K<br />
Prioritizing Content<br />
Prioritizing Content<br />3rd party content<br />Twitter, Analytics, FaceBook, Digg<br />Mashable has 40+ widgets<br />doc...
Prioritizing Content<br />HTML<br />JS/CSS<br />IMAGES<br />Defer Javascript<br />Maybe / maybe not - make it a conscious ...
Mobile?<br />
MOBILE<br />Guessing that half of it applies<br />Files too large wont be cached<br />AppCache<br />jQTouch are onepage ap...
Talk to me!<br />
Upcoming SlideShare
Loading in …5
×

Website Performance

1,209 views

Published on

A presentation I did at work, just going through the basics of uptimizing client-side performance.

It's almost work safe.

Published in: Technology
  • Be the first to comment

Website Performance

  1. 1. Website Performance<br />
  2. 2. WEBSITE PERFORMANCE<br />18%<br />
  3. 3. Presenting the problem<br />
  4. 4. Presenting the problem<br />Total Weight<br /> 1.1 Mb<br />
  5. 5. Presenting the problem<br />1140 Kb<br />
  6. 6. Presenting the problem<br />1 167 360 bytes<br />
  7. 7. Presenting the problem<br />9 338 880 bit<br />
  8. 8. Presenting the problem<br />That’s one tired hamster<br />
  9. 9. Presenting the problem<br />What to do?<br />
  10. 10. Presenting the problem<br />Upgrade hardware?<br />
  11. 11. Presenting the problem<br />Knowledge!<br />
  12. 12. Presenting the problem<br />Analyzing the situation<br />
  13. 13. Presenting the problem<br />Saving Bandwidth<br />
  14. 14. Saving bandwidth<br />Clean Markup<br />Reduce code to content ratio<br />Proper semantics<br />Webstandards<br />Minify HTML <br />Minifying http://www.arla.dk/ could save 13.3 Kb (26% reduction)<br />Optimize Images & Flash<br />Choose the right image format<br />No image scaling in HTML<br />Compress with the right tools<br />Smush.it™<br />Smushed23.30% or 50.26 KB from the size of your image(s)<br />PngCrush, PngOptimizer....<br />
  15. 15. Saving bandwidth<br />How do I uptimize a GIF?<br />Make it a<br />PNG!<br />
  16. 16. Saving bandwidth<br />Minify JavaScript<br />There is 303kB worth of JavaScript. <br />Minifying could save 290.5kB (95.9% reduction)<br />Minify CSS<br />There is 261 Kb of CSS<br />Minifying could reduce size by 59.8Kb (23% reduction)<br />Enable Compression<br />Compressing JS and CSS with gzip could reduce their transfer size by 463.4Kb all together (77% reduction)<br />
  17. 17. Saving Bandwidth<br />Total Weight: 1140.8K<br />Total Weight: 657.6K<br />
  18. 18. Presenting the problem<br />Caching<br />
  19. 19. Saving bandwidth<br />Caching of Static Content<br />Add Expires headers<br />There are 51 static components without a far-future expiration date<br />Configure entity tags (ETags)<br />There are 53 components with misconfiguredEtags<br />Caching of AJAX calls<br />Save XMLHTTP requests<br />http://www.arla.dk/Mine-sider/Indkobsliste/<br />Build Cacheable URL’s<br />Remove the query string and encode the parameters into the URL.<br />Not: http://www.arla.dk/ScaleAndCrop?size=178x99&url=dish.jpg<br />But: http://www.arla.dk/ScaleAndCrop/178/99/dish.jpg<br />Be sure to handle deployment and versioning<br />
  20. 20. Saving Bandwidth<br />Total Weight: 1140.8K<br />Total Weight: 70.1K<br />
  21. 21. Saving bandwidth<br />70.1Kb = 0.5sec<br />(Download time on average ADSL)<br />
  22. 22. Saving bandwidth<br />Server Requests<br />
  23. 23. Server Requests<br />Server Requests<br />
  24. 24. Server Requests<br />Combine Files<br />Combine external CSS<br />Combine external JavaScript<br />YUI Compressor<br />arla.allinone.min.v.123234543678.css<br />arla.allinone.min.v.123786743543.js<br />
  25. 25. Server Requests<br />Use Sprites<br />Combine all CSS background-images into one file:background-position: -130px -435;<br />A pain but there are tools.<br />http://www.stevesouders.com/blog/2009/09/14/spriteme/<br />
  26. 26. Server Requests<br />Parallelize downloads<br />
  27. 27. Server Requests<br />Serve static content from cookieless domains<br />
  28. 28. Server Requests<br />But don’t overdo it<br />Generally 2-4 domains does the trick<br />Main script and css files in the header should be served from the same domain as the main content.<br />ARLA case<br />img.arlastatic.dk (cookieless)/images/150x94/28470829817f4880891989f96ee08f1e_150x94.jpg<br />gfx. arlastatic.dk (cookieless)/css/gfx/icons/linkArrowSmallGreen.gif<br />crop.arla.dk/ScaleAndCrop?size=178x999999&background=0&cachetimeout=60&i...<br />
  29. 29. Server Requests<br />browserscope.org<br />
  30. 30. SERVER REQUESTS<br />Total Weight: 1140.8K<br />Total Weight: 70.1K<br />
  31. 31. Prioritizing Content<br />
  32. 32. Prioritizing Content<br />3rd party content<br />Twitter, Analytics, FaceBook, Digg<br />Mashable has 40+ widgets<br />document.write()<br />FRAG tag (document fragment)<br />Design patterns<br />Asynchronous load of content<br />http://arla.dk/opskrifter/pasta-med-basilikum-og-ost<br />http://mashable.com<br />Optimistic approach<br />Everything works all the time.<br />
  33. 33. Prioritizing Content<br />HTML<br />JS/CSS<br />IMAGES<br />Defer Javascript<br />Maybe / maybe not - make it a conscious decision<br />Or append it:<br />var js = document.createElement(’script’);js.src = ’arla.allinone.v.153409870.js’;var h = document.getElementsByTagName(’head’)[0]h.appendChild(js);<br />HTML<br />JS/CSS<br />IMAGES<br />
  34. 34. Mobile?<br />
  35. 35. MOBILE<br />Guessing that half of it applies<br />Files too large wont be cached<br />AppCache<br />jQTouch are onepage apps<br />No more than 4 connections total<br />DNS Lookups are costly<br />
  36. 36. Talk to me!<br />

×