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

909

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
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
909
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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 />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×