Front end optimisation

By Darren Wood <>


  1. use HTML5
  2. css as close to the top as possible
  3. javascript right a the bottom
  4. avoid empty src and href attributes
  5. new approach to conditional comments — see HMTL5 Boilerplate
  6. fewer HTTP requests... 1 javascript file, 1 css file, 1 image file


  1. Minify before deployment
  2. Avoid CSS expressions
  3. Always use link over @import
  4. Avoid the AlphaImageLoader IE filter for PNGs
  5. Use CSS3 for visual embellishments
  6. Use OOCSS or learn the principles and build your own ver —


  1. Gifs are dead, unless it's an animated gif.
  2. Use PNGs
  3. Use Alpha layer on PNG8's (
  4. Use sprites (
    • Bleed avoidance: $(document).ready(function() { $(".icon").prepend('); });
  5. Avoid scaling images in HTML
  6. Compress images using more than just Photoshop/Fireworks


  1. Load framework from CDN (
  2. Combine and minify
  3. Cache jQuery Selectors
  4. Give your selectors context $(".vcard","#users"); OR $("#users").find(".vcard");
  5. Don't use a library if you can just use regular old Javascript
  6. Use a Loader script
  7. Just look at these links for the full low-down