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....
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)
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
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/
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...
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
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