Front end optimisation

By Darren Wood <darren@dontcom.com>

Markup

  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

CSS

  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 — github.com/stubbornella/oocss

Images

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

Javascript

  1. Load framework from CDN (http://code.google.com/apis/libraries/)
  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

Tools